/*************************************************

	Switch Interactive
	http://www.switchinteractive.com
    
	Design and Code : Switch Interactive
	Author Homepage : http://www.switchinteractive.com	
	Created : January 20th 2010
	Last Updated : March 2010

	Notes: Temporary Homepage


***************************************************
	GENERIC
	
	*/


html{
	font: 62.5%/160% Arial, Helvetica, sans-serif;   
	color: #454545;
	}
	
body{
	margin: 0px;
	padding: 0px;
	text-align: center;
	background:#FFF;
	}

#popup {
	background-image:none;
	}	
 
/***************************************************
	WRAPPER
	
	 */
#wrapper {
	width:960px;
	margin: 0px auto;
	text-align:left;
	}
	
#popup #wrapper {margin-top:10px; width:500px;}
#video-page #wrapper {width:640px;	}
    
/***************************************************
	HEADER
	
	*/
#header {
	height:137px;
	margin:0;
	position:relative;
	border-bottom:solid 1px #e7e7e7;
	margin:0 0 20px 0;
	}

.logo {
    text-indent:-999em;
    width:180px;
    height:19px;
	position:absolute;
	top:75px;
	left:0;
    display:block;
    background:url(../images/logo.gif) no-repeat;
    }
    
/***************************************************
	MAIN MENU
	
	*/

#topmenu {
	margin:0;
	padding:0;
	position:absolute;
	top:84px;
	right:0px;
	
	}

#topmenu LI  {
	list-style:none;
	float:left;
	width:auto;
	
	}
	
#topmenu A {
	display:block;
	text-transform:uppercase;
	padding:0;	
	text-decoration:none;
	text-indent:-999em;
	height:8px;
	line-height:0;	
	margin:0 18px 0	0;
	background:url(../images/topmenu.gif) no-repeat;
	}
			
#topmenu A:hover {text-decoration:line-through;}
	
#nav-home A {width:30px;background-position:0 0px;}
#nav-about A {width:36px;background-position:-53px 0px;}
#nav-news A{width:30px; background-position:-113px -0px;}
#nav-showreel A {width:58px;background-position:-159px -0px;}
#nav-careers A{width:47px;background-position:-236px -0px;}
#nav-contact A{width:48px;   background-position:-301px -0px;}
#nav-blog A {width:48px; background-position:-368px -0px;margin:0;}

#nav-home A:hover {background-position:0 -14px;}
#nav-about A:hover {background-position:-53px -14px;}
#nav-news A:hover {background-position:-113px -14px;}
#nav-showreel A:hover {background-position:-159px -14px;}
#nav-careers A:hover {background-position:-236px -14px;}
#nav-contact A:hover {background-position:-301px -14px;}
#nav-blog A:hover {background-position:-368px -14px;}

#nav-home A.selected {background-position:0 -28px;}
#nav-about A.selected {background-position:-53px -28px;}
#nav-news A.selected {background-position:-113px -28px;}
#nav-showreel A.selected {background-position:-159px -28px;}
#nav-careers A.selected {background-position:-236px -28px;}
#nav-contact A.selected {background-position:-301px -28px;}
#nav-blog A.selected {background-position:-368px -28px;}

/***************************************************
	Sections
	
	Sections are the top of the page elements (about, news etc)
	*/
	

#sections {
	font-size:110%;
	line-height:150%;
	}
	
#sections H2 SUP{
	font-size:14px;
	vertical-align:super;
	}

#about,
#news,
#contact,
#showreel,
#careers {
	display:none;
	}
.page-template-portfolio-real-estate-php #about{
	display:block;
	}
.info {
	padding:50px 0;
	border-bottom:solid 1px #e7e7e7;
	position:relative; /*for positioning the close */
	}
.page-template-portfolio-real-estate-php .info {
	padding:30px 0;
	}
	
/* in order ot make the news scrollable we have to set 
a height on the news section. Due to absolute position*/	

#news {
	height:190px;
	}
	
#news A.teaser {
	display:block;
	font-weight:bold;
	margin:0 0 5px 0;
	font-size:120%;
	}
#news .col {
	width:550px;
}

#news .pager,
#news {
	height:260px;
	}
	
	#careers UL {
	margin:0;
	padding:0;
	}
	
.pager {
	list-style:none;
	margin:0;
	padding:0;

	height:190px;
	}	

/* dynamically generating pagination */
#feature-pagination {
	list-style:none;
	position:absolute;
	bottom:0px;
	right:0px;
	}
	
#feature-pagination LI {
	float:left;
	}
	
#feature-pagination A {	
	background:url(../images/slideshow-btn.gif) no-repeat;
	width:16px;
	height:15px;
	display:block;
	text-align:center;
	text-decoration:none;
	float:left;
	color:#fff;
	margin:0 2px 0 0;
	}
	
#feature-pagination A:hover,
#feature-pagination .selected A{background:url(../images/slideshow-btn.gif) -16px 0 no-repeat;}

#sections UL LI LI{
	list-style:none;
	background:url(../images/bullet.gif) left center no-repeat;
	padding: 0 0 0 10px;
	}
	
#sections #feature-pagination LI {
	list-style:none;
	background:none;
	padding: 0;
	}	
	
/***************************************************
	CONTACT DROPDOWN 
	
	*/
	
#contact .col {
	width:600px;
	color:#7A7A79;
	}
	
#contact STRONG {
	text-transform:uppercase;
	width:80px;
	display:block;
	float:left;
	clear:left;
	color:##7A7A79;
	}
#contact h5 {
	font-size:30px;
	text-transform:uppercase;
	border-bottom:solid 1px #7A7A79;
	padding:0 0 30px 0;
	margin:0 0 30px 0;
	clear:left;
	color:##7A7A79;
	line-height:100%;
	}
#contact .contact-list {
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	width:290px;
	}
	
#contact .contact-list LI {
	margin:0 0 10px 0;
	}
	
	
#contact ADDRESS {
	font-size:140%;
	color:#8b8b8b;
	width:500px;
	line-height:140%;
	margin-top:100px;
	}

#gmap {
	padding:15px;
	border:solid 1px #ccc;
	float:left;
	}
/***************************************************
	COLUMNS 
	
	*/
	
.col-wide{
	width:300px /* redefined under .project .col-wide */;
	float:left;
	line-height:160%;
	font-size:110%;
	position:relative;
	}	
	
.col {
	float:left;
	width:260px;
	margin:0 0 0 60px;
	}	

		
/***************************************************
	PROJECTS
	
	*/
	
.project {
	width:300px;
	float:left;
	padding:30px 0;
	margin:0 30px 0 0;
	height:400px;
	overflow:hidden;
}
	
.sticky{
	clear:both;
	padding:30px 0;
	border-bottom:solid 1px #e7e7e7;
	background:url(../images/project-header.gif) 0 30px no-repeat;
	height:425px;
	overflow:hidden;
	font-size:110%;
	position:relative;
	width:100%;
	margin:0;
	}
	
.sticky .col-wide {
	padding:40px 0 0 0 !important;
	position:relative;
	}
.project .col-wide {
	padding:20px 0 0 0;
}
.sticky H3 {
	margin:0 !important;
}
.project H3 {
	margin:0 0 20px 0;
	}
	
.project SMALL {
	margin:0 0 15px 0;
	display:block
	}


.visit-website 

{
	display:block;
	background:url(../images/visit-website.gif) no-repeat;
	text-indent:-999em;
	width:88px;
	height:8px;
	font-size:0;
	line-height:8px;

	}	
	
.visit-website:hover {background:url(../images/visit-website.gif) 0 -11px no-repeat;}

.view-video {
	display:block;
	background:url(../images/view-video.gif) no-repeat;
	text-indent:-999em;
	width:88px;
	height:8px;

	font-size:0;
	line-height:8px;
	}
.sticky .visit-website,
.sticky .view-video {
		margin:50px 0 0 0;
}
/*special case after inside out was moved to self promo */		
#post-80 .view-video{
	margin:10px 0 0;
	}	
	
.view-video:hover {background:url(../images/view-video.gif) 0 -11px no-repeat;}	

.play-puckoff {
	display:block;
	background:url(../images/play-puckoff.gif) no-repeat;
	text-indent:-999em;
	width:88px;
	height:8px;
	margin:50px 0 0 0;
	font-size:0;
	line-height:8px;
	}	
	
.play-puckoff:hover {background:url(../images/play-puckoff.gif) 0 -11px no-repeat;}	

/* slideshow is the actual images UL */	
.slideshow {
	float:left;
	width:600px;
	margin:0 0 0 60px;
	padding:0;
	list-style:none;
	height:425px;
	overflow:hidden;	
	position:relative;
		background:#000;
	}
	
.slideshow LI {
	float:left;
	position:relative;
	}

.loader {
	position:relative;
	left:300px;
	top:250px;
	display:none;
	}

a.disableLink {
	text-decoration:none;
	cursor : default;
	}

/* slideshowBtn is a containing div for A's which control slideshow */
.slideshowBtn {
	position:absolute;
	bottom:0;
	right:10px;
	font-size:11px;
	}	
	
.slideshowBtn A {	
	background:url(../images/slideshow-btn.gif) no-repeat;
	width:16px;
	height:15px;
	line-height:15px;
	display:block;
	text-align:center;
	text-decoration:none;
	float:left;
	color:#fff;
	margin:0 2px 0 0;
	}
	
.slideshowBtn A:hover,
.slideshowBtn A.disableLink{background:url(../images/slideshow-btn.gif) -16px 0 no-repeat;}

.project .tooltip {
	color:#FFFFFF;
	width:100px;
	position:absolute;
	overflow:hidden;
	background-color:#454545;
	padding:3px;
	text-align:center;
	display : none;

}

/***************************************************
	SPECIAL ITEMS
	
	 */
#twitter2 {
	background:url(../images/twitter.gif) no-repeat;
	padding:2px 0 2px 20px;
	text-decoration:none;
	}
#twitter2:hover {
	text-decoration:line-through;
	}
	 	
#insideout {
	text-align:center;
	margin:20px auto;
	}
	

	
/***************************************************
	FOOTER
	
	 */

#footer {
	clear:both;
	margin:20px 0;
	border-top:solid 1px #d3d3d3;
	padding:30px 0;
	}

.page-template-portfolio-real-estate-php #footer {
	border:none;
	padding:0;
	}
#footer P {
	float:left;
	}
	
#footer P.copyright {
	
	margin:2px 0 0;
	padding:0;
	}
	
#footer UL {
	margin:0;
	padding:0;
	float:left;
	}
	
#footer LI {
	float:left;
	width:auto;
	list-style:none;
	margin:0 10px 0 0;
	}

#footer FORM {
	
	float:right;
	margin:0;
	}
	
#footer FORM .text {
	width:260px;
	background:#f1f1f1;
	}
	
#footer .col {
	width:270px;
	}	
	
#footer P.col {
	margin-top:3px;
	font-size:110%;
	}
	
#footer FORM .submit {
	background:url(../images/submit.gif) no-repeat;
	text-indent:-999em;
	display:block;
	height:16px;
	width:58px;
	float:right;
	margin:5px 0 0 0;
	font-size:0;
	line-height:0;
	}

#footer FORM .submit:hover {background:url(../images/submit.gif) 0 -18px no-repeat;}
#footer FORM A {
	margin:5px 0 0 0;
	text-decoration:none;
	display:block;
	float:left;
	font-size:110%;
	}

#footer FORM A:hover {
	text-decoration:underline;
	}
#confirmation {
	display:none;
	}