/* CSS Document */

/* Font Face
--------------------------------------------------------------- */

/* Helvetica
--------------------------------------------------------------- */

@font-face {
    font-family: 'HelveticaLTStdCondensed';
    src: url('../fonts/helveticaltstd-cond-webfont.eot');
    src: url('../fonts/helveticaltstd-cond-webfont.eot@#iefix') format('embedded-opentype'),
         url('http://www.teknodium.com/includes/fonts/helveticaltstd-cond-webfont.woff') format('woff'),
         url('../fonts/helveticaltstd-cond-webfont.ttf') format('truetype'),
         url('../fonts/helveticaltstd-cond-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Opificio
--------------------------------------------------------------- */

@font-face {
    font-family: 'OpificioRegular';
    src: url('../fonts/opificio-webfont.eot');
    src: url('../fonts/opificio-webfont.eot@#iefix') format('embedded-opentype'),
         url('http://www.teknodium.com/includes/fonts/opificio-webfont.woff') format('woff'),
         url('http://www.teknodium.com/includes/fonts/opificio-webfont.ttf') format('truetype'),
         url('http://www.teknodium.com/includes/fonts/opificio-webfont.svg#OpificioRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpificioBold';
    src: url('../fonts/opificio_bold-webfont.eot');
    src: url('../fonts/opificio_bold-webfont.eot@#iefix') format('embedded-opentype'),
         url('http://www.teknodium.com/includes/fonts/opificio_bold-webfont.woff') format('woff'),
         url('../fonts/opificio_bold-webfont.ttf') format('truetype'),
         url('../fonts/opificio_bold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Font Face Styles
--------------------------------------------------------------- */
	
h1, h2,
p.small-title,
#footer h2,
#footer #footer-explore ul li a,
a#back-top,
.portfolio-container ul li span a,
.portfolio-container ul li span.coming-soon {
	font-family: "HelveticaLTStdCondensed";
}

#midrunner p.large-title,
#midrunner p.title-services,
#contact-bucket p.bucket-title,
#footer h2 span.title,
.portfolio-container h2 {
	font-family: "OpificioRegular";
}

p.bucket-follow-text,
ul#navigation li a {
	font-family: "OpificioRegular";
}

/* Global Styles
--------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}

body, html {
	min-height: 101%;
}

body {
	text-align: left;
	font-size: 62.5%;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;
	background: #cbd2db url(../../images/layout/bg.jpg) repeat-x center top;
	margin: 0px;
}

a:link, a:visited, a:focus {
	color: #3d8ad7;
	text-decoration: underline;
	outline: none;
}

a:hover, a:active {
	color: #036;
	text-decoration: underline;
}

a img {
	border: none;
}

/* H1/H2/H3 Styles
--------------------------------------------------------------- */

#main h1, #main h2, #sidebar h2 {
	font-size: 1.8em;
	font-weight: normal;
	color: #ffffff;
}

#main h3 {
	font-size: 1.6em;
	font-weight: normal;
	color: #ffffff;
	padding-bottom: 15px;
}

	h1.header1, h2.header1 {
		background: url(../../images/layout/header-bg1.gif) no-repeat;
		height: 37px;
		width: 209px;
		padding-top: 8px;
		padding-left: 12px;
		text-shadow: 1px 1px 2px #88a0b6;
	}
	
	h1.header2, h2.header2 {
		background: url(../../images/layout/header-bg2.gif) no-repeat;
		height: 37px;
		width: 114px;
		padding-top: 8px;
		padding-left: 12px;	
		text-shadow: 1px 1px 2px #88a0b6;
	}

/* Container Styles
--------------------------------------------------------------- */

#outerContainer {
	width: 100%;
	float: left;
}

#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	font-size: 1.2em;
	min-height: 720px;
	_height: 800px;
}

#contentContainer {
	width: 960px;
	padding-top: 300px;
}

	#index #contentContainer {
		padding-top: 825px;
	}
	
#nominee {
	position: fixed;
	top: 130px;
	right: 0px;	
	width: 59px;
	height: 140px;
	z-index: 100;
}
	
/* Main Styles
--------------------------------------------------------------- */

#main {
	float: left;
	width: 480px;
	padding: 0px 10px 10px 20px;
}

	#main p {
		margin: 10px 0px 10px 0px;
		font-size: 1.2em;
		line-height: 20px;
		color: #325076;
		line-height: 1.5em;
	}
	
	#main p.large-text {
		font-size: 1.6em;
		font-family: Georgia, "Times New Roman", Times, serif;
	}	
	
	#main ul {
		font-size: 1.2em;
		padding: 3px 0px;
	}
	
		#main ul li {
			padding: 4px 0px 4px 30px;
			list-style: none;
			background: url(../../images/misc/tick.jpg) left center no-repeat;
		}
		
	#contact #main,
	#portfolio #main {
		width: 960px;
	}
	
	#portfolio #main {
		padding-top: 20px;
	}	
	
	#main .main-col {
		float: left;
		width: 455px;	
		padding-right: 25px;
	}
	
	#main img.services-list {
		margin: 15px 0px;
		padding: 20px 0px 0px 0px;
		border-top: dotted 1px #3e6a8e;
	}
	
	#main a#back-top {
		font-size: 1.4em;
		text-decoration: none;
		background: url(../../images/layout/top-arrow.gif) right center no-repeat;
		padding: 5px 25px 5px 0px;
		margin-right: 30px;
		float: right;
		color: #3a4b5f;
	}
	
	#main a#back-top:hover {
		text-decoration: underline;
	}
	
		#main p.bucket-follow-text {
			font-size: 1.4em;
			padding-top: 10px;
		}
		
			#main #social-links a img {
				margin: 0px 11px 0px 0px;
				float: left;
			}
			
		#main img.contact-img {
			padding-top: 65px;
			float: right;	
		}
	
/* Portfolio Link Styles
--------------------------------------------------------------- */	

#portfolio-links {
	width: 960px;
	height: 59px;
	background: url(../../images/layout/portfolio-links-bg.jpg);
	position: relative;
}

	#portfolio-links ul {
		position: absolute;
		left: 275px;
		top: 10px;		
	}
	
		#portfolio-links ul li {
			list-style: none;
			float: left;
			margin: 0px 15px 0px 0px
		}
		
		#portfolio-links ul li a {
			height: 48px;
			float: left;			
		}	
		
		#portfolio-links ul li a.web-portfolio-a {
			background: url(../../images/layout/web-link.jpg);
			width: 95px;
		}	
		
		#portfolio-links ul li a.flash-portfolio-a {
			background: url(../../images/layout/flash-link.jpg);
			width: 113px;
		}	
		
		#portfolio-links ul li a.art-portfolio-a {
			background: url(../../images/layout/art-link.jpg);
			width: 81px;
		}	
		
		#portfolio-links ul li a.threed-portfolio-a {
			background: url(../../images/layout/3d-link.jpg);
			width: 74px;
		}
		
/* Portfolio Styles
--------------------------------------------------------------- */		
	
	#main .portfolio-container {
		width: 900px;
		padding: 15px;
		float: left;
		margin: 15px 0px;
		background: rgba(162,177,199,0.2);
		-moz-box-shadow: 4px 4px 4px #b8c0cc;
		-webkit-box-shadow: 4px 4px 4px #b8c0cc;
		box-shadow: 4px 4px 4px #b8c0cc;	
	}
	
	#main .portfolio-container ul li {
		position: relative;
	}	
	
	#main .portfolio-container img {
		display: block;
		-moz-box-shadow: 0px 2px 4px #a7b1bf;
		-webkit-box-shadow: 0px 2px 4px #a7b1bf;
		box-shadow: 0px 2px 4px #a7b1bf;		
	}
	
	#main .portfolio-container img:hover {
		-moz-box-shadow: 0px 2px 8px #8794aa;
		-webkit-box-shadow: 0px 2px 8px #8794aa;
		box-shadow: 0px 2px 8px #8794aa;		
	}
	
	#main .portfolio-container ul li span a,
	#main .portfolio-container ul li span.coming-soon {
		display: block;
		color: #375A80;
		background: #CAD1DB;
		padding: 4px 15px;
		text-decoration: none;
		text-align: center;
		border-radius: 5px 5px 0px 0px;
		-moz-border-radius: 5px 5px 0px 0px;
		-webkit-border-radius: 5px 5px 0px 0px;
		-moz-box-shadow: 0px 2px 2px #a7b1bf;
		-webkit-box-shadow: 0px 2px 2px #a7b1bf;
		box-shadow: 0px 2px 2px #a7b1bf;
		position: absolute;
		right: 0px;
		bottom: 0px;
	}	
	
	#main .portfolio-container span a:hover {
		background: #E8EAE7;
	}
	
	#main #web-portfolio {
		background-image: none;
		padding-top: 20px;
	}
	
		#main .portfolio-container h2 {
			font-size: 3.5em;
			color: #3a4b5f;
			display: inline;
			margin: 0px 0px 0px 12px;
			text-transform: none;
		}
		
		#main .portfolio-container p {
			display: inline;
			margin-left: 10px;
			font-style: italic;
			color: #8092a0;
			text-transform: lowercase;
		}
		
			#main .portfolio-container ul li {
				list-style: none;
				background-image: none;
				padding: 0px;
				margin: 12px;
				float: left;
			}
			
/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
#sidebar {
	float: right;
	width: 450px;
}

	#sidebar #twitter {
		display: none;
		float: left;
		padding: 0px 0px 10px 0px;
		clear: both;
	}
	
		#index #sidebar #twitter {
			display: block;
		}
		
		#sidebar #twitter p {
			font-size: 1.2em;
		}
			
			#sidebar #twitter .twtr-ft img, 
			#sidebar #twitter .twtr-ft span,
			#sidebar #twitter .twtr-hd {
				display: none;
			}
			
	#sidebar #sidebar-form {
		float: right;	
	}
	
	#sidebar #sidebar-form p.form-text {
		float: right;
	}
				
/* Header Styles
--------------------------------------------------------------- */

#header {
	clear: both;
	width: 960px;
	height: 130px;
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
}

	#logo {
		width: 276px;
		height: 74px;
		float: left;
		position: absolute;
		top: 40px;
		left: 10px;
	}
	
	#cta-top-right {
		width: 600px;
		float: right;
		padding: 5px 0px 0px 0px;
		text-align: right;
		height: 125px;
		font-size: 1.6em;
	}
	
		#cta-top-right .phone {
			font-size: 1.2em;
		}

/* Main Image Styles
--------------------------------------------------------------- */

#imgmain {
	z-index: 100;
	position: absolute;
	top: 146px;
	right: 40px;
}

	#about #imgmain {
		top: 282px;
		right: 0px;
	}
	
/* Slideshow Styles
--------------------------------------------------------------- */	
	
#slideshow { 
	z-index: 100;
	position: absolute;
	top: 146px;
	right: 40px;
	width: 397px;
	height: 318px;	
}	
	
	#slideshow a { 
		display: none 
	}
	
	#slideshow a.first { 
		display: block 
	}

/* Horizontal Navigation Styles
--------------------------------------------------------------- */

ul#navigation {
	width: 590px;
	height: 40px;
	z-index: 10;
	position: absolute;
	right: 0px;
	top: 50px;
	margin: 0px;
	padding: 0px;	
}

	ul#navigation li {
		display: inline;
		list-style: none;
		padding: 25px 15px 0px 0px;
		float: left;
	}
		  
		ul#navigation li a {
			float: left;
			color: #3a4b5f;
			text-decoration: none;
			padding: 10px;
			margin: 0px 15px;
			font-size: 1.9em;
			text-transform: lowercase;
			-moz-transition: all 0.2s ease;
			-webkit-transition: all 0.2s ease;
			-o-transition: all 0.2s ease;					
		}

			ul#navigation li a.contact-a {
				border-right: none;
			}

			ul#navigation li a:hover {
				color: #E7F4FA;
			}
				
/* Midrunner Styles
--------------------------------------------------------------- */

#midrunner {
	width: 960px;
	height: 158px;
	z-index: 10;
	position: absolute;
	left: 0px;
	top: 124px;
	background: url(../../images/layout/midrunner-sml.jpg) no-repeat;
}

	#index #midrunner {
		height: 341px;
		background: url(../../images/layout/midrunner.jpg) no-repeat;
	}

	#midrunner #title-container {
		position: absolute;
		left: 37px;
		top: 36px;
	}
	
	#midrunner #title-container p.small-title {
		font-size: 3em;
		color: #cbdef3;
		text-shadow: 1px 1px 2px #365271;
	}
	
		#midrunner #title-container p.small-title span {
			display: block;
		}	
	
	#midrunner #title-container p.large-title {
		font-size: 4em;
		color: #ffffff;
		text-transform: none;
		text-shadow: 1px 1px 2px #365271;
	}
	
	#midrunner p.title-services {
		font-size: 2.6em;
		color: #ffffff;
		background: url(../../images/layout/title-services-bg.jpg) no-repeat;
		height: 42px;
		width: 405px;
		position: absolute;
		left: 53px;
		top: 215px;
		padding: 5px 0px 0px 16px;
	}
	
	#midrunner p.title-services span {
		color: #cbdef3;
	}
	
	#midrunner #midrunner-form {
		position: absolute;
		right: 30px;
		top: 20px;	
	}
	
/* Bucket Styles
--------------------------------------------------------------- */

#buckets-container {
	position: absolute;
	left: 10px;
	top: 478px;	
}

	#buckets-container .bucket {
		width: 203px;
		float: left;
		padding-top: 78px;
		margin-right: 37px;
		position: relative;
	}
	
	#buckets-container .last {
		margin-right: 0px;	
	}
	
	#buckets-container a.bucket-view {
		position: absolute;
		top: 36px;
		right: 13px;			
	}
	
		#buckets-container .bucket ul.portfolio-gallery {
			padding-top: 5px;
		}	
	
			#buckets-container .bucket ul.portfolio-gallery li {
				list-style: none;
				padding-bottom: 4px;
			}
			
				#buckets-container .bucket ul.portfolio-gallery li a {
					-moz-transition: all 0.3s ease;
					-webkit-transition: all 0.3s ease;
					-o-transition: all 0.3s ease;					
					opacity: 1;
				}
				
				#buckets-container .bucket ul.portfolio-gallery li a:hover {
					opacity: 0.7;
				}			
			
/* Web Bucket Styles
--------------------------------------------------------------- */
	
	#buckets-container #web-bucket {
		background: url(../../images/layout/bucket-web.jpg) no-repeat center top;	
	}
	
/* Flash Bucket Styles
--------------------------------------------------------------- */
	
	#buckets-container #flash-bucket {
		background: url(../../images/layout/bucket-flash.jpg) no-repeat center top;	
	}
	
/* Art Bucket Styles
--------------------------------------------------------------- */
	
	#buckets-container #art-bucket {
		background: url(../../images/layout/bucket-art.jpg) no-repeat center top;	
	}
	
/* Contact Bucket Styles
--------------------------------------------------------------- */
	
	#buckets-container #contact-bucket {
		padding-top: 0px;
		margin-top: 3px;
		border-left: solid 2px #DAE6F2;
		width: 225px;
	}	
	
		#buckets-container #contact-bucket p.bucket-title {
			background: url(../../images/layout/bucket-contact.gif) no-repeat center top;	
			font-size: 2.6em;
			padding: 4px 0px 0px 15px;
			margin-bottom: 15px;
			color: #325076;
		}
		
		#buckets-container #contact-bucket #contact-container {
			color: #325076;
			margin-left: 15px;
			font-size: 1.2em;
			padding-bottom: 5px;
		}
		
			#buckets-container #contact-bucket #contact-container p {
				color: #325076;
				line-height: 1.6em;
				margin-bottom: 5px;
			}		
			
			#buckets-container #contact-bucket #contact-container a.bucket-email,
			#main a.bucket-email {
				background: url(../../images/layout/email-icon.gif) no-repeat left;	
				padding: 5px 0px 5px 30px;
				display: block;
			}		
			
			#buckets-container #contact-bucket #contact-container p.bucket-phone {
				background: url(../../images/layout/phone-icon.gif) no-repeat left;
				padding: 10px 0px 10px 30px;
				color: #3d8ad7;
				font-size: 1.2em;
				display: block;
			}
			
			#buckets-container #contact-bucket #contact-container #social-links p.bucket-follow-text {
				font-size: 1.2em;
				margin: 10px 0px;
				float: left;
				width: 100%;
			}
			
				#buckets-container #contact-bucket #contact-container #social-links a img {
					margin: 0px 11px 0px 0px;
					float: left;
				}
				
/* Footer Styles
--------------------------------------------------------------- */

#outerFooter {
	float: left;
	width: 100%;
	background: url(../../images/layout/outer-footer-bg.jpg) repeat-x center bottom;
}

#footer {
	clear: both;
	width: 960px;
	height: 242px;
	color: #ffffff;
	margin: 0px auto;
	padding: 35px 0px 120px 0px;
	font-size: 1.2em;
	background: url(../../images/layout/footer-bg.gif) no-repeat;
	position: relative;
}

	#footer h2 {
		color: #cbdef3;
		font-size: 1.8em;
		text-shadow: 1px 1px 2px #483f51;
		margin-bottom: 5px;
	}
	
		#footer h2 span {
			font-size: 1.1em;
			text-transform: uppercase;
			color: #ffffff;
		}
		
	#footer li {
		list-style: none;
	}
	
	#footer a {
		white-space: nowrap;
		color: #cbdef3;
		text-decoration: none;
	}
		
		#footer a:hover {
			color: #ffffff;
		}
		
/* Footer Contact Styles
--------------------------------------------------------------- */	

	#footer #footer-contact {
		float: left;
		width: 355px;
		padding-left: 50px;
	}
	
	#contact #footer #footer-contact {
		visibility: hidden;
	}	
	
/* Footer Services Styles
--------------------------------------------------------------- */	

	#footer #footer-explore {
		float: left;
		width: 270px;
		margin: 0px;
	}
	
		#footer #footer-explore ul {
			float: left;
			margin-right: 30px;
			width: 100px;
		}	
		
			#footer #footer-explore ul li {
				float: left;
			}
		
				#footer #footer-explore ul li a {
					float: left;
					width: 90px;
					padding: 8px 5px 8px 0px;
					border-bottom: 1px dotted #5C6D87;
					font-size: 1.1em;
				}
		
/* Footer Address Styles
--------------------------------------------------------------- */	

	#footer #footer-social {
		float: left;
		width: 250px;
	}
		
		#footer #footer-social a {
			float: left;
			padding: 5px 25px 5px 0px;
			-moz-transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			opacity: 0.8;		
		}
		
		#footer #footer-social a:hover {
			opacity: 1;
		}
				
/* Footer Help & Advice
--------------------------------------------------------------- */	

	#footer #footer-help {
		float: right;
		width: 165px;
	}
		
			#footer #footer-help ul li {
				float: left;
			}
					
				#footer #footer-help ul li a {
					float: left;
					width: 155px;
					padding: 3px 5px;
					border-bottom: 1px dotted #777;
				}
		
		#footer #footer-help p {
			line-height: 20px;
			padding: 3px 5px;
		}
		
		#footer #footer-help .bottomLink {
			margin-bottom: 5px;
		}
		
/* Footer Bottom Styles
--------------------------------------------------------------- */	

	#footer #footer-bottom {
		color: #ffffff;
		position: absolute;
		right: 10px;
		bottom: 25px;
		float: left;
	}

/* Float Styles
--------------------------------------------------------------- */

.left, .img-left {
	float: left;
}

	.img-left {
		margin: 10px 10px 10px 0px;
	}

.right, .img-right {
	float: right;
} 

	.img-right {
		margin: 10px 0px 10px 10px;
	}

/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}