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

/* Author: copyright - Angelo Petsas - @ M/A */
/* Date: 04-04-2009 */

/*
Grey:		#999
*/

html, body { height: 101%; }

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

body { position: relative; background:#FFF;
font-family: Arial, Helvetica, Verdana, sans-serif;
color:#000; font-size:62.5%; }

a { color:#999; text-decoration:none; }
a:hover { color:#333; text-decoration:none; }
a img { border: 0; outline: none; }
ul, ol, li { list-style-position:inside; }
em { font-style: italic; }
strong { font-weight: bold; }


h1 { color:#333; font-size:18px; font-weight:normal; }
h2 { color:#333; font-size:20px; font-weight:bold; }
h3 { color:#333; font-size:14px;font-weight:bold; }
h4 { color:#999; font-size:12px; font-weight:bold; }
h5 { color:#333; font-size:12px; font-weight:bold;  }
h6 { color:#999; font-size:20px; font-weight:normal;letter-spacing:0px; /* 1px */  }
p { color:#999; font-size:12px; font-weight:normal; margin:0 0 13px 0; line-height: 15px; }
table { border-collapse:collapse; border-spacing:0; font-size:11px; }

/* FLOATS + HIDE */
hr { clear: both; height: 0; font-size: 1px; line-height: 0px; visibility: hidden; }
.hide {display:none; }
.clearfloat { clear:both;  height:0; font-size: 1px; line-height: 0px; }

/* BUFF STUFF */
button span {display: none;}
input, textarea, select { font: normal 11px/15px Arial, sans-serif; color: #3a3a35; }
button { display: block; cursor: pointer; }
label { font: normal 11px/15px Arial, sans-serif; color: #3a3a35; }


/* WRAPPER + STRUCTURE */
#wrapper { position:relative; width:940px; background:#FFF; margin:0 auto 0 auto; padding:0 0 50px 0; }
#topBlock { position:relative; width:940px; height:80px; padding:25px 0 0 0; margin:0 0 10px 0; }
#middleBlock { position:relative; width:940px; height:auto; margin:0 0 28px 0; }
#middleBlockProjects { position:relative; width:940px; height:auto; margin:0 0 30px 0; }
#middleBlockApproach { position:relative; width:940px; height:auto; margin:0 0 30px 0; }

/* LOGO */
#branding { position:relative; width:303px; float:left; margin:0 100px 0 0;  }
#branding h2 { color:#333; font-size:18px; font-weight:bold; }
#branding p { color:#333; font-size:11px; font-weight:normal; margin:0 0 0 0; }
#branding span { color:#333; font-weight:bold;}
#branding a { color:#333; text-decoration:none; border: none; }
#branding a:hover { color:#333; text-decoration:none; }
#branding img { border:none; margin:2px 0 0 0; }


/* MAIN NAVIGATION */
#navigation { position:relative; width:325px; list-style:none; float:left; padding:13px 0 0 0;
font-size:12px; font-weight:normal;  }
#navigation li { float:left; width:auto; margin:0 27px 0 0; }
#navigation a * { display:none; }
#navigation a, #navigation a .hover { position:relative; }

/* individual navigation items */
/* HOME */
#navigation a.home { background-position: 0 0; width:375px; }
#navigation .highlight a.home:hover, 
#navigation a.home .hover { background-position: 0 -70px; }

/* PROJECTS */
#navigation a.projects { background-position: -375px 0; width:105px; }
#navigation .highlight a.projects:hover,
#navigation a.projects .hover { background-position: -375px -140px; }

/* APPROACH */
#navigation a.approach { background-position: -480px 0; width: 105px; }
#navigation .highlight a.approach:hover,
#navigation a.approach .hover { background-position: -480px -140px; }

/* CONTACT */
#navigation a.contact { background-position: -585px 0; width: 105px; }
#navigation .highlight a.contact:hover,
#navigation a.contact .hover { background-position: -585px -140px; }

/* Active States (Body tag matchup) (Sprite Level 2) ( y = -70px ) */
.home #navigation .home { background-position: -0px -140px; z-index: 6; color:#000; }
.projects #navigation .projects { background-position: -375px -70px; z-index: 6; color:#000; }
.approach #navigation .approach { background-position: -480px -70px; z-index: 6; color:#000; }
.contact #navigation .contact { background-position: -480px -70px; z-index: 6; color:#000; }


/* PRELOADER */
#preloader { position:absolute; width:16px; top:52px; left:910px; }



/*=.= HOMEPAGE =.= */
#banner { position: relative; width:940px; height:auto; padding:0; margin:0;}

.blipBox { margin:0 0 10px 0; }
.blipBox img{ }
.blipBox p{ margin:0; font-size:11px;  }
.blipBox span{ font-size:11px; font-weight: bold;  }
.abox { float:left; width:33px;}
.bbox { float:left; width:265px;}

/*The box that contains the 3 columns */
.contentBox { width:940px; margin:0 0 0 0;}
.contentBox h1 { color:#999; font-size:14px; line-height:16px; font-weight:bold; margin:-1px 15px 5px 0; }
.contentBox h5 { color:#999; font-size:12px; font-weight:normal; margin:0 0 20px 0; }
.contentBox h5 span { color:#999; font-weight:bold;}
.contentBox h6 { color:#999; font-size:11px; font-weight:normal; margin:0; font-weight:bold; }

/*Columns*/
.left { width:300px; height:auto; float:left; }
.left strong{ color:#262626; }
.middle { width:300px; height:auto; float:left; margin: 0 20px 0 20px; }
.middle strong{ color:#262626; }
.right { width:300px; height:auto; float:left; }
.right strong{ color:#262626; }

.leftAlt { width:300px; height:auto; float:left; }
.leftAlt strong{ color:#999; }
.middleAlt { width:300px; height:auto; float:left; margin: 0 20px 0 20px; }
.middleAlt strong{ color:#999; }
.rightAlt { width:300px; height:auto; float:left; }
.rightAlt strong{ color:#999; }

.smallleft { width:235px; height:auto; float:left; }
.smallmiddle { width:235px; height:auto; float:left; margin: 0 20px 0 20px; }
.smallright { width:235px; height:auto; float:left; }

.contactright { width:940px; height:auto; float:left; }
.contactright h6 { color:#333; margin:27px 0 27px 0; font-weight: normal; line-height: 15px; font-size: 12px; }
.contactright h6 span{ color:#FF0000; }
 
/*=.= PROJECTS =.= */ 
.carousel { position:relative; width:940px; height:400px; padding:0; margin:0;}

/*Projects page variation */
.contentBoxProjects { width:940px; margin:0 0 23px 0; border-bottom: 1px solid #999; padding:0 0 27px 0;}
.contentBoxProjects h1 { color:#999; font-size:16px; line-height:21px; font-weight:bold; margin:-4px 15px 0 0; }
.contentBoxProjects h5 { color:#999; font-size:12px; font-weight:normal; margin:0 0 25px 0;  }
.contentBoxProjects h5 span { color:#333; font-weight:bold; }

.spacer { height:12px; }
.separator { border-bottom: 1px solid #999; padding:0 0 27px 0; }

#closeProject { position:absolute; top:-22px; left:0px; height:16px; width:200px; 
background:#ff000; font-size:11px; color:#999; }
#closeProject a {display:block; text-decoration:none; padding:2px 0 1px 20px; height:13px; background:url(../cssimages/buttons/close.png) 0 0 no-repeat;  }
#closeProject a:hover { background-position:0 -16px;  }

#projectLoaded { position:relative; }

.projectCategory { position:relative; width:940px; margin:0 0 18px 0; }
.projectCategory h5 { color:#999; font-size:11px; font-weight:normal; margin:0 0 27px 0; }
.projectCategory h5 span { color:#333; font-weight:bold; font-size:12px;}
.projectThumbs { position:relative; float:left; width:140px; margin:0 16px 13px 0; }
.projectThumbs img{ margin:0 0 2px 0; }
.projectThumbs p{ margin:0; font-size:11px;  }

/*Click thumbnials to view project... */
.projectHelper h5 { color:#999; font-size:11px; font-weight:normal; margin:0 0 29px 0; }
.projectHelper h5 span { color:#333; font-weight:bold; font-size:12px;}

/*=.= APPROACH =.= */ 
/*Approach page variation */
.contentBoxApproach { width:940px; margin:0 0 20px 0; padding:0 0 25px 0;}
.contentBoxApproach h1 { color:#999; font-size:16px; line-height:21px; font-weight:bold; margin:-4px 15px 0 0; }
.contentBoxApproach h5 { color:#999; font-size:11px; font-weight:normal; margin:0 0 20px 0;  }
.contentBoxApproach h5 span { color:#333; font-weight:bold; }


/*=.= CONTACT =.= */ 
 
.revealMap { font-family:Verdana, Helvetica, Arial, sans-serif; font-size:10px; color:#999; 
margin:0 0 10px 0; height:17px; padding:0 0 0 0; }
.revealMap ul { list-style:none; }
.revealMap ul li { margin:0 0 0 0;  }
.revealMap li a {display:block;  background:url(../cssimages/buttons/map.png) 0 0 no-repeat; padding:2px 0 3px 25px; height:12px; }
.revealMap li a:hover { background-position:0 -17px; }


/*=.=.=.=.=.=.=.=.=.=.=.=.=.=.=.=.=.=
 STYLES GALORE
=.=.=.=.=.=.=.=.=.=.=.=.=.=.=.=.=.=.= */ 

/* Global usage styles */
.global { position:relative; margin:20px 0 10px 0; }
.global h6 { margin:8px 0 0 1px; }
.global p { margin:3px 0 0 1px; }

.globalPushed { position:relative; margin:20px 0 10px 20px; }
.globalPushed h6 { margin:8px 0 0 1px; }
.globalPushed p { margin:3px 0 0 1px; }

/* Homepage Styles */
#cycleBanner { width:940px; height:460px; padding:0; margin:0;}
#cycle { width:940px; height:460px; }




/*-----------------------------*/
/* FORM ERRORS */

/* Contact page Inline Error */
#formContactInlineError { width:185px; border:1px solid #ccc; background:#E0FF00; margin:4px 0 10px 0; padding:5px 7px; color:#666; font-size:10px; text-transform:normal; font-weight: bold;  }
#formContactInlineError  span { font-size:11px; }
#formContactInlineError  ul li { list-style: none; }

#formContactInlineErrorLong { width:415px; border:1px solid #ccc; background:#E0FF00; margin:4px 0 10px 0; padding:5px 7px; color:#666; font-size:11px; text-transform:normal; font-weight: bold;  }
#formContactInlineErrorLong  span { font-size:10px; }
#formContactInlineErrorLong  ul li { list-style: none; }

/*-----------------------------*/




/*-------------------------------------------------
CONTACT FORM
-------------------------------------------------*/
/* The two colums for the forms rows - left + right */
.left_textinput { width:200px; margin:0 30px 0 0; float: left; }
.right_textinput { width: 200px; float: left; }

.formLeft { width:440px; float:left;  }
.formLeft h6 { margin:20px 0 0 0; }
.formLeft span { color:#E0FF00; }
.formRight { width:440px; float:left;  margin: -1px 0 0 20px; }


/* The ID that contains the form and all its properties */
#contactForm {font-family:Arial, Helvetica, sans-serif; color:#5c5c56; width:900px; float:left; margin:10px 0 0 0; }
#contactForm h3 { color:#00B0D8; margin:15px 0 0 0; }
#contactForm h3 a { color:#00B0D8; }
#contactForm h3 a:hover { color:#006881; }
#contactForm span { color:#E0FF00; }


/* Row + Label */
#contactForm .row { margin:0 0 10px 0;}
#contactForm .rowExtra { margin:0 0 13px 0;}
#contactForm .row label em { font-style:normal; padding-left: 3px; color:#E0FF00;}
#contactForm form label { font-size:11px; color:#999;  }

/* Select field */  
#contactForm form select { margin:1px 0 0px 0; font-size:11px; width:198px; height:26px; border:1px solid #ccc; background:#eeeeee; padding:2px 0 0 0;  }

/* Text field */  
#contactForm div.textinput { background: url(../cssimages/backgrounds/forms/textbox_200.png) 0 0 no-repeat;
height:26px; margin:0 0 0 0; }
#contactForm div.textinput input { background:none; width:188px; height:21px; padding:5px 6px 0 6px; border:none; }

/* Text area */  
#contactForm div.textarea { background: url(../cssimages/backgrounds/forms/text_area_200.png) 0 0 no-repeat;
height:83px; margin:0px 0 5px 0; }
#contactForm textarea { background:none; width:194px; height:79px; margin:2px 6px 5px 3px; border:none; }

/* Button */  
#contactForm button { background:url(../cssimages/buttons/confirm_sprite.png) 0 0 no-repeat; 
height:20px; width:60px; float:left; margin:0px 0 0 -2px; }
#contactForm button:hover { background-position: 0 -20px; }


/*-------------------------------------------------
FOOTER
-------------------------------------------------*/

#pageEnd { margin:50px 0 0 0; width:930px; border-top:1px solid #999; background:#FFF; padding:10px 10px 10px 0; height:30px; }
#pageEnd p{ font-size:11px; }
#pageEnd ul { list-style: none; }
#pageEnd li { float: left; font-size:11px; margin-right:27px; color:#999;}
#pageEnd li.push { margin-top:9px;}

.fZero { width:100px; float:left; margin:0; }
.fOne { width:260px; float:left; margin:13px 0 0 0; }
.fTwo { width:240px; float:left; margin:13px 0 0 0; }