@charset "utf-8";
@import url("font_style.css");
/* CSS Document */
/*LAYOUT STYLES for Widescreen Desktop Viewports */
#wrapper {
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: auto;
	font-size: 100%;
}

#topgradient {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 24%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(24%,rgba(0,0,0,0.2)), color-stop(60%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 24%,rgba(0,0,0,0.05) 60%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 24%,rgba(0,0,0,0.05) 60%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 24%,rgba(0,0,0,0.05) 60%,rgba(0,0,0,0) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 24%,rgba(0,0,0,0.05) 60%,rgba(0,0,0,0) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */


	height: 35px;
	width: 100%;
}


#content {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

	
header {
	width: 900px;
	height:50px;
	margin: 0 auto; 
}
	
#logo {
	width:295px;
	height:50px;
	margin: 0 auto; 
	position: relative;
	float:left;
}

#logo #site_title a { /*This works better if you have an inline element (like h1 id="site_title") working to hold the anchor (the link). So, I added h1 id="site title" to your html, then included it here as well. */
	display:block;
	width:295px;
	height:50px;
	background-image:url(../_images/logo_header01.png); /*you moved files around inside your site without updating your CSS. The reason the image couldn't show is because the CSS file was moved to the _css folder, while the image remained referenced from the root folder. So, the initial reference "url(_images/logo_header.png)" tells the browser to proceed frokm the current folder (in this case, _css, since the CSS file is in the _css folder) to the the _images folder. But the _images folder is NOT in the _css folder. So, you first have to leave the _css folder, then and only then can you find the _images folder. To return to the root folder, you do this: "../" That means, start looking from the root folder. So, in this case, we designate the path as "../_images/(etc)", which means "Go up to the root folder, then find the _images folder." Because your CSS file was in the root folder before, you wouldn't have had to do this. But because your CSS files was moved into a sub-folder, you have to update your path designations. */
	background-position:0 0;
	text-indent:-9999px;
}

#logo #site_title a:hover {
	display:block;
	width:295px;
	height:50px;
	background-image:url(../_images/logo_header01.png);
	background-position:0 -50px;
	
}

#topnav {
	background-color: #fffff;
	height: 50px;
	width: 605px;
    margin: 0px auto;
	text-align: right;
	float:right;

}

#sp50T {
	background-color: #ffffff;
	height: 50px;
	width: 100%;
	clear: both;
}




#aboutAl{
	background-color: #ffffff;
	height: 401px;
	width: 601px;
	margin: 0px auto;
	border: none;
}


#sp60B {
	background-color: #ffffff;
	height: 60px;
	width: 100%;
	clear: both;
}


#footer {
	background-color: #ffffff;
	margin-right: auto;
	margin-left: auto;
	height: 100px;
	width: 900px;
	font-size:0.8em;
	color:#808080;
	
}


#footer_name {
	float: left;
	text-align: center;
	width: 200px;
	padding:50px 0 0 0;
	color:#808080;
}

#footer_thanks {
	float:left;
	text-align: center;
	width: 400px;
	padding:50px 0 0 0;
	color:#808080;
}
	


#socialnav{
	float:left;
	background-color: #ffffff;
	font-size:1em;
	color:#808080;
	width:250px;
	padding:40px 30px 0 0;
	margin-right: auto;
	margin-left: auto;
	
}


#copyright{
	clear: both;
	background-color: #ffffff;
	font-size:0.8em;
	color:#808080;
	width: 100%;
	margin: 0px auto;
    text-align: center;
	height:50px;
	padding:55px 0 0 0;
}
#bottomgradient{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.2) 76%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(40%,rgba(0,0,0,0.05)), color-stop(76%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 40%,rgba(0,0,0,0.2) 76%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 40%,rgba(0,0,0,0.2) 76%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 40%,rgba(0,0,0,0.2) 76%,rgba(0,0,0,0.5) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 40%,rgba(0,0,0,0.2) 76%,rgba(0,0,0,0.5) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */


	clear: both;
	height: 35px;
	width: 100%;
}


/* START Basic menu styles */

#active h4 {
	text-decoration:none;
	color:#0071BC;
}

ul#top_navigation {

}

		
ul#top_navigation li a {   
	font-size:1.25em;
	text-decoration:none;
	color:#808080;
	font-weight:normal;
	display:block;
	float: left;
	height:25px;
	position: relative;
	padding:21px 0 0 50px;
}

ul#top_navigation li a:hover {
	color:#000000;
	
}

body#index ul#top_navigation_index li a{
	color:#0071BC;	
}

body#about ul#top_navigation_about li a{
	color:#0071BC;	
}


body#digital ul#top_navigation_digital li a{
	color:#0071BC;	
}


body#art ul#top_navigation_art li a{
	color:#0071BC;	
}

body#print ul#top_navigation_print li a{
	color:#0071BC;	
}


/*Begin Social Navigation styles */


#social_nav_btm li a {
	display: block;
	float:left;
	height:35px;
	text-indent:-9999px;
}

/****Begin the image sprites for the social navigation */

li#email_btm a {
	width: 40px;
	float:left;
	background-image:url(../_images/med_email.png);
	background-position: 0 0;
}

li#email_btm a:hover {
	width: 40px;
	background-image:url(../_images/med_email.png);
	background-position: 0 -35px;
}
 
li#vimeo_btm a {
	width: 40px;
	float:left;
	background-image:url(../_images/med_vimeo.png);
	background-position: 0 0;
}

li#vimeo_btm a:hover {
	width: 40px;
	background-image:url(../_images/med_vimeo.png);
	background-position: 0 -35px;
}

li#yessy_btm a {
	width: 40px;
	float:left;
	background-image:url(../_images/med_yessy.png);
	background-position: 0 0;
}

li#yessy_btm a:hover {
	width: 40px;
	background-image:url(../_images/med_yessy.png);
	background-position: 0 -35px;
}

li#linkedin_btm a {
	width: 40px;
	float:left;
	background-image:url(../_images/med_linkedin.png);
	background-position: 0 0;
}

li#linkedin_btm a:hover {
	width: 40px;
	background-image:url(../_images/med_linkedin.png);
	background-position: 0 -35px;
}


li#facebook_btm a {
	width: 40px;
	float:left;
	background-image:url(../_images/med_facebook.png);
	background-position: 0 0;
}

li#facebook_btm a:hover {
	width: 40px;
	background-image:url(../_images/med_facebook.png);
	background-position: 0 -35px;
}


/****This ends the top social nav section ****/


/* End Basic Nav Menu Style */