/* Style Screen (Main Stylesheet) */

/* 
(C)2009 FIRSTBASEDESIGN / NORTH DESIGN CONSULTANTS

Created: Wed 25 Mar 2009
Author: Marc Remblance
Version: 1.0
*/


/* ----- Layout / Structure -----  */

* { 
	margin : 0;
	
	padding : 0;
	
	}
	

body {

	background: url(../images/background-image.gif) no-repeat #373434;
	
	background-position: 50% 0;
	
	height: 100%;
	
	font-family: Arial, Verdana, sans-serif;
	
	}
	
	
#wrapper {

	width: 937px;

	text-align: left;

	margin: 0 auto;

	}
	
	
#header {

	background-image: url(../images/header-image.png);

	width: 937px;
	
	height: 180px;

	}
	
	
#header img {
	
	display: block;
	
	}	
	
	
#mainContainer {

	float: left;

	width : 937px;

	background: url(../images/container.png) repeat-y;

	}

	
#content {

	float: left;

	width: 430px;

	padding: 15px 0 10px 45px;

	}
	

#largeImageContainer {

	float: left;

	background: url(../images/large-image-holder.png);
	
	width: 937px;
	
	height: 284px;
	
	}
	
	
#sidebar {

	float: right;
	
	width: 380px;

	padding: 4px 60px 0 0;
	
	margin: 5px 0 0 10px;

	}
	
#innerNews {

	width: 300px;

	margin: 0 40px 0 119px;

	padding: 0 10px 10px 10px;

	}
	
	
#footer {

	float: left;
	
	background: url(../images/footer-image.png);
	
	width: 937px;
	
	height: 123px;
	
	margin: 0;
	
	padding: 0;
	
	}
	

	
/* ----- Typography  -----  */


p {

	font-size: .7em;
	
	line-height: 1.6em;
	
	color: #f1f4a5;
	
	padding: 0 15px 10px 5px;
	
	margin: 15px 0 10px 0;

	}
	
	
h1 {

	padding: 5px 0 0 5px;
	
	font-family: Arial, Verdana, sans-serif;
	
	font-size: 1.1em;
	
	color: #f1f4a5;
	
	border-bottom: 1px dotted #336699;
	
	margin-bottom: 20px;
	
	}
	
h2 {

	padding: 5px 0 0 5px;
	
	font-family: Arial, Verdana, sans-serif;
	
	font-size: .9em;
	
	color: #f1f4a5;
	
	border-bottom: 1px dotted #cc3333;
	
	margin-bottom: 10px;
	
	}
	
h3 {

	padding: 5px 0 0 5px;
	
	font-family: Arial, Verdana, sans-serif;
	
	font-size: .7em;
	
	color: #f1f4a5;
	
	border-bottom: 1px dotted #cc3333;
	
	margin-bottom: 10px;
	
	}
	
h4 {

	padding: 5px 0 0 3px;
	
	font-family: Arial, Verdana, sans-serif;
	
	font-size: .8em;
	
	color: #f1f4a5;
	
	border-bottom: 1px dotted #cc3333;
	
	margin: 10px 0 0 95px;
	
	}
	
#solutionsList ul {
	
	}
	
#solutionsList li {

	font-size: .8em;

	color: #f1f4a5;

	padding: 0 15px 5px 5px;
	
	margin: 0 0 5px 20px;
	
	}
	
#processList {

	font-family: Georgia, "Times New Roman", Times, serif;
	
	font-size: 1.1em;
	
	color: #336699;
	
	padding: 0 15px 5px 5px;
	
	margin: 0 0 5px 30px;
	
	}
	
	
#processList p {

	font-family: Arial, Verdana, sans-serif;

	font-size: .7em;
	
	color: #f1f4a5;
	
	}
	
	
.northDC {

	color: #336699;

	}
	
.goBackLink {
	
	color: #336699;
	
	text-decoration: none;
	
	border-bottom: 1px dotted;
		
	}
	
.portfolioLinks {

	font-size: .7em;
	
	margin: 0;
	
	border-bottom: none;
	
	}
	
.portfolioLinks a {

	text-decoration: none;
	
	color: #cfd27b;

	border-bottom: 1px dotted;
	
	}
	
.portfolioLinks a:visited, .portfolioLinks a:hover {

	text-decoration: none;

	border-bottom: 1px dotted;

	}
	
.emailLinks {

	color: #f1f4a5;
	
	margin: 0;
	
	border-bottom: none;
	
	}
	
.emailLinks a {

	font-size: .7em;

	text-decoration: none;
	
	color: #cfd27b;

	border-bottom: 1px dotted;
	
	}
	
.emailLinks a:visited, .emailLinks a:hover {

	border-bottom: 1px dotted;

	}

	
#footerInformation  {
	
	padding: 50px 0 20px 0;

	margin: 0;
	
	padding: 60px 0 0 0;
	
	font-size: .6em;
	
	color: #fff;
	
	text-align: center;
	
	}

	
#footerInformation a {
	
	color: #f1f4a5;
	
	text-decoration: none;

	border-bottom: 1px dotted;
	
	}
	
#footerInformation a:visited, #footerInformation a:hover {
	
	color: #336699;
	
	border-bottom: 1px dotted;
	
	}
	
.sidebarThumbs {

	margin: 20px 0 0 11px;
	
	padding: 0;
	
	border: 1px solid #fff;
	
	}
	
	
/* ----- Image Banner  -----  */


.imageBanner {

	float: left;
	
	margin: 13px 0 0 24px;
	
	}
	

.holdingImage {

	float: left;
	
	margin: 13px 0 0 24px;
	
	}
	

/* ----- Header Image Slider  -----  */
	
	
#s3slider {
   
   float: right;
   
   width: 465px;
   
   height: 180px;
   
   position: relative;
   
   overflow: hidden;
   
   margin: 0 20px 0 0;

   }

#s3sliderContent {
   
   width: 465px;
   
   position: absolute;
   
   top: 0;
   
   margin-left: 0;

   }

.s3sliderImage {
   
   float: left;
   
   position: relative;
   
   display: none;

   }

.clear {
   
   clear: both;

   }
   
   
/* ----- Letterbox Image Slider  -----  */


#letterboxGallery {

	width: 889px; 
	
	height: 245px;
	
	margin: 13px 0 0 24px; 
   
	}
	
	
/* ----- Thumbnails  -----  */


.floatboxThumb {

	float: right;

	border: 1px solid #fff;
	
	}


/* ----- Main Navigation  -----  */


#nav {
	
	height: 60px;
	
	width: 937px;	
	
	margin: 0;
	
	padding: 0;
	
	border: 0;
	
	background: transparent;
	
	}
	
ul#menu{
	
	list-style:none;
	
	margin:0;
	
	padding:0;	
	
	}

#menu li,#menu li a {
	
	height:60px;
	
	position:relative;
	
	display:block;
	
	line-height:60px;
	
	border: 0;
	
	}

#menu li {
	
	float: left;
	
	display:inline;
	
	}

/* mac hide \*/
#menu li,#menu li a {overflow:hidden;}
/* end hide*/

#menu a {  /* how the 'no images' text looks */
	
	font-size: 0.8em;
	
	color: #fff;
	
	font-weight: bold;
	
	text-decoration: none;
	
	line-height: 0;
	
	text-align: center;
	
	}

#menu a:hover {
	
	text-decoration: underline;
	
	}

#menu li em {
	
	position:absolute;
	
	left:0;
	
	top:0;
	
	display:block;
	
	height:60px;
	
	cursor: pointer;
	
	border: 0;
	
	}


li#homeMenu a, li#homeMenu em {
	
	background: url(../images/home-button-states.png) no-repeat;
	
	background-position: 0 0;
	
	width: 145px;
	
	}

li#aboutMenu a, li#aboutMenu em {
	
	background: url(../images/about-button-states.png) no-repeat;
	
	background-position: 0 0;
	
	width: 143px;
	
	}

li#portfolioMenu a, li#portfolioMenu em {
	
	background: url(../images/portfolio-button-states.png) no-repeat;
	
	background-position: 0 0;
	
	width: 213px;
	
	}

li#servicesMenu a, li#servicesMenu em {
	
	background: url(../images/services-button-states.png) no-repeat;
	
	background-position: 0 0;
	
	width: 232px;
	
	}

li#contactMenu a, li#contactMenu em {
	
	background: url(../images/contact-button-states.png) no-repeat;
	
	background-position: 0 0;
	
	width: 204px;
	
	}

ul#menu li a:hover{visibility:visible}/* needed for ie to work*/

li#homeMenu a:hover em{background-position:0 -60px}
li#aboutMenu a:hover em{background-position:0 -60px}
li#portfolioMenu a:hover em{background-position:0 -60px}
li#servicesMenu a:hover em{background-position:0 -60px}
li#contactMenu a:hover em{background-position:0 -60px}

li#homeMenu a.active em{background-position:0 -60px}
li#aboutMenu a.active em{background-position:0 -60px}
li#portfolioMenu a.active em{background-position:0 -60px}
li#servicesMenu a.active em{background-position:0 -60px}
li#contactMenu a.active em{background-position:0 -60px}



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


#contactform {
	
	margin: 0;
	
	width: 480px;
	
	background: #6a6868;
	
	padding: 5px;

	}

#contactform * {
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	
	}

#contactform ol {
	
	margin: 0;
	
	padding: 0;
	
	list-style: none;

	}

#contactform li {
	
	margin: 0 0 5px 0;
	
	padding: 10px;
	
	background: #403a3a;

	}

#contactform li.buttons {
	
	margin: 0;
	
	overflow: hidden;

	}

#contactform label {

	font-size: .7em;
	
	color: #f1f4a5;
	
	margin: 0;
	
	width: 190px;
	
	display: block;
	
	float: left;
	
	padding: 5px 10px 2px 0;

	}

#contactform input.text {
	
	width: 274px;
	
	border: 1px solid #369;
	
	padding: 5px;
	
	margin: 0;
	
	color: #333;

	}

#contactform textarea {
	
	width: 274px;
	
	border: 1px solid #369;
	
	padding: 5px;
	
	height: 80px;
	
	background: #fdfdf7;
	
	color: #333;

	}

#contactform li.buttons input {
	
	padding: 4px;
	
	float: right;
	
	margin: 0 0 0 5px;
	
	width: auto;

	}