/*
COPYRIGHT 2008-2009 SAKR DESIGN
Version 1.1
*/



@import url(reset.css);




/* SET BODY ELEMENTS ----------------------------------------------------------- */

body {
    background-color:#080001;
    color:#777777;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:small;
    line-height:1.4em;
  
    }

/* SITE WRAPPER ---------------------------------------------------------------- */

#siteWrapper {
    margin:0 auto;
    width:100%;
    }
    
    
    
    
    
/* CONTENT WRAPPER TO ACTIVATE SCROLLING ----------------------------------------- */
		
.content   {
    min-height:300px; 
    }
    
    
    
    

/* SECTION CONTAINER ------------------------------------------------------------ */

.sectionContainerTopWelcome {
    height:865px;
    width:100%;
    display:block;
    background-image:url(../images/bgs/bgTop_index.jpg);
    background-repeat:no-repeat;
    background-position:center;
    }

  
  
/*
  
.sectionContainerOtherWeb, .sectionContainerOtherPrint, .sectionContainerOtherLogo, .sectionContainerOtherMulti {
	height:950px;
    width:100%;
    display:block;
	background-repeat:no-repeat;
    background-position:center;
	}
  
.sectionContainerOtherWeb {
    background-image:url(../images/bgs/bgOther_web.jpg);
    }
	
.sectionContainerOtherPrint {   
    background-image:url(../images/bgs/bgOther_print.jpg);
    }
	
.sectionContainerOtherLogo { 
    background-image:url(../images/bgs/bgOther_logo.jpg);
    }
	
.sectionContainerOtherMulti {
    background-image:url(../images/bgs/bgOther_multi.jpg); 
    }
  
  
*/
  
  
  
  
  
  
  
  
    
.sectionContainerOtherWeb {
    height:950px;
    width:100%;
    display:block;
    background-image:url(../images/bgs/bgOther_web.jpg);
    background-repeat:no-repeat;
    background-position:center;
    }
	
.sectionContainerOtherPrint {
    height:950px;
    width:100%;
    display:block;
    background-image:url(../images/bgs/bgOther_print.jpg);
    background-repeat:no-repeat;
    background-position:center;
    }
	
.sectionContainerOtherLogo {
    height:950px;
    width:100%;
    display:block;
    background-image:url(../images/bgs/bgOther_logo.jpg);
    background-repeat:no-repeat;
    background-position:center;
    }
	
.sectionContainerOtherMulti {
    height:950px;
    width:100%;
    display:block;
    background-image:url(../images/bgs/bgOther_multi.jpg);
    background-repeat:no-repeat;
    background-position:center;
    }


/* HEADER CONTAINER ------------------------------------------------------------ */
  
#headerContainer {
    margin:0 auto;
    padding:0;
    height:95px;
    width:800px;
    }
    
	#flags {
		height:20px;
		width:800px;
		text-align:right;
		padding-top:10px;
		}
	
    #logoContainer {
        height:55px;
        width:200px;
        float:left;
        }
        
        
 .headerContainerOther {
    margin:0 auto;
    padding:0;
    height:205px;
    width:800px;
    vertical-align:bottom;
    }      
        
        
        
        
/*  TOP NAVIGATION ----------------------------------------------------------------------------------------------------------- */

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	left:42px;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: 11px;
	line-height:28px;
    font-weight:bold;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-bottom: 1px solid #ee686a; /*--Divider for each parent level links--*/
}
ul#topnav li a {
	display: block;
	color:#ccc;
	text-decoration:none;
	border:none;
	padding:0 10px;
}
ul#topnav li:hover { border: none; text-decoration:none;}
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/
ul#topnav li a:hover { border: none; text-decoration:none; color:#ee686a; padding:0 10px;}


ul#topnav li.active {
	border-bottom:none; 
}
ul#topnav li a.active {
	color: #ee686a;
}

ul#topnav li span {
	float: right;
	padding:0;
	position: absolute;
	display: none; /*--Hide by default--*/
	color: #ccc;
	border: none;
	text-decoration: none;
}
ul#topnav li:hover span { display: block; text-decoration: none; border: none; padding-left:5px;} /*--Show subnav on hover--*/
ul#topnav li span a {text-decoration: none; border: none; float:left;} /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: none; color:#ee686a; border: none; }



ul#topnav li span.display {
	float: right;
	padding:0;
	position: absolute;
	padding-left:5px;
	display: block; 
	color: #ccc;
	border: none;
	text-decoration: none;
}




.mainNav {
    width:507px;
    float:right;
    color:#cccccc;
	padding-top:5px;
    }



 /* BODY DIVS  ------------------------------------------------------------ */       

.mainContainer {
	margin:0 auto;
	width:800px;
	height:450px;
	}
      
.showcaseContainer {
    margin:0;
    height:298px;
    width:798px;   
    border:1px solid #777777;
    }
   

.welcomeContainer {
	margin:0; 
    height:150px;
    width:800px;
    }
    
    .projectBox {
        height:148px;
        width:198px;
        float:left;
        border:1px solid #777777;
        background-color:#ffffff;
        }
	.projectBox3 {
        height:148px;
        width:199px;
        float:left;
        border-right:1px solid #777777;
		border-top:1px solid #777777;
		border-bottom:1px solid #777777;
        background-color:#ffffff;
        }
        
    .projectBoxEmpty {
        height:148px;
		width:198px;
		float:left;
        background-color:#ffffff;
        filter: alpha(opacity=20);
        -moz-opacity: 0.2;
        -khtml-opacity:0.2;
        opacity: 0.2;
        }
		
	.rowBox {
		height:-148px;
		width:198px;
		float:left;
		position:relative;
		border: 1px solid #777;
	}
     
   
     
     
/* BOTTOM NAVIGATION  ------------------------------------------------------------ */ 


.NavigationBottomContainer {
         margin:0 auto;
         height:220px;
         width:800px;
         }


.copyright {
	width:280px;
	font-size:70%;
	font-weight:bold;
	float:left;
	padding-top:5px;
	} 

.copyright2 {
	width:150px;
	font-size:70%;
	font-weight:bold;
	float:left;
	padding-top:5px;
	}  

       
.nav {
	float:right;
	width:200px;
	}
	

.row {
	clear:both;
	float:left;
	width:198px;
	position:relative;
	border: 1px solid #c7c9c9;
	}
	
.push1 {
	height:194px;
	* height:191px;
	}
	
.push2 {
	height:168px;
	* height:162px;
	}
	
.push3 {
	height:142px;
	* height:133px;
	}
	
.push4 {
	height:116px;
	* height:104px;
	}
	
.push5 {
	height:90px;
	* height:75px;
	}
	
.push6 {
	height:64px;
	* height:46px;
	}
	
.push7 {
	height:38px;
	* height:17px;
	}
	
.push8 {
	height:12px;
	* height:0;
	}


a.subnav {	
	display:block;
	padding:6px 15px 7px 10px;
	font-size:85%;
	text-decoration:none;
	text-align:right;
	color:#c7c9c9;
	font-weight:bold;
	font-style:normal;
	line-height:0.5em;
	}

a.subnav:visited {
	color:#c7c9c9;
	}

a.subnav:hover {
	color:#ffffff;
	}
	
a.subnav:active {
	color:#ffffff;
	}
	
.arrowDown {
    margin:3px 0 0 8px;
    padding:0; 
}

.arrowRight {
    margin:0 0 0 8px;
    padding:0; 
}

.arrowDownTXT {
    margin:3px 0 0 3px;
    padding:0;
}

.arrowRightTXT {
    margin:0 0 0 3px;
    padding:0; 
}

.arrowUpDown {
    margin:0 0 0 8px;
    padding:0; 
}
	

.bar {
	height: 2em;
	filter:alpha(opacity=20);
	-moz-opacity:0.2;
	-khtml-opacity: 0.2;
	opacity: 0.2;
	background: white;
}

h5.ontop {
	position: relative;
	margin-top: -2em;
}

h5.ontopUp {
	position: relative;
	margin-top: -2em;
	* margin-top: -2.2em;
}


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

a.button {
    display:block;
    color:#333333;
    height:24px;
    line-height:25px;
    margin:20px 0 0 0;
    text-decoration:none;
    width:90px;
    border:1px solid #666666;
    float:left;
    font-size:90%;
    background-color:#cccccc;

    }
    
    a:hover.button {
        color:#1a55aa;
        background-color:#bdd9fb;
        border:1px solid #3978c6; 
        }  
     

     

/* BUTTON ICONS ---------------------------------------------------------------- */

      
.add {
    background:url(../images/addIcon.png) no-repeat 5px 5px;
    text-indent:28px;
    display:block;
    } 



 .titleIndex {
     vertical-align:top;
     text-align:center;
     padding:10px 0 15px 0;
 }
 
 .imgIndex {
     margin:0;
     padding:0;
     vertical-align:bottom;
 }
 
 a.linktitleIndex {
    color:#7b1616;
     font-size:100%;
     font-style:normal;
     font-weight:bold;
     text-decoration:none;
	 padding:0;
	 margin:0;
 }

/* Titles for services section. Reduced it so the titles caan fight. ------------------------------------------------------------ */ 

 a.linktitleIndex-services {
    color:#7b1616;
     font-size:86%;
     /*font-style:normal;*/
     font-weight:bold;
     text-decoration:none;
	 padding:0;
	 margin:0;
 }
 
a.linktitleIndex:visited {
	color:#7b1616;
	}

a.linktitleIndex:hover {
	color:#777;
	}
	
a.linktitleIndex:active {
	color:#777;
	}
 

 
h1, .titleH1 {
 	color:#7b1616;
    font-size:120%;
    font-style:normal;
    font-weight:bold;
	line-height:1.2em;
	padding-bottom:5px;
	}
 
 h2 {
    color:#7b1616;
     font-size:110%;
     font-style:normal;
     font-weight:bold;
     text-decoration:none;
	 padding-bottom:8px;
 }
 
 .sectionTitle {
    height:35px;
    width:598px;
    float:left;
    vertical-align:bottom;
	padding-top:170px;
 }
 
 
 h4 {
    color:#ccc;
     font-size:170%;
     font-style:normal;
     font-weight:bold;
	 line-height:2em;
 }
 
 .toptxt {
     width:200px;
     padding:10px 0;
     float:left;
     color:#777777;
	font-weight:bold;
	font-style:normal;
	text-decoration:none;
 }
 
 h3, .titleH3 {
    color:#7b1616;
     font-size:150%;
     font-style:normal;
     font-weight:bold;
	 line-height:1.5em;
	 padding-left:10px;
 }
 
 .slideshow{
 	padding-left:10px;
	}

/* COPY  ------------------------------------------------------------ */ 	
	
h6 {
	color:#7b1616;
    font-size:100%;
    font-style:normal;
    font-weight:bold;
	line-height:1.5em;
	padding-bottom:5px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}


p {
	color:#555555;
	font-size:85%;
	line-height:1.4em;
	padding-bottom:5px;
	}
 
.bold {
 	font-weight:bold;
	padding-bottom:0;
	}
	
.white {
	color:#FFFFFF;
	}

.space {
	padding-bottom:15px;
	}
	
.linehight{
	line-height:1.1em;
	}
	



.welcome {
     vertical-align:top;
     text-align:left;
     padding:15px 20px 5px 20px;
	 width:358px;
	 height:128px;
	 background-color:#FFFFFF;
	 float:left;
 }
.welcome3 {
     vertical-align:top;
     text-align:left;
     padding:20px 20px 5px 20px;
	 width:558px;
	 height:123px;
	 background-color:#FFFFFF;
	 float:left;
	 border:1px solid #777777;
 }
 
 .profiles {
     vertical-align:top;
     text-align:left;
     padding:15px 40px 5px 40px;
	 height:128px;
     width:118px;
	 background-color:#FFFFFF;
	 float:left;
 }
 
 .imgProfileRow {
 	padding:5px 10px 0 12px;
	}
 
 .imgProfile1 {
	margin:0;
    padding-right:15px;
    vertical-align:bottom;
	float:left;
	}
	
.imgProfile2 {
	margin:0;
    padding:0;
    vertical-align:bottom;
	float:left;
	}
	
.TwitterProfiles {
     vertical-align:top;
     text-align:left;
     padding:15px 0 5px 0;
	 height:128px;
     width:198px;
	 background-color:#FFFFFF;
	 float:left;
	 font-size: 14px;
 }
 .imgTwitter {
	margin:0;
    padding-right:5px;
    vertical-align:bottom;
	float:left;
	}
	

 
a.linkText {
	color:#7b1616;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
 }
 
a.linkText:visited {
	color:#7b1616;
	}

a.linkText:hover {
	color:#777;
	}
	
a.linkText:active {
	color:#777;
	}
  
 
 /* Hover opacity ---------------------*/
 
 
.rowHover {
	clear:both;
	float:left;
	width:198px;
	height:148px;
	position:relative;
	border: 1px solid #777;
	}

a.boxHover {	
	display:block;
	padding:0;
	font-size:85%;
	text-decoration:none;
	text-align:right;
	color:#000;
	font-weight:bold;
	font-style:normal;
	line-height:0.5em;
	}

a.boxHover:visited {
	color:#000;
	}

a.boxHover:hover {
	color: #000000;
	height:148px;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background: #000000;
	}
	
a.boxHover:active {
	color:#000;
	}

.imgLink {
	border:0;
	text-decoration:none;
	}

a.footer {
    color:#ee686a;
     font-style:normal;
     font-weight:bold;
     text-decoration:none;
 }
 
a.footer:visited {
	color:#ee686a;
	}

a.footer:hover {
	color:#777;
	}
	
a.footer:active {
	color:#777;
	}

/* DIETER ------------------------------------------------------------ */
.black_holder {
	position:absolute;
	top:0px;
	width:160px;
	height:110px;
	display:none;
	/*padding:20px;*/
}

.black_holder .bg {
	position:absolute;
	width:197px;
	height:147px;
	background:#000;
	border:1px solid #ee686a;
	text-decoration:none;
	top:0px;
	left:1px;
	opacity:.8;
	filter: alpha(opacity = 80);
}

.black_holder p {
	position:absolute;
	color:#ccc;
	padding-right:20px;
}

.caruselLink {
	text-decoration: none;
}

.caruselLink .black_holder {
	position:absolute;
	z-index:10;
}

.caruselLink .black_holder  a {
	display: block;
	width: 158px;
	height: 110px;
	padding: 20px;
	text-decoration: none;
	color:#ccc;
}

.caruselLink img {
	position:absolute;
	z-index:5;
	
}

.titleBlackHolder {
	color:#ee686a;
    font-size:120%;
    font-style:normal;
    font-weight:bold;
	line-height:1.2em;
	padding-right:20px;
}

/* SOCIAL ----------------------- */


.addthis_button_compact {
	color:#ee686a;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
	text-align:right;
	font-size:80%;
 }

.addthis_default_style {
	float:left;
	width:280px;
	padding-top:5px;
}

/* BTNS ----------------------- */

.profileCTA {
     vertical-align:top;
     text-align:left;
     padding:15px 20px 5px 20px;
	 height:128px;
     width:158px;
	 background-color:#FFFFFF;
	 float:left;
 }

.btnIndex1 {
	padding-bottom:5px;
	height:22px;
	float:left;
	}

a.linkIndex1 {
	color:#7b1616;
    font-size:85%;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
	padding:5px 5px 2px 5px;
	/*margin:0 0 5px 0;*/
	line-height:1.1em;
	display:block;
	float:left;
	width:147px;
	height:15px;
	border:#777777 solid 1px;
	background-image:url(../images/arrowBTNright2.gif);
	background-position:right;
	background-repeat:no-repeat;
 }
.projectCopy a.linkIndex1 {
	color:#7b1616;
    font-size:85%;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
	padding:5px 5px 2px 5px;
	margin-right: 3px;
	/*margin:0 0 5px 0;*/
	line-height:1.1em;
	display:block;
	float:left;
	width:69px;
	height:15px;
	border:#777777 solid 1px;
	background-image:url(../images/arrowBTNright2.gif);
	background-position:right;
	background-repeat:no-repeat;
 }
 
 
a.linkIndex3_googlemap {
	color:#7b1616;
    font-size:85%;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
	padding:5px 5px 2px 5px;
	margin-right: 3px;
	/*margin:0 0 5px 0;*/
	line-height:1.1em;
	display:block;
	float:left;
	width: 90px;
	height:15px;
	border:#777777 solid 1px;
	background-image:url(../images/arrowBTNright2.gif);
	background-position:right;
	background-repeat:no-repeat;
 }

/* for Strategic plan */
.projectCopy a.linkIndex3 {
	color:#7b1616;
    font-size:85%;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
	padding:5px 5px 2px 5px;
	margin-right: 3px;
	/*margin:0 0 5px 0;*/
	line-height:1.1em;
	display:block;
	float:left;
	width:130px;
	height:15px;
	border:#777777 solid 1px;
	background-image:url(../images/arrowBTNright2.gif);
	background-position:right;
	background-repeat:no-repeat;
 }

 
a.linkIndex3 {
	color:#7b1616;
    font-size:85%;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
	padding:5px 5px 2px 5px;
	/*margin:0 0 5px 0;*/
	line-height:1.1em;
	display:block;
	float:left;
	width:147px;
	height:15px;
	background-color: white;
	border:#777777 solid 1px;
	background-image:url(../images/arrowDown.png);
	background-position:right;
	background-repeat:no-repeat;
 }
 
 


a.linkIndex1:visited {
	color:#7b1616;
	}
a.linkIndex1:hover {
	color:#777;
	}
a.linkIndex1:active {
	color:#777;
	}

.btnIndex2 {
	padding-bottom:5px;
	height:35px;
	float:left;
	}

a.linkIndex2 {
	color:#7b1616;
    font-size:85%;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
	padding:5px 5px 2px 5px;
	/*margin:0 0 5px 0;*/
	line-height:1em;
	display:block;
	float:left;
	width:147px;
	height:28px;
	border:#777777 solid 1px;
	background-image:url(../images/arrowBTNright1.gif);
	background-position:right;
	background-repeat:no-repeat;
 }
.projectCopy a.linkIndex2 {
	color:#7b1616;
    font-size:85%;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
	padding:5px 5px 2px 5px;
	/*margin:0 0 5px 0;*/
	line-height:1em;
	display:block;
	float:left;
	width:69px;
	height:15px;
	border:#777777 solid 1px;
	background-image:url(../images/arrowDown.png);
	background-position:right;
	background-repeat:no-repeat;
 }

a.linkIndex2:visited {
	color:#7b1616;
	}
a.linkIndex2:hover {
	color:#777;
	}
a.linkIndex2:active {
	color:#777;
	}

/* TWITTER ------------------- */

.twitter {
	padding:0 20px;
	}
	
.twitter2 {
	padding:0 20px;
	}


.twitter ul {
		list-style: none;
	}
		.twitter ul li {
			font-size:80%;
			font-weight:normal;
			line-height:1.2em;
		}
			.twitter ul li a {
				font-weight:normal;
				color: #777;
				text-decoration:none;
			}
				#twitter ul li a:hover { color: #777; }

		.twitter ul li span {
			font-size:80%;
			font-weight:normal;
		}
			.twitter ul li span a {
				color: #7b1616;
				text-decoration:none;
				font-weight:normal;
			}
			
/* home slider */
ul.slideshow {
	list-style:none;
	width:800px;
	height:300px;
	overflow:hidden;
	position:relative;
	margin:0;
	padding:0;
	
}	

ul.slideshow li {
	position:absolute;
	left:0;
	right:0;
}

ul.slideshow li.show {
	z-index:500;	
}

ul img {
	border:none;	
}


#slideshow-caption {
	width:798px;
	height:50px;
	position:absolute;
	bottom: 2px;
	left:0;	
	color:#fff;
	background:#333;
	z-index:500;
}

#slideshow-caption .slideshow-caption-container {
	padding:5px 10px;		
	z-index:1000;
}

#slideshow-caption h3 {
	margin:0;
	padding:0;	
	font-size:14px;
	color: #EE686A;
    font-size: 110%;
    font-weight: bold;
}

#slideshow-caption p {
	margin:0;
	padding:0;
	color: #EEEEEE;
    font-size: 85%;
    line-height: 1em;
}