@charset "UTF-8";
/* 
Filename: site.css
Author: Greg Buchmann
Description: Project 4 Vincent Van Gogh - The Man
*/

/* 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 text decoration to none.
h. Set the font family to Arial, Helvetica, sans-serif.
i. Set the list style to none.
*/

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




/* body and layout styles */

/*
 create the following body
HTML selector with the specified CSS properties and values:
a. Set the font size to 11 pixels.
b. Apply a background color of white using the rgba color value for white
with. Be sure to make the white color completely opaque.
c. Apply a text color of rgba(51,51,51,1), which is dark gray.
*/


body {
font-size: 11px;
background-color: rgba( 100%, 100%, 100%, 1 );
color: rgba( 51, 51, 51, 1 );
}


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

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




/* header */

/*
create an ID for the page header and name it header
(remember when using an id the title of the id should be preceded by a #) and
add the specified properties and values:
a. Set the background color to white using the rgba color value for white. Be
sure that it is completely opaque.
b. Apply a border to the bottom that is 1 pixel, solid, and black using the
rgba color value black with a 75% opacity.
c. Apply a background image (vangoghbanner.jpg)
Note: All image files are located inside the images directory. Adjust
your file path accordingly.
d. Do not repeat the background image and position it in the center.
e. Set the height to 100 pixels. 
*/

#header {
background-color: rgba( 100%, 100%, 100%, 1 );
border-bottom: 1px solid rgba( 0%, 0%, 0%, 0.75 );
background: url(images/vangoghbanner.jpg) no-repeat;
background-position: center;
height: 100px;
}

 
/* side bar */
#sidenav {
	width: 220px;
	float: left;
	margin-left: -1px;
	padding: 5px;
}

/*
Create a heading 3 selector descendent of the sidebar ID with the following
properties and values:
a. Set the background color to rgba(204,204,204,1). This is a light gray color.
b. Apply a padding of 5 pixels on all sides.
c. Set the right margin to 5 pixels.
*/

#sidenav h3 {
background-color: rgba( 204, 204, 204, 1 );
padding: 5px 5px 5px 5px;
margin-right: 5px;
}

/* side bar navigation */

/*
 class named navigation and add the specified
properties and values:
a. Float left.
b. Set the display to block.
c. Set the overflow to hidden.
d. Set the width to 220 pixels.
*/

.navigation {
float: left;
display: block;
overflow: hidden;
width: 220px;
}


/* css sprites */

/*
Within the style rule you just created, add the specified declarations:
a. Set the display to block.
b. Apply relative positioning.
c. Set the height to auto and width to 220 pixels.
d. Set the background color to black using the rgba color value for black that
is completely opaque.
e. Set the cursor style to pointer.
f. Add padding on the top of 5 pixels and set the other sides to zero.
g. Set the text color white using the rgba color value for white that is
completely opaque.
*/

.woa .menu {
display: block;
position: relative;
height: auto;
width: 220px;
background-color: rgba( 0%, 0%, 0%, 1 );
cursor: crosshair;
padding: 5px 0px 0px 0px;
color: rgba( 100%, 100%, 100%, 1 );
}

/*
Style the list item for the woa and menu classes using the specified
declarations:
a. Bold the font.
b. Add a padding of 5 pixels on all four sides.
*/

.woa .menu li {
font-weight: bold;
padding: 5px 5px 5px 5px;
}

/*
Style the unordered list for the woa class using the specified declarations:
a. Set the list style to none.
b. Set all the margins to zero.
*/

.woa ul {
list-style: none;
margin: 0;
}

/*
Create a class named drop with the specified declarations:
a. Set the display to block.
b. Set the background color to light gray using rgba(175,175,175,1).
c. Apply relative positioning.
d. Set the width to auto.
*/

.drop {
display: block;
background-color: rgba( 175, 175, 175, 1 );
position: relative;
width: auto;
}

/*
Style the list item for the menu and drop classes using the specified
declarations:
a. Set the font weight to normal.
b. Add a margin of zero on all sides.
c. Add a padding of zero on all sides.
d. Add a top border that is 1 pixel, solid, and uses a light gray color of
rgba(204,204,204,1).
e. Using the background shorthand property (Page 212), set the
background to transparent, set the image to use nav_pointer.png, do not
repeat the image, and position it to the right with a 0 margin.
*/

.menu .drop li {
font-weight: normal;
margin: 0;
padding: 0;
border-top: 1px solid rgba( 204, 204, 204, 1 );
background: transparent url(images/nav_pointer.png) no-repeat right 0;
}



/* navigation link styles */


/*
Add the following declarations to the style rule you just created above:
a. Set the display to block.
b. Set the text decoration to none.
c. Add 10 pixels of padding to all sides.
d. Set the width and height to 100%; 
*/


.menu a {
display: block;
text-decoration: none;
padding: 10px 10px 10px 10px;
width: 100%;
height: 100%;
}


/*
Create a style rule for the menu a:link and menu a:visited pseudo-classes that
sets the text color to black using the rgba color value for black and be sure that it
is completely opaque.
*/

.menu a:link {
color: rgba( 0%, 0%, 0%, 1 );
}

.menu a:visited {
color: rgba( 0%, 0%, 0%, 1 );
}


/*
Create a style rule that sets the a:hover pseudo-class of the menu class to use
a white text color using the rgba(255,255,255,1) color value.
*/


.menu a:hover {
color: rgba( 255,255,255,1 );
}


/*
6. Create a style rule that sets the a:active pseudo-class of the menu class to use
a dark blue text color using the rgba(0,102,153,1) color value.
*/

.menu a:active {
color: rgba(0,102,153,1);
}


/*
Create a style rule that sets the list item hover pseudo-class of the menu and
drop classes to the following:
a. A dark gray background color using the rgba(102,102,102,1) color value.
b. A background position right at -100 pixels.
*/

.menu .drop li:hover {
background-color: rgba(102,102,102,1);
background-position: right -100px;
}


/*
Create a style rule that sets the list item active pseudo-class of the menu and
drop classes to the following:
a. A light gray background color using the rgba(204,204,204,1) color value.
b. A background position right at -200 pixels
*/

.menu .drop li:active {
background-color: rgba(204,204,204,1);
background-position: right -200px;
}



/* content area */	

#content {
	padding: 10px;
	margin-left: 230px;
	border-left: 1px solid rgba(0,0,0,.75); /* black with 75% opacity */
}


/*
Define the heading 2 HTML selector for the content ID with the with the
following declarations:
HINT: #content h2
a. Set the text color to a shade of blue using the rgba(51,102,153,1) color
value.
b. Set the top margin to 0 pixels.
*/

#content h2 {
color: rgba(51,102,153,1);
margin-top: 0px;
}


/*
1. Create a class named selfportraits.
2. Add the following declarations to the style rule for the selfportraits class:
a. Set the display to block.
b. Set the width to 160 pixels and the height to 144 pixels.
c. Using the background shorthand property, add selfportraits.jpg as the
background image and position it at the bottom.
d. Set the text indent to -99999 pixels.
e. Set the cursor style to help.
f. Float left.
g. Add a margin of 0 top and 5 pixels on the all other sides.
*/


.selfportraits {
display: block;
width: 160px;
height: 144px;
background: url(images/selfportraits.jpg) bottom;
text-indent: -99999px;
cursor: help;
float: left;
margin: 0px 5px 5px 5px;
}


/*
3. Add the hover pseudo-class to the selfportraits class with the following
declarations:
a. Set the background position to 0 0.
b. Float left.
c. Add a margin of 0 top and 5 pixels on the all other sides.
d. Set the cursor style to help.
*/

.selfportraits:hover {
background-position: 0 0;
float: left;
margin: 0px 5px 5px 5px;
cursor: help;
}


/*
Define the blockquote selector of the content ID with the following declarations:
a. Set the display to inline-block.
b. Set the text color to black using the rgba color for black. Be sure the color
is completely opaque.
c. Italicize the font.
d. Adjust the line height to 1.5em.
e. Add a padding of 5 pixels on all four sides.
*/


#content blockquote {
display: inline-block;
color: rgba( 0%, 0%, 0%, 1 );
font-style: italic;
line-height: 1.5em;
padding: 5px 5px 5px 5px;
}



/*
2. Define the blockquote selector of the content ID using the first letter pseudoelement with the following declarations (Pages 96-99):
a. Set the relative font size to x-large.
b. Set the font color to a shade of blue using the rgba(51,102,153,1) color
value .
*/

#content blockquote:first-letter {
font-size: x-large;
color: rgba(51,102,153,1);
}



/* table with portraits */

/*
Create an HTML table selector with the following declarations:
a. Display the caption on the top.
b. Set the display to inline-table.
c. Set the background color to a shade of gray using the
rgba(204,204,204,1) color value.
d. Apply a 1 pixel solid black border using the rgba color value for black. Be
sure the color is completely opaque.
e. Collapse the borders.
f. Set the font color to black using the rbga color value for black with a 75%
opacity.
g. Add a box shadow with a 2 pixel x and y offset, a 4 pixel blur and a color
of rgba(51,51,51,1).
i. Just use the CSS3 box shadow property, do not include the
vendor prefixes. Your Web page will not validate.
*/


table {
caption-side: top;
display: inline-table;
background-color: rgba(204,204,204,1);
border: 1px solid rgba( 0%, 0%, 0%, 1 );
border-collapse: collapse;
color: rgba( 0%, 0%, 0%, 0.75 );
box-shadow: 2px 2px 4px rgba(51,51,51,1);
}


/*
3. Create an HTML table cell (td) selector with the following declarations:
a. Align the text to the left.
b. Add a padding of 10 pixels on all four sides.
*/

td {
text-align: left;
padding: 10px 10px 10px 10px;
}


/*
4. Create a class named captiontext with the following declarations:
a. Set the font color to a shade of blue using the rgba(51,102,153,1) color
value.
b. Apply a top padding of 3 pixels, a right padding of 3 pixels, a bottom
padding of 7 pixels and a left padding of 3 pixels.
c. Set the font size to 12 pixels.
d. Bold the font.
*/

.captiontext {
color: rgba(51,102,153,1);
padding: 3px 3px 7px 3px;
font-size: 12px;
font-weight: bold;
}


/*
Create an HTML image selector with the following declarations:
a. Apply a 1 pixel solid black border using the rgba color value for black. Be
sure the color is completely opaque.
b. Set the float property to left.
c. Set the top margin to 0 and the remaining sides to 5 pixels.
d. Set the opacity to 60%. Page 298-299)
i. Do not include the filter property or vendor prefixes.
2. Add the hover pseudo-class to the image selector with the following
declarations:
a. Set the opacity to be completely opaque.
i. Do not include the filter property or vendor prefixes.
*/

img {
border: 1px solid rgba( 0%, 0%, 0%, 1 );
float: left;
margin: 0px 5px 5px 5px;
opacity: 0.6;
}

img:hover {
opacity: 1.0;
}


/* footer area */

/*
Create an ID for the footer section named footer with the following declarations:
a. Set the text color to black using the rgba color value for black. Be sure the
black color is completely opaque.
b. Create a 1 pixel solid top border with a color black using the rgba color
value for black with a 75% opacity.
c. Set the font size to 9 pixels.
d. Italicize the font.
e. Set the clear property to both.
f. Apply a top padding of 2 pixels, a right padding of 10 pixels, and set both
the bottom and left padding to 0.
*/

#footer {
color: rgba( 0%, 0%, 0%, 1 );
border-top: 1px solid rgba( 0%, 0%, 0%, 0.75 );
font-size: 9px;
font-style: italic;
clear: both;
padding: 2px 10px 0px 0px;
}

	

/* spacer */
.spacer {
	clear: both;
}
/* validation logos hyperlinks */
a.validation_logo:link {
	background-color: #fff;
	text-decoration: none;
}
a.validation_logo:visited {
	background-color: #fff;
	text-decoration: none;
}
a.validation_logo:hover {
	background-color: #fff;
	text-decoration: none;
}
a.validation_logo:active {
	background-color: #fff;
	text-decoration: none;
}
img.validation {
	opacity: 1;
	border: none;
}




/* default link styles */


/*
2. Create an anchor HTML selector with the following declaration:
a. Set the text decoration to none.
3. Create the link pseudo-class for the anchor tag with the following declarations:
a. Set the text color to black using the rgba color value for black. Be sure the
color black is completely opaque.
b. Underline the text.
4. Create the visited pseudo-class for the anchor tag with the following
declarations:
a. Set the text color to burgundy using the rgba(204,0,0,1) color value.
b. Underline the text.
5. Create the hover pseudo-class for the anchor tag with the following declarations:
a. Set the text color to burgundy using the rgba(204,0,0,1) color value.
b. Set the text decoration to none.
Create the active pseudo-class for the anchor tag with the following declarations:
a. Set the text color to black using the rgba color value for black. Be sure the
color black is completely opaque.
b. Underline the text.
*/


a {
text-decoration: none;
}

a:link {
color: rgba( 0%, 0%, 0%, 1 );
text-decoration: underline;
}

a:visited {
color: rgba( 204, 0, 0, 1 );
text-decoration: underline;
}

a:hover {
color: rgba( 204, 0, 0, 1 );
text-decoration: none;
}

a:active {
color: rgba( 0%, 0%, 0%, 1 );
text-decoration: underline;
}