@charset "utf-8";

body {
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	background-color: #F0F0F0;
	margin: 0px;
	margin-top: 105px;
	padding: 0px;
}



#menu {
	float: left;
	background-color: #FFF;
	width: 180px;
	/*border: 1px solid #333;*/
	border: none;
	padding: 0px;
	margin-left: 10px;
	/*margin-top: 115px;*/
	font-family: 'Georgia', 'Caslon', 'Garamond', 'Times New Roman', Times, serif;
	font-size: 11px;
	opacity: .85;
	filter: alpha(opacity=85);
}

#menu ul{
	list-style:none;
	margin: 0px;
	padding: 10px;
}

#menu li{
	line-height: 15px;
	font-weight:800;
}

#menu li a{
	display: block;
	color: #333;
	font-weight: 100;
	text-decoration: none;
	width: 100%;
}

#menu ul#pink{
	color:#FF0080;
}

#menu ul#pink li a:hover{
	background-color: #FF0080;
	text-decoration: none;
}

#menu ul#blue{
	color: #0099FF;
}

#menu ul#blue li a:hover{
	background-color: #0099FF;
	text-decoration: none;
}
	
	
#menu ul#purple{
	color: #af3594;
}

#menu ul#purple li a:hover{
	background-color: #af3594;
	text-decoration: none;
}

#menu ul#details li, #menu ul#details li a{
	display: inline-block;
	color: #333;
	font-size: 10px;
	font-weight: 200;
}

#menu ul#details li a:hover{
	text-decoration:underline;
}


#toplinks ul{
 	list-style:none;
	margin: 0px;
	margin-left: 7px;
	padding: 3px;
}

#toplinks li{
	display: inline;
	font-family: 'Georgia', 'Caslon', 'Garamond', 'Times New Roman', Times, serif;
	color: #333;
	font-size: 11px;
}

#toplinks li a, #toplinks li a:visited, #toplinks li a:active{
	background-color:#FFF;
	text-decoration: none;
	color: #333;
	border: 2px solid #FFF;
	opacity: .85;
	filter: alpha(opacity=85);

}

#toplinks li a:hover{
	text-decoration: none;
	color: #333;
	border: 2px solid #FF0080;
}
/*end menu css*/


#maincontent {
	width: 620px;
	/*border: 1px solid pink;*/
	font-family: 'Georgia', 'Caslon', 'Garamond', 'Times New Roman', Times, serif;
	font-size: 11px;
	color: #333;
	margin-left: 210px;
}

h3 {
	background-color: #FFF;
	color: #333;
	font-size: 14px;
	width: 230px;
	padding: 3px;
	margin-top: 0px;
	margin-bottom: 3px;
}

#pinkHeader, #purpleHeader, #blueHeader {
	font-size: 10px;
	background-color: #FFF;
	width: 160px;
	padding: 3px;
	margin-bottom: 3px;
	
}

#pinkHeader		{ color: #FF0080; }
#purpleHeader	{ color: #af3594; }
#blueHeader		{ color: #0099FF; }

#maincontent #navButtons {
	float: right;
	/*margin-right: 300px;*/

}

#maincontent #navButtons a img, #maincontent #navButtons a:active img, #maincontent #navButtons a:visited img{
	margin: 0px;
	padding: 0px;
	border: 2px solid #FFF;
}

#maincontent #navButtons a:hover img{ border: 2px solid #FF0080; }
#maincontent #navButtons a:hover img.purple{ border: 2px solid #af3594; }
#maincontent #navButtons a:hover img.blue{ border: 2px solid #0099FF; }

#maincontent #worksample {
	width: 100%;
	background-color: #FFF;
	margin-bottom: 3px;
	font-size: 10px;
	color: #333;
}

#maincontent #worksample p {
	width: 610px;
	border: 1px solid #CCC;
	margin: auto;
	line-height: 0px;
}

#maincontent #worksample #viewsite a, #maincontent #worksample #viewsite a:active, #maincontent #worksample #viewsite a:visited {
	margin-left: 5px;
	padding: 3px;
	text-decoration: none;
	color: #333;
	border: 2px solid white;
}

#maincontent #worksample #viewsite a.pink:hover { border: 2px solid #FF0080; }
#maincontent #worksample #viewsite a.purple:hover { border: 2px solid #af3594; }
#maincontent #worksample #viewsite a.blue:hover { border: 2px solid #0099FF; }

#description {
	background-color: #FFF;
	padding: 5px;
}