@charset "utf-8";
/* CSS Document */
/*LAYOUT STYLES for Widescreen Desktop Viewports */

/*html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}*/

#wrapper {
	width: 100%;
	height: 100%
	margin: 0 auto; 
	background-color: #FFFFFF;
	padding: 0;
	
}


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




#topnav {
	background-color: #fffff;
	height: 50px;
	width: 600px;
    margin: 0px auto;
    text-align: center;
	clear: both;
	
}	

#logo {
	clear: both;
	width:545px;
	height:275px;
	margin: 0 auto; 
	position: relative;
	
}

#map {
	position: absolute;
	border: solid 2px #FFFFFF;
	width: 39px;
	height: 21px;
	top: 222px;
	left: 400px;
	z-index: 50;
}



#map2 {
	position: absolute;
	border: solid 2px #FFFFFF;
	width: 39px;
	height: 21px;
	top: -153px;
	left: -207px;
	z-index: 50;
	background-image: url(_images/pop_me.png);
}



/* START Tool Tip */

.tooltip{
   			display: inline;
    		position: relative
			
		}
		
		.tooltip:hover:after{
    		background: #D9E021;
    		border-radius: 5px;
    		bottom: 14px;
    		color: #000000;
    		content: attr(title);
    		left: -140px;
    		padding: 5px 15px;
    		position: absolute;
    		z-index: 98;
    		width: 289px;
			font-size:1em;
			text-decoration:none;
			color:#808080;
		}
		
		/* add an arrow to the bottom of the tooltip */
		.tooltip:hover:before{
    		border: solid;
    		border-color: #D9E021 transparent;
    		border-width: 6px 6px 0 6px;
    		bottom: 8px;
    		content: "";
    		left: 15px;
    		position: absolute;
    		z-index: 99;
		}

/* END Tool Tip */


#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:545px;
	height:275px;
	margin: 0 auto; 
	background-image:url(../_images/logo_index.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:545px;
	height:275px;
	margin: 0 auto; 
	background-image:url(../_images/logo_index.png);
	background-position:0 -275px;
	
}



#footer {
	clear: both;
	background-color: #ffffff;
	font-size:80%;
	color:#808080;
	width:545px;
	margin: 0px auto;
    text-align: center;
	height:70px;
}

#footer_name {
	float: left;
	text-align: center;
	width: 50%;
}

#footer_thanks {
	float:left;
	text-align: center;
	width: 50%;
}
	

#copyright{
	clear: both;
	background-color: #ffffff;
	font-size:0.7em;
	color:#808080;
	width: 100%;
	margin: 0px auto;
    text-align: center;
	height:50px;
}

#socialnav{
	background-color: #ffffff;
	width:200px;
	height: 60px;
	margin: 0 auto; 
	padding-top: 40px;
	
}
	

#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 top_nav */


	
ul#top_navigation {

}

		
ul#top_navigation li a {   
	font-size:1em;
	text-decoration:none;
	color:#808080;
	display:block;
	height:25px;
	position: relative;
	float: left;
	margin: 0 auto; 
	padding:0 38px 0 38px;
}

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

	
}	

/* End Basic Nav Menu Style */


/*Begin Social Navigation styles */


#social_nav_btm li a {
	display: block;
	height:35px;
	text-indent:-9999px;
	margin: 0 auto; 
}

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



/******FIRST Responsive Breakpoint:tablet (horizontal) ----------- */
@media only screen and (max-width : 1024px) {
/*and (min-device-width : 768px) 
and (max-width : 1024px) {
/* Styles */

}





/******MOBILW DEVICE Responsive Breakpoint (horizontal) ----------- */

@media only screen and (max-width : 481px) {
/* Styles */


#topnav {
	background-color: #fffff;
	height: 20px;
	width: 350px;
    margin: 0px auto;
    text-align: center;
	clear: both;
	
}

/* START Basic menu styles top_nav  horizontal mobile*/


	
ul#top_navigation {

}

		
ul#top_navigation li a {   
	font-size:0.9em;
	text-decoration:none;
	color:#808080;
	font-weight:normal;
	display:block;
	height:20px;
	position: relative;
	/*float: left;*/
	margin: 0 auto; 
	padding:0 15px 0 15px;
}

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

	
}	

/* End Basic Nav Menu Style for horizontal mobile */




#logo {
	clear: both;
	width:269px;
	height:152px;
	margin: 0 auto; 
	position: relative;
	background-repeat:no-repeat;
}

#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:269px;
	height:152px;
	margin: 0 auto; 
	background-image:url(../_images/logo_index_sm.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:269px;
	height:152px;
	margin: 0 auto; 
	background-image:url(../_images/logo_index_sm.png);
	background-position:0 -152px;
	
}

#map {
	position: absolute;
	border: solid 2px #FFFFFF;
	width: 12px;
	height: 15px;
	top: 110px;
	left: 200px;
	z-index: 50;
}



#map2 {
	position: absolute;
	border: solid 2px #FFFFFF;
	width: 12px;
	height: 15px;
	top: 110px;
	left: 200px;
	z-index: 50;
	background-image: url(_images/pop_me.png);
}



/* START Tool Tip */

.tooltip{
   			display: inline;
    		position: relative
			
		}
		
		.tooltip:hover:after{
    		background: #D9E021;
    		border-radius: 5px;
    		bottom: 14px;
    		color: #000000;
    		content: attr(title);
    		left: -80px;
    		padding: 5px 15px;
    		position: absolute;
    		z-index: 98;
    		width: 140px;
			font-size:0.9em;
			text-decoration:none;
			color:#000000;
			text-align: center;
		}
		
		/* add an arrow to the bottom of the tooltip */
		.tooltip:hover:before{
    		border: solid;
    		border-color: #D9E021 transparent;
    		border-width: 6px 6px 0 6px;
    		bottom: 8px;
    		content: "";
    		left: 0;
    		position: absolute;
    		z-index: 99;
		}

/* END Tool Tip */



#socialnav{
	background-color: #ffffff;
	width:200px;
	height: 20px;
	margin: 0 auto; 
	padding:20px 0 0 0;
	
	
}


/*Begin Social Navigation styles */


#social_nav_btm li a {
	display: block;
	height:25px;
	text-indent:-9999px;
	margin: 0 auto; 
	background-repeat:no-repeat;
}

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

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

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

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

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

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

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

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


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

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


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




#footer {
	clear: both;
	background-color: #ffffff;
	font-size:80%;
	color:#808080;
	width:269px;
	margin: 0px auto;
    text-align: center;
	height:40px;
	padding:0 0 0 0;
}

#footer_name {
	clear: both;
	text-align: center;
	width: 100%;
}

#footer_thanks {
	clear: both;
	text-align: center;
	width: 100%;
}

#copyright{
	clear: both;
	background-color: #ffffff;
	font-size:0.6em;
	color:#808080;
	width: 100%;
	margin: 0px auto;
    text-align: center;
	height:50px;
}

}




/******MOBILE DEVICE Responsive Breakpoint (vertical) ----------- */

@media only screen and (max-width : 321px) {
/* Styles */


#topnav {
	background-color: #fffff;
	height: 20px;
	width: 320px;
    margin: 0px auto;
    text-align: center;
	clear: both;
	
}

/* START Basic menu styles top_nav  horizontal mobile*/


	
ul#top_navigation {

}

		
ul#top_navigation li a {   
	font-size:0.78em;
	text-decoration:none;
	color:#808080;
	font-weight:normal;
	display:block;
	height:20px;
	position: relative;
	/*float: left;*/
	margin: 0 auto; 
	padding:0 15px 0 15px;
}

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

	
}	

/* End Basic Nav Menu Style for horizontal mobile */


#logo {
	clear: both;
	width:269px;
	height:200px;
	margin: 0 auto; 
	position: relative;
	background-repeat:no-repeat;
	padding:55px 0 0 0;
}

#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:269px;
	height:152px;
	margin: 0 auto; 
	background-image:url(../_images/logo_index_sm.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:269px;
	height:152px;
	margin: 0 auto; 
	background-image:url(../_images/logo_index_sm.png);
	background-position:0 -152px;
	
}

#map {
	position: absolute;
	border: solid 2px #FFFFFF;
	width: 12px;
	height: 15px;
	top: 165px;
	left: 200px;
	z-index: 50;
}



#map2 {
	position: absolute;
	border: solid 2px #FFFFFF;
	width: 12px;
	height: 15px;
	top: 165px;
	left: 200px;
	z-index: 50;
	background-image: url(_images/pop_me.png);
}


#socialnav{
	background-color: #ffffff;
	width:200px;
	height: 20px;
	margin: 0 auto; 
	padding:20px 0 0 0;
	
	
}

#footer {
	clear: both;
	background-color: #ffffff;
	font-size:80%;
	color:#808080;
	width:269px;
	margin: 0px auto;
    text-align: center;
	height:40px;
	padding:-10px 0 0 0;
}
#copyright{
	clear: both;
	background-color: #ffffff;
	font-size:0.6em;
	color:#808080;
	width: 100%;
	margin: 0px auto;
    text-align: center;
	height:50px;
	padding:15px 0 0 0;
}
}