@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'HelveticaNeueCondensed';
    src: url('helve57c-webfont.eot');
    src: url('helve57c-webfont.eot?#iefix') format('embedded-opentype'),
         url('helve57c-webfont.woff') format('woff'),
         url('helve57c-webfont.ttf') format('truetype'),
         url('helve57c-webfont.svg#HelveticaNeueCondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

html,body {
   margin:0;
   padding:0;
   height:100%;
}
body{
	margin:0px;
	padding:0px;
	height:100%;
	background-image:url(../tl_files/sp-designs/black_bg.gif);
	background-repeat:repeat;
	background-position:top left;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow: 1px 1px 1px rgba(255,255,255,.5);
}
#wrapper{
	min-height:100%;
	position:relative;
	background-image:url(../tl_files/sp-designs/paper_bg.gif);
	background-repeat:repeat;
	background-position:top left;
	margin:0px;
	padding:0px;
}
/***** STYLES *****/
h1{
	font: normal normal normal 16px/24px 'HelveticaNeueCondensed', Arial, Helvetica, sans-serif;
	font-familyx: 'HelveticaNeueCondensed', Helvetica, Arial, sans-serif;
	color:#333;
	text-transform: uppercase;
}
h2{
	font: normal normal normal 16px/24px 'HelveticaNeueCondensed', Arial, Helvetica, sans-serif;
	color:#5095b3;
	padding:0px 0px 5px 0px;
	text-transform: uppercase;
}
h3{
	font: normal normal bold 12px/18px Arial, Helvetica, sans-serif;
	color:#5095b3;	
}
p{
	font: normal normal normal 12px/16px Arial, Helvetica, sans-serif;
	color:#666;
	padding:0px 0px 20px 0px;
}
a{
	color:#faa73f;
	text-decoration:underline;
}
a:hover{
	text-decoration:none;
}
p.moreLink a{
	font: normal normal normal 14px/16px 'HelveticaNeueCondensed', Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-transform:uppercase;
	text-decoration:none;
}
p.moreLink a:hover{
	text-decoration:underline;
}
/***** HEADER *****/
#header{
	position:relative;
}
.logo{
	position:absolute;
	top:25px;
	left:25px;
	width:158px;
	height:79px;
}
/***** MAIN NAVIGATION *****/
#mainNav{
	padding:81px 25px 0px 0px;
	margin:0px;
	text-align:right;
}
#mainNav ul{
	display:inline;
}
#mainNav ul li{
	display:inline;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style:italic;
	font-size:13px;
	color:#ccc;
	text-decoration:none;
	margin:0px 0px 0px 38px;
	padding:12px 0px 1px 0px;
}
#mainNav ul li.first{
	margin:0px;
}
#mainNav ul li.home a{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:0px -1px;
	padding:10px 0px 0px 28px;
}
#mainNav ul li.home a:hover {
	background-position:0px -29px;
}
#mainNav ul li.home.active{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:0px -29px;
	padding:10px 0px 0px 28px;
}
#mainNav ul li.about a{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:-150px 1px;
	padding:10px 0px 0px 33px;
}
#mainNav ul li.about a:hover {
	background-position:-150px -27px;
	
}
#mainNav ul li.about.active{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:-150px -27px;
	padding:10px 0px 0px 33px;
}
#mainNav ul li.portfolio a{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:-300px 2px;
	padding:10px 0px 0px 35px;
}
#mainNav ul li.portfolio a:hover {
	background-position:-300px -26px;
}
#mainNav ul li.portfolio.active{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:-300px -26px;
	padding:10px 0px 0px 35px;
}
#mainNav ul li.notebook a{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:-450px 2px;
	padding:10px 0px 0px 37px;
}
#mainNav ul li.notebook a:hover{
	background-position:-450px -26px;
}
#mainNav ul li.notebook.active{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:-450px -26px;
	padding:10px 0px 0px 37px;
}
#mainNav ul li.contact a{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:-600px 2px;
	padding:10px 0px 0px 35px;
}
#mainNav ul li.contact a:hover{
	background-position:-600px -26px;
}
#mainNav ul li.contact.active{
	background-image:url(../tl_files/sp-designs/navIcons-sp.png);
	background-repeat:no-repeat;
	background-position:-600px -26px;
	padding:10px 0px 0px 35px;
}
#mainNav ul li a{
	display:inline;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style:italic;
	font-size:13px;
	line-height:23px;
	color:#ccc;
	text-decoration:none;
}
#mainNav ul li a:hover{
	color:#faa73f;	
}
#mainNav ul li.active{
	color:#333;	
}
/***** CONTAINER *****/
#container{
	padding-bottom:493px; /* Height of the footer */
	margin:0px;
}
#main{
	padding:0px 30px 0px 23px;
}
#main h1{
	padding:0px 0px 5px 2px;
}
#home h2, #home p{
	
}
.image_container{
	padding:0px 0px 20px 0px;
}
p.info{
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style:italic;
	font-size:12px;
	padding:0px 20px 5px 0px;
	text-align:right;
}
#about p{
	padding-right:40px;
}
#main .layout_short{
	border-bottom:solid 1px #333;
	margin-bottom:15px;
}
#main h2 a{
	color:#5095b3;
	text-decoration:none;
}
#main h2 a:hover{
	text-decoration:underline;
}
#main p.teaser{
	padding:0px 0px 5px 0px;
}
#main p.more{
	padding:0px 0px 5px 0px;
}
#main p.more a{
	text-transform:uppercase;
	text-decoration:none;
}
#main p.more a:hover{
	text-decoration:underline;
}

#sketchbook-reader h2{
	font-weightx: bold;
}
#homeFpList{
	margin-top: 40px;
	border-top: solid 1px #333;
}
.home #homeFpList .layout_short.last{
	margin-bottom: 0;
}
.home #homeFpList .layout_short.first{
	display: none;
}
/***** CONTACT FORM *****/
form#contact label{
	display:block;
	margin:0px 0px 0px 50px;
	padding:0px 0px 3px 0px;
	font-size:14px;
	color:#5095b3;	
}
form#contact input{
	display:block;
	margin:0px 0px 0px 50px;
	padding:0px;
	font-size:13px;
	color:#666;
}
form#contact textarea{
	display:block;
	margin:0px 0px 0px 50px;
	padding:0px;
	font-size:13px;
	color:#666;
}
form#contact p.error{
	display:block;
	margin:0px 0px 0px 50px;
	padding:0px;
	font-size:13px;
	color:#red;
}
.connectItems{
	border-top:solid 1px #333;
	border-bottom:solid 1px #333;
	margin:1px 0px 10px 0px;
	padding:10px;
}
.connectItems li{
	padding:0px 0px 10px 40px;	
	margin:0px 0px 10px 0px;
}
.connectItems li.email{
	background-image:url("../tl_files/sp-designs/email.png");
	background-repeat:no-repeat;
	background-position:top left;	
}
.connectItems li.facebook{
	background-image:url("../tl_files/sp-designs/facebook.png");
	background-repeat:no-repeat;
	background-position:top left;	
}
.connectItems li.linkedIn{
	background-image:url("../tl_files/sp-designs/linkedIn.png");
	background-repeat:no-repeat;
	background-position:top left;	
}
.connectItems li a{
	padding-top:15px;
	font-size:13px;
	text-decoration:none;
}
.connectItems li a:hover{
	text-decoration:underline;
}
/***** NEWS LISTING *****/
#right{
	padding:8px 25px 0px 0px;	
	width:280px;
}
#right h1{
	margin:18px 0px 1px 0px;
	border-bottom:solid 1px #333;
	padding:0px 0px 2px 0px;	
	font-size: 14px;
	line-height: 18px;
	font-weight: normal;
}
#right p.info{
	padding-right:0px;
}
#right h2 {
	font-size: 14px;
	line-height: 18px;
	font-weight: normal;
}
#right h2 a{
	color:#5095b3;
	text-decoration:none;
}
#right h2 a:hover{
	text-decoration:underline;
}
#right p.more a{
	font: normal normal normal 14px/16px 'HelveticaNeueCondensed', Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-transform:uppercase;
	text-decoration:none;
}
#right p.more a:hover{
	text-decoration:underline;
}
#right .layout_short{
	border-top: solid 1px #333;
	padding:15px 0px 0px 0px;
}
#right .mod_newslist .last{
	border-bottom: solid 1px #333;
}
#right .layout_short p{
	padding:0px 0px 10px 0px;
}
.mod_newslist h1, .mod_newslist h2{
	font-size: 14px;
	line-height: 18px;
	font-weight: normal;
}
.mod_newslist .enclosure{
	display: none;
}
.featuredProjects #right{
	padding-top: 0;	
}
.featuredProjects #right h1{
	margin-top: 0;	
}
/**** COMMENTS ****/
.comment_default{
	border-bottom:solid 1px #333;
	margin: 0 0 20px 0;
	padding: 10px;	
}
.ce_comments .form form {
	margin: 20px;	
}
.ce_comments .form form{
	font-size: 12px;
	color:#666;
}
.ce_comments h2{
	cursor: pointer;
	font-size: 14px;
	font-weight: normal !important;
	color: #FAA73F;
	background: url('../tl_files/sp-designs/arrow.png') no-repeat 96px 7px;
}
.ce_comments h2:hover{
	text-decoration: underline;
}
/***** SERVICES LIST *****/
#services ul{
	margin:1px 0px 10px 0px;
	border-top:solid 1px #333;
	border-bottom:solid 1px #333;
	padding:15px 0px 5px 2px;
}
#services ul li{
	font-size:13px;
	text-transform:uppercase;
	color:#faa73f;	
	padding:3px 0px 20px 30px;
	background-image:url(../tl_files/sp-designs/starBullet.png);
	background-repeat:no-repeat;
}
#archiveMenu ul.level_1{
	margin:1px 0px 0px 0px;
	border-top:solid 1px #333;
	border-bottom:solid 1px #333;
}
#archiveMenu ul.level_1 li{
	margin:10px 0px 10px 10px;
	font-size:13px;
	color:#5095b3;
}	
p.allProjects{
	margin-top:1px;
	border-top:solid 1px #333;
	border-bottom:solid 1px #333;
	padding:10px 0px;
}
p.allProjects a{
	text-transform:uppercase;
	text-decoration:none;
}
p.allProjects a:hover{
	text-decoration:underline;
}
#showcaseLink{
	margin-bottom:35px;
}
/***** FOOTER *****/
#footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:493px;   /* Height of the footer */
	margin:0px;
	background-image:url(../tl_files/sp-designs/waves.jpg);
	background-repeat:no-repeat;
	background-position:bottom left;
}
#footer p.backToTop{
	margin:470px 25px 0px 25px;	
	padding:0px;
	text-align:right;
}
#footer p.backToTop a{
	color:#5095b3;
	text-decoration:none;
}
#footer p.backToTop a:hover{
	color:#333;
	text-decoration:underline;
}
/***** PORTFOLIO SHOWCASE ********/
.portfolio #main{
	padding:0px 20px 0px 23px;
}
.portfolio .ce_text h1{
	float: left;
	width: 400px;
}
.portfolio .ce_text .topLink{
	float: right;
	width: 400px;
	text-align: right;
	padding: 5px 5px 0 0;
}
#gallery{
	padding:2px;
	/* The width of the gallery */
	width:911px;
	height:483px;
	overflow:hidden;
	position:relative;
	background-image:url(../tl_files/sp-designs/portfolioBg.png);
	background-repeat:no-repeat;
	background-position:top left;
}

#slides{
	/* This is the slide area */
	height:429px;

	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:911px;
	overflow:hidden;
}

.slide{
	float:left;
}

#menu{
	/* This is the container for the thumbnails */
	height:50px;
}

#gallery ul{
	margin:0px;
	padding:0px;
	text-align:center;
}

#gallery li{
	/* Every thumbnail is a li element */
	width:80px;
	display:inline-block;
	list-style:none;
	height:50px;
	overflow:hidden;
	margin:0px;
	padding:0px;
	background-image:url("../tl_files/sp-designs/portMenuBg.gif");
	background-repeat:no-repeat;
	background-position:top left;
	background-color:#ccc;
}

#gallery li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background-image:url("../tl_files/sp-designs/portMenuBg-active.gif");
	background-repeat:no-repeat;
	background-position:top left;
}

#gallery li.act,li.act:hover{
	/* The active state of the thumb */
	background-image:url("../tl_files/sp-designs/portMenuBg-active.gif");
	background-repeat:no-repeat;
	background-position:top left;
	text-decoration:none;
}

#gallery li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(../tl_files/sp-designs/menuDiv.gif) no-repeat right;
}

#gallery li a{
	display:block;
	height:47px;
	padding:3px 0px 0px 0px;
	margin:0px;
}


#gallery a img{
	border:none;
}

.tooltip span {
	display:none;
	position: absolute;
	top:0px;
	left:0px;
	z-index: 99;
	margin-left: 0;
	width:100%;
}
.description{
	background:#000;
	color:#fff;
	padding:15px;
	filter:alpha(opacity=70);
	/* CSS3 standard */
	opacity:0.7;
	font-size:13px;
	text-decoration:none !important;
}

/********************************** MEDIA QUERIES ******************************/

/* iPad Portrait/Browser */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	
}

/* Mobile/Browser */
@media only screen and (max-width: 767px) {
	#wrapper { 
		width: auto; 
		margin:0 auto 0 0; 
	}
	#right { 
		width: auto; 
		float: none;
		padding: 0 10px;
	}
	#main{ 
		width: auto;
		margin: 0;
		position: static;
		padding: 10px;
	}
	.block{
		overflow: visible;
	}
	#container{
		padding-bottom: 245px; /* Height of the footer */
		clear: both;
	}
	/***** HEADER *****/
	.logo{
		position:absolute;
		top:10px;
		left:10px;
		width: 100px;
		height: auto;
	}
	/***** MAIN NAV *****/
	#mainNav{
		padding:10px 10px 0px 0px;
		margin:0px;
		text-align:right;
	}
	#mainNav ul{
		display: block;
		float: right;
		margin: 0;
		padding: 0;
	}
	#mainNav ul li, #mainNav ul li.active, #mainNav ul li.first{
		display: block;
		margin: 0 !important;
		padding: 0 !important;
		background-image: none !important;
		line-height: 18px;
	}
	#mainNav ul li.active span{
		margin: 0 !important;
		padding: 0 !important;
		line-height: 18px;
	}
	#mainNav ul li.active{
		padding: 12px 50px 10px 0 !important;
		width: 150px;
	}
	#mainNav ul li a{
		margin: 0 !important;
		padding: 12px 50px 10px 0 !important;
		width: 150px;
		background-image: none !important;
		line-height: 18px;
		display: block;
	}
	
	#mainNav ul li.home{
		background: url('../tl_files/sp-designs/home-1.png') no-repeat 160px 5px !important;
	}
	#mainNav ul li.home.active{
		background: url('../tl_files/sp-designs/home-2.png') no-repeat 160px 3px !important;
	}
	#mainNav ul li.about{
		background: url('../tl_files/sp-designs/about-1.png') no-repeat 160px 5px !important;
	}
	#mainNav ul li.about.active{
		background: url('../tl_files/sp-designs/about-2.png') no-repeat 160px 3px !important;
	}
	#mainNav ul li.portfolio{
		background: url('../tl_files/sp-designs/port-1.png') no-repeat 160px 5px !important;
	}
	#mainNav ul li.portfolio.active{
		background: url('../tl_files/sp-designs/port-1.png') no-repeat 160px 5px !important;
	}
	#mainNav ul li.notebook{
		background: url('../tl_files/sp-designs/sketch-1.png') no-repeat 160px 5px !important;
	}
	#mainNav ul li.notebook.active{
		background: url('../tl_files/sp-designs/sketch-1.png') no-repeat 160px 5px !important;
	}
	#mainNav ul li.contact{
		background: url('../tl_files/sp-designs/contact-1.png') no-repeat 160px 5px !important;
	}
	#mainNav ul li.contact.active{
		background: url('../tl_files/sp-designs/contact-1.png') no-repeat 160px 5px !important;
	}
	
	/**** CONTENT ****/
	#about p{
		padding-right: 0;
	}
	
	/**** CONTACT ****/
	form#contact label, form#contact input, form#contact textarea{
		margin-left: 0;
	}
	
	/**** FEATURED PROJECTS ****/
	#container #main .image_container img{
		width: 100%;
		height: auto;
	}
	
	.featuredProjects #showcaseLink, #container #main #sketchbook-reader .image_container{
		display: none;
	}
	/***** FOOTER *****/
	#footer {
		background-size: 100%;
		height: 245px;   /* Height of the footer */
	}
	#footer p.backToTop{
		margin: 50px 10px 0;	
		text-align: left;
	}
	
}

/* Mobile Landscape/Browser */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
}