/* HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure, time, canvas, details, figcaption, hgroup, menu, summary {
	display: block;
}
/* ---------------------------------------------- Fonts ------------------------------------------------- */

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

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

}

/*  FONTS - 'odstemplikRegular'   */

/*  COLORS -  dk yellow - e4e879   lt yellow - ededbb    cream - f4f1ec  teal - 99e0df      */

/* --------------------------------------------- Global ------------------------------------------------- */
*{
    margin:0;
    padding:0;
}

body { font-family:'BertholdScriptRegular'; font-size: 1em; margin:0px; background-color:#FFF;
background-image:url(../images/background-stripe_3a.png);
	background-attachment:		fixed;
}

a {	color:#fff; text-decoration:none;	}

img { border:0px;	}

h1 { font-size:1.5em; font-family:'odstemplikRegular'; color:#000; margin:-10px 0px -20px 5px; }
.work h1 { color:#208E8E; } .services h1 { color:#00b1b0; } .clients h1{ color:#23bebd; }
.about h1  { color:#72cbcc; } .contact h1{ color:#a2dada; }

.periods { font-size:40px; color:#333; } .periods2 { font-size:40px; color:#373737; } 
.periods3 { font-size:40px; color:#353535; } .periods4 { font-size:40px; color:#585858; }
.periods5 { font-size:40px; color:#979797; }

h2 { font-family:Arial; font-size:.6em; color:#666; padding:15px 0px 0px 10px;}

p { font-family:Arial; font-size:.3em; line-height:.9em; color:#666; margin:10px 0px 0px 10px; width:200px; }
nav ul {
	font-size:.95em;
}

ul { list-style:none; margin:0px 0px 0px 50px; font-family:Arial; font-size:.55em; color:#666; }

section ul .services{ list-style:circle;
margin-bottom:-10px; }

li { margin-left:-5px; line-height:1.5em; }



/* --------------------------------------------------- Header z 3000 ------------------------------------------------- */
header {
	position:fixed;
	margin:0px 0px 0px 0px;
	z-index:3000;	
	width:100%
}
#bar {
	position:fixed;
	top:0px;
	left:0px;
	min-height:17px;
	background-color:#000;
	display:block;
	width:100%;
}

header img {
	position:fixed;
}

#logo {
	position:fixed;
	top:-1px;
	z-index:30;
}
#logo img {
	width:90px;
	height:40px;
}

/* ---------------------------------------------- Aside ----- social z-index 1000  ---nav z-index 20-------------------- */

aside  {
	position:fixed;
	width:55px;
	min-height:700px;
	background-image:url(../images/background-stripe_2.png);
	background-attachment:fixed;
	border-right: 1px dashed #ECECEC;
}

#social {
	z-index:1000;
	opacity:0.7;
	-moz-opacity:0.8;
	-webkit-opacity:0.8;
}
#social a {
	position:fixed;
	display:block;
	border-radius:100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
}
#social   a:hover, a:focus {
	box-shadow: 15px 10px 200px #a6dddd;
	-moz-box-shadow: 15px 10px 200px #a6dddd;
	-webkit-box-shadow: 20px 10px 200px #a6dddd;
	background-color:#13b6b6;
}
.behance a {
	bottom:60px;
	left:17px;
	min-height:24px;
	min-width:24px;
	background-color:#4fa6a6;
}
.behance img {
	opacity:0.5;
	height:15px;
	width:15px;
	margin:5px 0px 0px 5px;
}
.dropr a {
	bottom:40px;
	left:28px;
	min-height:20px;
	min-width:20px;
	background-color:#4fcbca;
}
.dropr img {
	margin:3px 0px 0px 5px;
	opacity:0.5;
	height:11px;
	width:11px;
}
.linkedin a {
	bottom:25px;
	left:18px;
	min-height:20px;
	min-width:22px;	
	background-color:#4fcbca;
}
.linkedin img {
	margin:0px 0px 2px 6px;
	opacity:0.5;
	height:9px;
	width:9px;
}
.twitter a {
	bottom:13px;
	left:35px;
	background-color:#85d3d4;
	min-height:20px;
	min-width:22px;	
}
.twitter img {
	margin:0px 0px 2px 7px;
	opacity:0.5;
	width:9px;
	height:9px;
}
.email a {
	bottom:-5px;
	left:17px;
	background-color:#a6dddd;
	min-height:25px;
	min-width:25px;	
}
.email img {
	margin:6px 0px 0px 6px;
	opacity:0.5;
	height:12px;
	width:12px;
}
.connectors img {
	display:none;
}

nav {
	position:fixed;
	margin-left:0px;
	padding-left:150px;
	top:170px;
	z-index:20;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-right:none;
}

nav a {
	position:fixed;
	display:block;
	font-family:'odstemplikBold';
	font-size:1.4em;
	min-height:.2em;
	line-height:1em;
	background-color:#e4e879;
	color:#ffffff;
	box-shadow:-1px -1px 3px #d0d0d0;
	-moz-box-shadow:-1px -1px 3px #d0d0d0;
	-webkit-box-shadow: -1px -1px 3px #d0d0d0;
}

nav a:visited, a:active {
	background-color:#e4e879;
	min-height:.2em;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
}
nav a:hover, a:focus  {	
	background-color:#e4e879;
	min-height:.2em;
	box-shadow: 5px 5px 30px #e4e879;
	-moz-box-shadow: 5px 5px 30px #e4e879;
	-webkit-box-shadow: 5px 5px 30px #e4e879;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
}
nav .nhome {
	top:45px;
	left:0px;	
	padding:1px 2px 0px 2px;
}
nav .nwork {
	top:72px;
	left:0px;	
	padding:1px 2px 0px 2px;
}
nav .nservices {
	top:99px;
	left:0px;	
	padding:1px 1px 0px 0px;
}
nav  .nclients {
	top:126px;
	left:0px;	
	padding:1px 2px 0px 2px;
}
nav  .nabout {
	top:153px;
	left:0px;	
	padding:1px 2px 0px 2px;
}
nav  .ncontact {
	top:179px;
	left:0px;	
	padding:1px 2px 0px 2px;
}
/* -------------------------------------------- Sections/Pages ------------------------------------------------- */

section {
	margin:0px 0px 0px 65px;
	float:left;
	text-shadow:1px 1px 2px #f0f0f0;
	z-index:1;
	min-width:230px;
	background-color:#FFF;
	box-shadow: 1px 1px 5px #666;
	-moz-box-shadow:  1px 1px 5px #666;
	-webkit-box-shadow: 1px 1px 5px #666;
}

/* -------------------------------------------- Intro ------------------------------------------------- */
#intro {
	margin-top:0px;
}

#introbg {
		display:none;
}

#intro h1 {
	display:none;
	}

#intro h1 .small {
	font-size:.43em;
	color:#ea6d8f;
}

#intro p {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:.70em;
	font-style:italic;
	color:#999;
	width:200px;
	line-height:1.2em;
	margin:-30px 0px 10px 10px;
	padding-bottom:0px;
	clear:both;
	letter-spacing:.05em;
}


/* -------------------------- Sections --------------------------------- */

.home {
		padding-top:38px;
		height:110px;
}
.bghome {
	margin-top:10px;
	clear:both;
}
.work {
	height:405px;
	width:230px;
	margin-top:28px;
}
.bgwork {
	margin-top:10px;
	clear:both;
	height:240px;
	border-top: 1px dashed #ECECEC;
}
.services {
 	height:272px;
	margin-top:29px;
	width:230px;
}
.bgservices {
	border-top: 1px dashed #ECECEC;
	margin-top:10px;
	padding-top:0px;
	clear:both;
	min-height:190px;
}
.clients {	
	    height:145px;
		width:230px;
		margin-top:13px;
}
.pgclients {
	border-top: 1px dashed #ECECEC;
	margin-top:0px;
	clear:both;
	min-height:245px;
}
.about {	
	    height:480px;
		width:230px;
		margin-top:28px;
}
.bgabout {
	border-top: 1px dashed #ECECEC;
	clear:both;
	min-height:470px;
	margin-top:10px;
}
.contact {
	height:350px;
	width:200px;
	margin-top:19px;
	margin-bottom:20px;
}
.bgcontact {
	border-top: 1px dashed #ECECEC;
	padding-top:10px;
	clear:both;
	min-height:220px;
}

/* -------------------------- Portfolio Divs --------------------------------- */

#portfolio1 { float:left; width:220px; margin:15px 30px 0px 13px; }

#portfolio2 { float:left; width:220px; margin:0px 30px 0px 13px; }

#portfolio3 { float:left; width:220px; margin:15px 30px 0px 13px; }

.portfolio {
	margin-bottom:15px;
	color: #000;
	box-shadow: 1px 1px 5px #666;
	-moz-box-shadow:  1px 1px 5px #666;
	-webkit-box-shadow: 1px 1px 5px #666;
	width:65px;
	vertical-align:top;
}
.portfolio a:hover {
	margin-bottom:15px;
	color: #000;
	box-shadow: 1px 1px 3px #fff;
}

/* -------------------------- Client Logos --------------------------------- */

#logos1, #logos2, #logos3 { clear:left; margin:20px 0px 0px 20px;}

#logos2 {margin-top:50px;}
#logos3 {margin-top:105px;}

#logos1 li, #logos2 li, #logos3 li { float:left;}


.bcbs {margin-right:0px; width:64px; height:15px;} 
.scudder {margin-left:21px; width:52px; height:13px;}
.abbott {margin-left:22px; width:42px; height:12px;}

.studiof {margin-left:10px; width:44px; height:35px;}
.socrates {margin-left:33px; width:44px; height:37px;}
.chartprophet {margin-left:30px; padding-top:2px; width:41px; height:35px;}

.clandlord {margin-left:0px; width:65px; height:8px;}
.department {margin-left:18px; width:55px; height:9px;}
.rentslicer {margin-left:17px; width:51px; height:7px;}

/* -------------------------- Contact Form --------------------------------- */

.contact form {
	font-family:'odstemplikRegular';
	font-size:.7em;
	height:130px;
	color:#333;
	margin-bottom:0px;
	padding-bottom:0px;
	margin-top:10px;
	margin-left:10px;
} 

section .contact {
	margin-bottom:10px;
}

#large {
	display:none;
}

/* ------------------------------------------------ Footer ------------------------------------------------- */

footer {
	display:block;
	width:100%;
	background-image:url(../images/background-stripe_2.png);
}

footer img {
	bottom:0px;
	float:right;
	margin-right:0px;
	width:200px;
	height:40px;
}