/**********************************************************************************************
	Main Sections in CSS:
	
	1.	BASIC ELEMENTS
		Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
	
	2.	LAYOUT
		Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
		
	3.	PAGE COMMON STYLES
		Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc
	
	4.	PAGE SPECIFIC STYLES
		Define content styles that are specific to a particular page
	
***********************************************************************************************/


/* import core styles */
@import url(base.css);
@import url(thickbox.css);


/*------------------------------------------
// 1.BASIC ELEMENTS
//	 Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
//------------------------------------------*/

body { color:#666; background:#000; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }
body#order-form-body { background:url(../images/content/form-bg.gif) left top repeat-x; overflow:hidden; } 
div.autocomplete4 { position:absolute; width:500px; background-color:#fff; margin:0px; padding:0px; font-size:0.9em; text-align:left; max-height:60px; overflow:auto; color:#68756c; }
div.autocomplete4 ul { list-style-type:none; margin:0px; padding:0px; padding-left:4px;}
div.autocomplete4 ul li.selected {   background-color: #fff;  color:black; }
div.autocomplete4 ul li { list-style-type:none; display:block; margin:0; padding:2px; cursor:pointer; font-size:140%; }
.combo4 { margin: 0px 5px 10px 0px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:140%; width :266px; display :block; background: url('../images/content/select-box.gif') #fff top right no-repeat; height:21px;padding: 3px 5px 0px; cursor: pointer; border:0px; color:#68756c; }

/*------------------------------------------
// 2.LAYOUT
//   Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
//------------------------------------------*/
	
/*---- Container ----*/
div.wrapper { width: 940px; margin: 0 auto; padding:0px 10px; }

/*---- Header ----*/
div#header {background:#fff;}
div#header div.wrapper { padding:70px 0px 30px 0px; }

/*---- Content ----*/
div#content { background:#fff; }
div#content div.wrapper{ position:relative; }

/*---- Footer ----*/
div#footer div.wrapper{ padding:16px 0px 50px 20px; width:900px; position:relative; }


/*------------------------------------------
// 3. PAGE COMMON STYLES
//	  Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc
//------------------------------------------*/

/*---- Header - Logo ----*/
div#header h1, div#header h1 span,div#header a.logo,div#header a.logo span { display: block; width:224px; height:66px; overflow: hidden; text-decoration:none;  }

div#header h1,div#header a.logo { color: #666666; position: relative; }
	
div#header h1 span,div#header a.logo span  { position: absolute; top: 0; left: 0; z-index: 10; background:url(../images/header/logo.jpg) no-repeat; }

div#header a.logo span { cursor: pointer; }

/*---- Footer - Navigation ----*/
div#footer div.navigation{text-align:right; overflow:hidden; width:100%; margin-bottom:30px;}
div#footer div.navigation ul{float:right;}
div#footer div.navigation ul li { color:#bcbbba; padding-left:27px; text-transform:uppercase; display:inline;}
div#footer div.navigation ul li a{ color:#bcbbba;}

div#footer p{font-size:200%; line-height:24px; margin-bottom:10px; }


/*------------------------------------------
// 4 INDEX PAGE SPECIFIC STYLES
//------------------------------------------*/

/*---- Content ----*/
div#content h1{font-weight:normal;}
div#content h2{font-size:180%; font-weight:normal; line-height:1.2em; color:#333; margin-bottom:12px;}

/*---- Content - Services ----*/
div#content div#service { background:#fff;  overflow:hidden; width:100%; }

/*---- Content - Services - Microsites ----*/
div#content div#services div#microsites-heading {background-color:#9e9e9c;}
div#content div#services div#microsites-heading:hover,div#content div#services div#microsites-heading.selected { background-color:#7cf7fe;  color:#ccc; cursor:pointer;}
div#content div#services div#microsites-heading div.wrapper{ padding:0px; width:844px;}
div#content div#services div#microsites-heading div.wrapper h1 { padding:32px 0 42px 169px; }
div#content div#services div#microsites-content { background:#fff; overflow:hidden; width:100%; }

/*---- Content - Services - User ----*/
div#content div#services div#user-ex-heading {background-color:#5f5f5a;}
div#content div#services div#user-ex-heading:hover, div#content div#services div#user-ex-heading.selected { background-color:#fe8d32; color:#333; cursor:pointer;}
div#content div#services div#user-ex-heading div.wrapper{ padding:0px; width:814px;}
div#content div#services div#user-ex-heading div.wrapper h1 { padding:32px 0 42px 154px; }

div#content div#services h1{ font-size:240%; color:#fff; cursor:pointer; line-height:1.2em;}
div#content div#services p{ color:#666666; font-size:110%; line-height:14px; margin-bottom:20px; }

/*---- Content - Services - Xhtml ----*/
div#content div#services div#xhtml-heading{background-color:#cacac8;}
div#content div#services div#xhtml-heading:hover,div#content div#services div#xhtml-heading.selected { background-color:#bafb5e; cursor:pointer;  }
div#content div#services div#xhtml-heading div.wrapper{padding:0px; width:864px;}
div#content div#services div#xhtml-heading div.wrapper h1 { padding:32px 0 42px 180px; }

/*---- Content - Services - Xhtml - Services Offering ----*/
div#content div#services div.wrapper{ padding:40px 0px;}
div#content div#services div.wrapper div.service-offering{ width:219px; float:left; margin-right:20px; -moz-opacity:.2; opacity:0.2;}
div#content div#services div.wrapper div.service-offering:hover {-moz-opacity: 1;opacity:1;}

div#content div#services div.wrapper div.service-offering p.tagline{ margin-bottom:0px;}
div#content div#services div.wrapper div.service-offering ul{margin-bottom:20px;}
div#content div#services div.wrapper div.service-offering ul li{ background:url(../images/content/list-style.gif) left 4px no-repeat; padding-left:10px; font-size:110%; color:#666666; line-height:1.2em; margin-bottom:5px;}

/*---- Content - Services - Xhtml - Engagement ----*/
div#content div#services div.wrapper div.engagement { width:219px; float:left; margin-right:20px; }  
div#content div#services div.wrapper div.engagement div.wrap { -moz-opacity:.2;opacity:0.2; }
div#content div#services div.wrapper div.engagement div.wrap:hover { -moz-opacity: 1;opacity:1;}
div#content div#services div.wrapper div.engagement p{ margin-bottom:30px;}

/*---- Content - Services - Xhtml - Testimonials ----*/
div#content div#services div.wrapper div.testimonials{ width:219px; float:left; margin-right:20px; -moz-opacity:.2;opacity:0.2;}
div#content div#services div.wrapper div.testimonials p a{ text-decoration: none;color:#666;}
div#content div#services div.wrapper div.testimonials p a hover{ text-decoration: underline;color:#666;}
div#content div#services div.wrapper div.testimonials:hover { -moz-opacity: 1;opacity:1;}

/*---- Content - Services - Xhtml - Projects ----*/
div#content div#services div.wrapper div.projects{ width:219px; float:left; -moz-opacity:.2;opacity:0.2;}
div#content div#services div.wrapper div.projects:hover {-moz-opacity: 1;opacity:1;}
div#content div#services div.wrapper div.projects a{float:left; margin:20px 4px;}
div#content div#services div.wrapper div.projects img{border:1px solid #e2dfd6; vertical-align:bottom; padding:4px;}


/*---- Modal Box ----*/
div.modal-box { background:url(../images/content/form-bg.gif) left top repeat-x;  padding:16px 50px; height:100%;  overflow:hidden; }
div.modal-box h1 {font-size:240%; color:#fff; line-height:1.2em; font-weight:normal; margin-bottom:14px;}
div.modal-box h2 {font-size:180%; color:#fff; font-weight:normal; line-height:1.2em; margin-bottom:15px;}
div.modal-box a.cancel { float:right; }

div.modal-box div.form{clear:both; width:280px; float:left; margin-right:20px;}
div.modal-box div.form ul li{margin-bottom:4px;}
div.modal-box div.form ul li label{ font-size:140%; clear:both; line-height:1.2em; display:block; color:#fff; margin-bottom:5px;}
div.modal-box div.form ul li input.textbox{padding:3px 4px; width:268px; border:none; color:#68756c; font-size:140%; }
div.modal-box div.form ul li textarea{width:269px; border:none; padding:2px 4px;}


div.modal-box div.form ul li input.textbox-upload { }
div.modal-box div.form ul li input.textbox-arrow {width:245px; vertical-align:top; border:none; padding:4px 4px 4px 4px; color:#68756c; background-color:#fff; height:16px; }

div.modal-box div.form ul li input.button{font-size:240%; font-family:"Lucida Grande", "Lucida Sans Unicode", sans-serif; color:#fff; background:none; border:none; cursor:pointer;}

div.modal-box div.details { float:left; padding:10px 0px; width:276px;}
div.modal-box div.details p { color:#fff; font-size:160%; line-height:1.2em; margin-bottom:23px;}
div.modal-box div.details p a{color:#fff;}

div.modal-box div.quote h2{margin-bottom:0px;}
div.modal-box div.quote p{ font-size:140%;}

div.modal-box  small{ color:#fff; font-size:110%; line-height:1.2em;}

/*---- Footer----*/
div#footer img.footer-img { position:relative; }
div#slideshow { width:700px; overflow:hidden; height:250px; margin-top:70px; position:relative; }
div#contact-content, div#about-content{ width:500px;  padding-left:190px;}
div#contact-content p, div#about-content p { font-size:140%; line-height:16px; }
div#contact-content p,div#contact-content a { color:#666; }
div#contact-content p strong { color:#666; font-weight:normal;  }

/*------------------------------------------
// 5  Thank You PAGE SPECIFIC STYLES
//------------------------------------------*/
div#thanks h1 { font-size:300%; color:#FFF; margin-bottom:45px; line-height:18px; }
div#thanks h2 { font-size:180%; color:#FFF; margin-bottom:84px; line-height:26px; }
div#thanks p { font-size:140%; color:#FFF; margin-bottom:14px; line-height:18px; }
div#thanks p a { color:#FFF; }
div#thanks small { font-size:110%; color:#FFF; margin-bottom:14px; line-height:12px;  }