/* 
Filename: sitewide.css
Author: Charls Sebastian
Description: CSS for project5
Note: This document validates as CSS level 3 ! 
*/

/* CSS simple reset minified */
*{margin:0;padding:0;border:0;outline:0;line-height:1.5em;vertical-align:baseline;font-family:Arial,Helvetica,sans-serif;list-style:none;}

/* body and layout styles */
  /*Styling for body*/
  body {
	/*Set font size to 90% of parent element*/
	font-size: 90%;
	/*Set background color to opaque black*/
	background-color: rgba(0, 0, 0, 1);
	/* Set margins to zero on all sides */
	margin: 0;
	/*Set padding to zero on all sides*/
	padding: 0;
  }
  
  /*Comments are a great way to explain your CSS code and make it easier to read and understand. They can also be helpful when you come back to your code later and need to remember why you made certain choices or modifications.*/

/*Class for wrapping content*/
.wrap {
	/*Center element horizontally*/
	margin: auto;
	/*Set fixed width*/
	width: 770px;
	/*Center text content*/
	text-align: center;
  }
/*Paragraph styling*/
p {
	/*Set top and bottom margins to 5 pixels*/
	margin-top: 5px;
	margin-bottom: 5px;
  }
/* IE conditional comments */
/*ID for IE conditional*/
#conditional {
	/*Set text color to white and make it opaque*/
	color: rgba(255, 255, 255, 1);
	
	/*Set font weight to bold*/
	font-weight: bold;
	
	/*Set font size to 10 pixels*/
	font-size: 10px;
	
	/*Align text to center*/
	text-align: center;
	
	/*Set background color to red*/
	background-color: rgba(204, 0, 0, 1);
	
	/*Set padding (top, right, bottom, left)*/
	padding: 5px 0 5px 0;
	
	/*Set bottom margin to 0 pixels*/
	margin-bottom: 0;
  }
  

/* header styles */
/*ID for header*/
#redbar {
	/*Set the background color to red*/
	background-color: rgba(204, 0, 0, 1);
	
	/*Set the margin to 0 pixels on all sides*/
	margin: 0;
	
	/*Set the padding to 0 pixels on all sides*/
	padding: 0;
	
	/*Set the height to 150 pixels*/
	height: 150px;
	
	/*Add a background image and set its properties*/
	background-image: url(images/logo_bkgd.gif);
	background-repeat: repeat-x;
	background-attachment: fixed;
  }

/* fun facts styles */
#funfacts {
	/*add padding of .5em on all sides*/
	padding: 0.5em;
	/*set margin to 0 pixels on all sides*/
	margin: 0;
	/*add a 1 pixel, solid and light gray colored border*/
	border: 1px solid rgba(204, 204, 204, 1);
	/*set the background color to white*/
	background-color: rgba(255, 255, 255, 1);
	/*set position to relative*/
	position: relative;
	/*apply a left position of 250 pixels*/
	left: 250px;
	/*apply a top position of -70 pixels*/
	top: -70px;
	/*set the width to 250 pixels*/
	width: 250px;
	/*add a box shadow with a 3px x and y offset, a 5 pixel blur, and black color with 75% opacity*/
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.75);
	/*add a border radius of 5 pixels*/
	border-radius: 5px;
	}
	/*Id for facts*/
#facts {
	/*Add padding of 0.5em to all sides*/
	padding: 0.5em;
	/*Set margin to 0 pixels on all sides*/
	margin: 0;
	/*Add a 1-pixel solid border with a light gray color*/
	border: 1px solid rgba(204, 204, 204, 1);
	/*Set the background color to completely opaque white*/
	background-color: rgba(255, 255, 255, 1);
	/*Set the position to relative, and move it 250 pixels to the right and 60 pixels up*/
	position: relative;
	left: 250px;
	top: -60px;
	/*Set the width to 250 pixels and height to 350 pixels*/
	width: 250px;
	height: 350px;
	/*Add a border radius of 5 pixels to give the element rounded corners*/
	border-radius: 5px;
  }
  /*Id for facts text*/
  #factstext {
	/*Sets the text color to a shade of gray*/
	color: rgba(51,51,51,1);
	/*Aligns the text to the left*/
	text-align: left;
	/*Adds some space inside the text element*/
	padding: 0.5em;
	/*Adds some space outside the text element*/
	margin: 2px 0 0 0;
	/*Adds additional space at the bottom of the text element*/
	margin-bottom: 8px;
	/*Sets the position of the text element to "relative"*/
	position: relative;
	/*Moves the text element 5 pixels to the right of its normal position*/
	left: 5px;
	/*Moves the text element 10 pixels up from its normal position*/
	top: -10px;
	/*Sets the width of the text element to 230 pixels*/
	width: 230px;
	/*Sets the height of the text element to 30 pixels*/
	height: 30px;
	/*Sets the font weight to normal*/
	font-weight: normal;
	/*Sets the font size to 80% of the default size*/
	font-size: 80%;
  }
  /*Id for small message box*/
  #message {
	/*Sets the background color to a light gray*/
	background-color: rgba(204,204,204,1);
	/*Sets the text color to dark gray*/
	color: rgba(51,51,51,1);
	/*Aligns the text to the left*/
	text-align: left;
	/*Adds padding to the top, bottom, and left sides*/
	padding: 0.5em 0.5em 0.5em 0.1em;
	/*Sets the margin to 0 on all sides*/
	margin: 0;
	/*Applies a 1 pixel, dotted, red border*/
	border: 1px dotted rgba(204,0,0,1);
	/*Sets the position to relative and applies a left position of 5 pixels and a top position of 40 pixels*/
	position: relative;
	left: 5px;
	top: 40px;
	/*Sets the width and height of the message area*/
	width: 230px;
	height: 160px;
	/*Sets the font weight to normal and the font size to 100%*/
	font-weight: normal;
	font-size: 100%;
	/*Applies a box shadow with a 3 pixel x and y offset, a 5 pixel blur, and the color black using the rgba color value with a 75% opacity*/
	box-shadow: 3px 3px 5px rgba(0,0,0,0.75);
  }
   
/* coke poster */
/*Id for coke poster*/
#poster {
	/*Sets the width of the poster*/
	width: 281px;
	/*Sets the height of the poster*/
	height: 350px;
	/*Sets the left margin of the poster*/
	margin-left: 550px;
	/*Sets the top margin of the poste*/
	margin-top: -400px;
  }
  

/* footer styles */
/*Id for coke poster*/
#footer {
	/*Sets the text color to a light gray*/
	color: rgba(153, 153, 153, 1);
	/*Aligns the text to the center*/
	text-align: center;
	/*Sets the font size to 9 pixels*/
	font-size: 9px;
	/*Adds a top padding of 50 pixels*/
	padding-top: 50px;
	/*Applies a word spacing of 0.15em*/
	word-spacing: 0.15em;
  }
  

/* image map styles */

#bottle {
	width: 195px;
	height: 500px;
	padding: 0;
	margin: 0;
	list-style: none;
	background: url(images/cokebottle.png);
	background-repeat: no-repeat;
	position: absolute;
	left: -250px;
	top: -200px;
	z-index: 10;
}
#bottle li {
	display: inline;
	float: left;
	width: 50px;
	height: 100px;
	background: transparent url(images/transparent.gif);
}
#bottle li.ff1 {
	margin-left: 57px;
	margin-top: 5px;
	width: 75px;
	height: 50px;
}
#bottle li.ff2 {
	margin-left: 45px;
	margin-top: 75px;
	width: 105px;
	height: 50px;
}
#bottle li.ff3 {
	margin-left: 65px;
	margin-top: 145px;
	width: 60px;
	height: 50px;
}
#bottle li.ff4 {
	margin-left: 30px;
	margin-top: -165px;
	width: 130px;
	height: 50px;
}
#bottle li.ff5 {
	margin-left: 50px;
	margin-top: 40px;
	width: 85px;
	height: 50px;
}
/* this formats the gray box on the coke bottle */
#bottle li a {
	text-decoration: none;
	display: block;
	height: 100%;
	border: 2px dotted rgba(255,255,255,1); /* white */
	background: rgba(255,255,255,.25) url(images/fact.gif); /* background is white with a 25% opacity */
	background-position: center left;
	background-repeat: no-repeat;
}
#bottle li a span {
	display: none;
}
#bottle li a:active, #bottle li a:focus {
	visibility: visible;
	border: 0;
	cursor: default;
	width: 0;
	height: 0;
	outline: 0;
}
/* changes the text color of the fun facts message */

#bottle li a:active span, #bottle li a:focus span {
	display: block;
	position: absolute;
	top: 205px;
	left: 253px;
	z-index: 500;
	width: 225px;
	color: rgba(102,102,102,1); /* gray */
	font-size: 10px;
	line-height: 14px;
}
#bottle li a:active span b, #bottle li a:focus span b {
	font-size: 11px;
	color: rgba(204,0,0,1); /* red */
}
/* validation logos hyperlinks */
a.validation_logo:link {
	background-color: rgba(255,255,255,1); /* white */
	text-decoration: none;
}
a.validation_logo:visited {
	background-color: rgba(255,255,255,1); /* white */
	text-decoration: none;
}
a.validation_logo:hover {
	background-color: rgba(255,255,255,1); /* white */
	text-decoration: none;
}
a.validation_logo:active {
	background-color: rgba(255,255,255,1); /* white */
	text-decoration: none;
}
img.validation {
	opacity: 1;
	border: none;
}
#ie-message {
	font-size: 14px;
	color: red;
	font-weight: bold;
  }