@charset "UTF-8";
/* 
Filename: site.css
Author:Jade Holt 
Description: Applying Everything from Ch1-14 and additional research 
to create a website about Vincent Van Gogh.
*/

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

/* body and layout styles */
body{
	font-size: 11px;
	background-color: rgba(255, 255, 255, 1);/*white*/
	color: rgba(51, 51, 51, 1);/*dark gray*/
}

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

/* header */
#header{
background-color: rgba(255, 255, 255, 1);/*white*/
border-bottom: 1px solid rgba(0, 0, 0, .75);
background-image: url(images/vangoghbanner.jpg);
background-repeat: no-repeat;
background-position: center;
height: 100px;
}
 
/* side bar */
#sidenav {
	width: 220px;
	float: left;
	margin-left: -1px;
	padding: 5px;
}
#sidebar h3{
	background-color: rgba(204, 204, 204, 1);/*light gray*/
	padding: 5px;
	margin-right: 5px;
	
}
/* side bar navigation */
.navigation{
	float: left;
	display: block;
	overflow: hidden;
	width: 220px;
	}
/* css sprites */
.woa .menu{
	display: block;
	position: relative;
	height: auto;
	width: 220px;
	background-color: rgba(0, 0, 0, 1);/*black for the background*/
	cursor: pointer;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	color: rgba(255, 255, 255, 1);/*white*/
	}
.woa .menu li{
	font-weight: bold;
	padding: 5px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.woa ul{
	list-style: none;
	margin: 0px;
	}
.drop{
	display: block;
	background-color: rgba(175, 175, 175, 1);/*light gray*/
	position: relative;
	width: auto;
}
.menu .drop li{
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	border-top: 1px solid rgba(204, 204, 204, 1);/*light gray for the broder*/
	background: transparent url(images/nav_pointer.png) no-repeat right 0;
	}

/* navigation link styles */
.menu a{
	display: block;
	text-decoration: none;
	padding: 10px;
	height: 100%;
	width: 100%;
	}
	
.menu a:link{
	color: rgba(0, 0, 0, 1);/*black*/
	}
.menu a:visited{
	color: rgba(0, 0, 0, 1);/*black*/
}
.menu a:hover{
	color:rgba(255,255,255,1);/*white*/
}
.menu a:active{
	color:rgba(0,102,153,1);/*dark blue*/
}
.menu .drop li:hover{
	background-color: rgba(102, 102, 102, 1);/*dark gray*/
	background-position: right -100px;
}
.menu .dropli:active{
	background-color: rgba(204, 204, 204, 1);/*light gray*/
	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 */
}
#content h2{
	color: rgba(51, 102, 153, 1);/*blue*/
	margin-top: 0px;
}
/*this changes to another selfportrait*/
.selfportrait{
	display: block;
	width: 160px;
	height: 144px;
	background-image: url(images/selfportraits.jpg);
	background-position: bottom;
	text-indent: -99999px;
	cursor: help;
	float: left;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	}
.selfportrait:hover{
	background-position: 0 0;
	float: left;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	cursor: help;
}
#content blockquote{
	display: inline-block;
	color: rgba(0, 0, 0, 1);/*black*/
	font-style: italic;
	line-height: 1.5em;
	padding: 5px;
}
#content blockquote::first-letter{
	font-size: x-large;
	color: rgba(51, 102, 153, 1);/*blue*/
}


/* table with portraits */
table{
	caption-side: top;
	display: inline-table;
	background-color: rgba(204, 204, 204, 1);/*gray*/
	border: 1px solid rgba(0, 0, 0, 1);/*black*/
	border-collapse: collapse;
	color: rgba(0, 0, 0, .75);/*black with 75% opacity*/
	box-shadow: 2px 2px 4px rgba(51, 51, 51, 1);	
	}
td{
	text-align: left;
	padding: 10px;
}
.captiontext{
	color: rgba(51, 102, 153, 1);/*blue*/
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 7px;
	padding-left: 3px;
	font-size: 12px;
	font-weight: bold;	
	}
img{
	border: 1px solid rgba(0, 0, 0, 1);/*black*/
	float: left;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	opacity: 0.6;
	}
img:hover{
	opacity: 1;
}
	
/* footer area */	
#footer{
	color: rgba(0, 0, 0, 1);/*black*/
	border-top: 1px solid rgba(0, 0, 0, .75);
	font-size: 9px;
	font-style: italic;
	clear: both;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 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 */
a{
	text-decoration: none;
}
a:link{
	color: rgba(0, 0, 0, 1);/*black*/
	text-decoration: underline;
}

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

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

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