@charset "UTF-8";

img:hover {
	opacity: 1; /* Making a duck show at full opacity when you roll over him with a mouse */
}

/* Begin button bar styling */

nav {
	background-color: rgba(247,247,247,0.70);
	height: 65px;
	position: relative; /* This gives our z-index something to hook on to */
	z-index: 1000; /* This makes sure our navigation appears over the top of the foreground duck image */
}

/* This is the base of our bulleted list */
nav ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none; /* Hide those bullets */
	list-style-image: none; /* NO REALLY, hide those bullets */
}

nav ul li {
	display: block; /* Turns our list item into a box to contain our buttons */
	width: 20%; /* We want our buttons to take up equal parts of the navigation area. Because we have four buttons, then the width must be 25% */
	height: 65px; /* Match our <nav> tag height of 65px */
	float: left; /* Float them left so they go horizontally across the page */
		list-style-type: none; /* Hide those bullets */
	list-style-image: none; /* NO REALLY, hide those bullets */
}

/* Here is the actual button style itself */

nav ul li a {
	display: block; /* Makes <a> tag fill 100% of the width of it's containing <li> */
	height: 50px; /* This is really 65px, but I have subtracted the padding-top from this number in order to horizontally balance the type */
	text-align: center;
	background-color: rgba(50,54,54,0.70);
	color: rgba(205,164,107,1.00);
	text-decoration: none;
	font-size: 2em;
	font-style: italic;
	font-weight: bold;
	padding-top: 15px; /* This padding vertically centeres the type */
	
	
	/* Shadow border */
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: rgba(54,54,54,.7);
	
	/* Highlight border */
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(54,54,54,.7);
}

/* End of button */


/* Using a freaky :first-child pseudo-class style to take the orphan highlight border off the left edge */
nav ul li:first-child a {
	border-left: none;
}


/* This is all Agostina's fault. She wanted to dye the second button a different color in our navigation for some reason. So, using an :nth-child(n) pseudo-class style, we did. 
nav ul li:nth-child(2) a {
	background-color: rgba(42,66,80,1.00);
}*/

/* AND she wanted a rollover of a different color. So we did that too. */
nav ul li:nth-child(2) a:hover {
	/*background-color: rgba(237,216,132,1.00);*/
}

/* Using a freaky :last-child pseudo-class style to take the orphan shadow border off the right edge */
nav ul li:last-child a {
	border-right: none;
}

/* Rollover color */
nav ul li a:hover {
	background-color: rgba(44,56,70,.7);
}
.box{
	text-align: center;
	margin-left: 25%;
	margin-right: 25%;
	width: 40%;
	padding: 3em;
	border-radius: 4em;
	background-color: rgba(50,54,54,0.40);
	font-size: 3em;
	color: rgba(246,246,246,1.00);
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	list-style-type: none; /* Hide those bullets */
	list-style-image: none;
}

.box ul li {
	
		list-style-type: none; /* Hide those bullets */
		text-decoration: none;
	
}

body {
	/*background-image: url(../images/pineapple_tops_white_wall.jpg);*/
	/*background-image: url(../images/neon_pineapple.jpg);*/
	background-image:url(../images/upclose_pineapple.jpg);
	background-position: 100% 100%;
	margin: 0;
	padding: 0;
	witdth: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	list-style-type: none; /* Hide those bullets */
	list-style-image: none;
}

h2 {
	/*vertical-align: middle;*/
	text-align:center;
	font-size: 2em;
}


/*.vertical-text {
	transform: rotate(90deg);
	left-top: 1;
	float:right;
	font-size: 5em;
	z-index: 2000;
	color: rgba(205,164,107,1.00);
	padding:0px;
}

.vertical-text-2 {
	transform: rotate(90deg);
	left-top: 0;
	float:left;
	font-size: 2em;
	z-index: 1000;
	color: rgba(246,246,246,1.00);
	
}*/

footer {
	font-size: 8em;
	color: rgba(205,164,107,1.00);
	text-shadow: 1px 1px rgba(252,252,252,1.00);
	text-align: justify;
	float: right;
	z-index: 1000;
	padding-right: 2%;
}

/*.wrapper {
	
	transform: rotate(90deg);
	left-top: 0;
	float:left;
	font-size: 2em;
	z-index: 1000;
	color: rgba(246,246,246,1.00);
	
}*/

/* This media query applies only to your website when it is displayed in a browser that is 960 pixels or smaller */
@media only screen and (max-width: 960px) {
	
	body {
		background-image: none; /* Gets rid of background gradient */
		background-color: red;
	}
	
}

/* This media query applies only to your website when it is displayed in a browser that is 500 pixels or smaller */
@media only screen and (max-width: 500px) {
	
	body {
		background-image: none; /* Gets rid of background gradient */
		background-color: limegreen;
	}
	
	nav ul li {
		float: none; /* Gets rid of left floats on buttons */
		width: 100%; /* Makes buttons stretch to 100% of the container width */
		height: auto; /* Removes fixed height to allow drop down menu to work */
		
	}
	
	nav ul li a {
		border-left: none; /* Gets rid of left borders */
		border-right: none; /* Gets rid of right borders */
		height: auto; /* Removes fixed height to allow drop down menu to work */
		padding: 30px; /* Makes buttons fat enough for fingers to use on touch devices */
		border-bottom-color: aqua;
	}
	
	
}