/* 
Filename: sitewide.css
Author: Greg Buchmann
Description: ITWP 1050 CSS - Coke - The Real Thing!
Note: This document validates as CSS level 3 ! 
*/

/* CSS simple reset minified */	

/*
create a universal style rule with the
specified properties and values. Be sure to exclude spaces and line breaks.
Please refer to Page 360, Code 14.3 to see how the CSS is compressed.
a. Set the margin to zero.
b. Set the padding to zero.
c. Set the border to zero.
d. Set the outline to zero.
e. Set the line height to 1.5em.
f. Set the vertical alignment to baseline.
g. Set the font family to Arial, Helvetica, sans-serif.
h. Set the list style to none.
*/

*{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 */

/*
body HTML selector with the following CSS declarations:
a. Set the font size to 90%.
b. Apply a background color of black using the rgba color value for black. Be
sure to make the black color completely opaque.
c. Apply a margin of zero on all sides.
d. Apply a padding of zero on all sides.
*/

body {
font-size: 90%;
background-color: rgba( 0%, 0%, 0%, 1 );
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}


/*
6. Create a class selector named wrap with the specified declarations:
a. Set the margin to auto.
b. Set the width to 770 pixels.
c. Align the text to the center.
*/

.wrap {
margin: auto;
width: 770px;
text-align: center;
}


/*
7. Create a paragraph HTML selector with the specified CSS properties and
values:
a. Set the top and bottom margins to 5 pixels.
*/

p {
margin-top: 5px;
margin-bottom: 5px;
}



/* IE conditional comments */

/*
 create an ID for the conditional statement named
conditional with the following declarations:
a. Set the text color to white using the rgba color value for white. Be sure to
make the white color completely opaque.
b. Bold the font.
c. Set the font size to 10 pixels.
a. Align the text to the center.
b. Set the background to red using the rgba(204,0,0,1) color value.
c. Add a top padding of 5 pixels, right padding of 0, bottom of 5 pixels and
left padding of 0 pixels.
d. Set the bottom margin to 0 pixels.
*/

#conditional {
color: rgba( 100%, 100%, 100%, 1 );
font-weight: bold;
font-size: 10px;
text-align: center;
background-color: rgba( 204, 0, 0, 1 );
padding: 5px 0px 5px 0px;
margin-bottom: 0px;
}


/* header styles */

/*
create an ID named redbar with the following
declarations:
a. Set the background to red using the rgba(204,0,0,1) color value.
b. Set the margin to 0 pixels on all sides.
c. Set the padding to 0 pixels on all sides.
d. Set the height to 150 pixels.
e. Add a background image (logo_bkgd.gif).
i. Note that all images are located within a folder titled images.
f. Repeat the background image horizontally only and set the attachment to
fixed.
*/

#redbar {
background: rgba( 204, 0, 0, 1) url(images/logo_bkgd.gif);
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 150px;
background-repeat: repeat-x;
background-attachment: fixed;
}


/* I styled the h6 header I added to the section tag to have ZERO height */
h6 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 0px;
height: 0px;
}


/* fun facts styles */

/*
 create an ID named funfacts with the following
declarations:
a. Add a padding of .5em on all sides.
b. Set the margin to 0 pixels on all sides.
c. Apply a border that is 1 pixel, solid and a light gray color using the
rgba(204,204,204,1) color value.
d. Set the background color to white using the rgba color value for white. Be
sure it is completely opaque.
e. Set the position to relative and apply a left position of 250 pixels and a top
position of -70 pixels.
f. Set the width to 250 pixels.
g. Add a box shadow with a 3 pixel x and y offset, a 5 pixel blur, and a black
color with 75% opacity.
i. Only include the CSS3 box shadow property, do NOT include all
the vendor prefixes.
h. Add a border radius of 5 pixels.
i. Only include the CSS3 box shadow property, do NOT include all
the vendor prefixes.
*/

#funfacts {
padding: .5em .5em .5em .5em;
margin: 0px 0px 0px 0px;
border: 1px solid rgba( 204, 204, 204, 1 );
background-color: rgba( 100%, 100%, 100%, 1 );
position: relative;
left: 250px;
top: -70px;
width: 250px;
box-shadow: 3px 3px 5px rgba( 0%, 0%, 0%, 0.75 );
border-radius: 5px;
}


/*
id name it facts with the following
declarations:
a. Add a padding of .5em on all sides.
b. Set the margin to 0 pixels on all sides.
c. Apply a border that is 1 pixel, solid and uses the rgba(204,204,204,1)
color value.
d. Set the background color to white using the rgba color value for white. Be
sure it is completely opaque.
e. Set the position to relative and apply a left position of 250 pixels and a top
position of -60 pixels.
f. Set the width to 250 pixels and the height to 350 pixels.
g. Add a border radius of 5 pixels.
i. Only include the CSS3 box shadow property, do NOT include all
the vendor prefixes.
*/

#facts {
padding: .5em .5em .5em .5em;
margin: 0px 0px 0px 0px;
border: 1px solid rgba( 204, 204, 204, 1 );
background-color: rgba( 100%, 100%, 100%, 1 );
position: relative;
left: 250px;
top: -60px;
width: 250px;
height: 350px;
border-radius: 5px;
}


/*
id title it factstext with the following
declarations:
a. Set the text color to dark gray using the rgba(51,51,51,1) value.
b. Align the text to the left.
c. Apply a padding of .5em on all four sides.
d. Set the margin to 2 pixels on top, 0 on the right and left, and 8 pixels on
the bottom.
e. Set the position to relative and apply a left position of 5 pixels and a top
position of -10 pixels.
f. Set the width to 230 pixels and the height to 30 pixels.
g. Apply a normal font weight.
h. Set the font size to 80%.
*/

#factstext {
color: rgba( 51, 51, 51, 1 );
text-align: left;
padding: .5em .5em .5em .5em;
margin: 2px 0px 8px 0px;
position: relative;
left: 5px;
top: -10px;
width: 230px;
height: 30px;
font-weight: normal;
font-size: 80%;
}


/*
id name it message with the following
declarations:
a. Set the background color to a light gray using the rgba(204,204,204,1)
color value.
b. Set the text color to dark gray using the rgba(51,51,51,1) value.
c. Align the text to the left.
d. Apply a padding of .5em on the top, bottom, and left sides and a padding
of .1em on the right side.
e. Set the margin to 0 on all sides.
f. Apply a 1 pixel, dotted, red border using the rgba(204,0,0,1) color value.
g. Set the position to relative and apply a left position of 5 pixels and a top
position of 40 pixels.
h. Set the width to 230 pixels and the height to 160 pixels.
i. Apply a normal font weight.
j. Set the font size to 100%.
k. Add 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.
i. Only include the CSS3 box shadow property, do NOT include all
the vendor prefixes.
*/

#message {
background-color: rgba( 204, 204, 204, 1 );
color: rgba( 51, 51, 51, 1 );
text-align: left;
padding: .5em .1em .5em .5em;
margin: 0px 0px 0px 0px;
border: 1px dotted rgba( 204, 0, 0, 1 );
position: relative;
left: 5px;
top: 40px;
width: 230px;
height: 160px;
font-weight: normal;
font-size: 100%;
box-shadow: 3px 3px 5px rgba( 0%, 0%, 0%, 0.75 );
}






/* coke poster */

/*
 create an ID named poster with the following
declarations:
a. Set the width to 281 pixels.
b. Set the height to 350 pixels.
c. Set the left margin to 550 pixels.
d. Set the top margin to -400 pixels.
*/

#poster {
width: 281px;
height: 350px;
margin-left: 550px;
margin-top: -400px;
}



/* footer styles */

/*
create an ID named footer with the following
declarations:
a. Set the text color to a light gray using the rgba(153,153,153,1) color
value.
b. Align the text to the center.
c. Set the font size to 9 pixels.
d. Add a top padding of 50 pixels
e. Apply a word spacing of 0.15em.
*/

#footer {
color: rgba( 153, 153, 153, 1 );
text-align: center;
font-size: 9px;
padding-top: 50px;
word-spacing: 0.15em;
}




/* image map styles */

/*
create an ID named bottle with the following declarations:
a. Set the width to 195 pixels.
b. Set the height to 500 pixels.
c. Set both the padding and margin to 0 pixels on all sides.
d. Set the list style to none.
e. Apply a background image (cokebottle.png)
      i. NOTE: All the images are located inside an images directory
         which must be reflected in the file path.
f. Do not repeat the background image.
g. Set the position to absolute and apply a left position of -250 pixels and a
top position of -200 pixels.
h. Set the z-index to 10. (Pages 292-293)
*/


#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;
}


/*
Style the list item for the bottle ID with the following declarations:
a. Set the display to inline.
b. Float the list to the left.
c. Set the width to 50 pixels.
d. Set the height to 100 pixels.
e. Set the background to transparent using the transparent.gif image.
*/



#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;
}








/*
Using a little bit of the code from Discussion Number 5 to "float center"
Double float left with relative positioning on both
But the offset of the position is +50% and -50% to offset to center.
These will be in DIV tags, 1 inside the other
*/



.main-container {
float: left;
position: relative;
left: 50%;
}

.fixer-container {
float: left;
position: relative;
left: -50%;
}