/*
      Created by Ibrar Hussain @ Freeman Holland Ltd
	  
	  E-Mail: ibrar@freemanholland.com
	  	  
*/

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

/********************************************
   LAYOUT
********************************************/ 

body
{ 
	font-family:Arial,Verdana, Helvetica, sans-serif; 
	font-size:11px;	
	color:#a7a4a4;
    background: #333 url('../../../../images/body.jpg') repeat-x;
}


p
{ 
	font-family:Arial,Verdana,   Helvetica, sans-serif; 
	font-size:11px; 
	padding:0px 0px 10px 0px; 
	margin:0; 
	color:#a7a4a4;
}

#client{
	width: 85px;
	margin-left:880px;	
	position:absolute;
	z-index:100;
}

#client h2{
	width: 110px;
	color:#a4cb38;
	font-size:12px;
}

#client a{
	color:#a4cb38;
	font-size:12px;
	text-decoration:underline;
}

#client a:hover{
text-decoration:none
}


#wrapper { 
 margin: 40px auto;
 width: 966px;
}
#inner-wrapper { 
border:2px solid #515151;
width:962px; /*966px; total with borders*/
overflow:hidden;
background: url(../../../../images/faux.jpg) repeat-y;
}

/********************************************
   HEADER
********************************************/ 

#main-header {
    width: 966px;
    height: 75px;
    position:relative;
}
#main-header h1 {
    width: 284px;
    left:-15px;
    position:absolute;
}
#main-header h1 a {
    float: left;
    width: 284px;
    height: 60px;
    background: url("../../../../images/logo_fh.png") top left no-repeat;
}

#navigation{float:right;display:inline;clear:right}

.chromestyle {
    width:674px;
    font-weight: bold;
    float:right;
}
#main-header ul.nav {
    float: right;
    list-style-type: none;
    width: 674px;
    margin: 45px 0 -4px 0px;
    height:30px;
    margin-right:-66px;
    margin-bottom:-9px;
}
#main-header ul.nav li {
    float: left;
    position: relative;
    display: block;
    background: none;
    padding: 0px;
    height:30px;
}

#main-header ul.nav li a {
    float: left;
    height: 28px;
    padding: 0px 0px 0px 4px;
    display: block;
    text-transform:uppercase;
    color:#fff;
    background:url('http://www.freemanholland.com/images/glyph.jpg') no-repeat 100% -5px;
}
/********************************************
   HEADER - NAV
********************************************/ 

ul.nav li.btnHome a {width: 79px;margin-top:6px;}
ul.nav li.btnAboutUs a {width: 80px;margin-top:6px;}
ul.nav li.btnWhatsNew a {width: 110px;margin-top:6px;}
ul.nav li.btnPortfolio a {width: 114px;margin-top:6px;}
ul.nav li.btnServices a {width: 98px;margin-top:6px;}
ul.nav li.btnContactUs a {width: 106px;margin-top:6px;}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
width: 100%;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
text-decoration: none;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #322d29; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: black;
width: 200px;
visibility: hidden;
background:url('../../../../images/back.png');
margin-top:-3px;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #322d29; /*THEME CHANGE HERE*/
padding: 4px;
text-decoration: none;
color: #99cc33;
font-size:11px;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
color: #fff;
}

/********************************************
   LEFT COLUMN
********************************************/ 

#leftcolumn { 
 color: #fff;
 width: 689px;/*706px total with padding*/
 float: left;
 margin-top:268px;
 padding:10px;
 /*height:420px;*/
 background-color:black;
 padding-left:11px; /*was 15px (adjust to #inner-wrapper 4px side borders*/
}
#leftcolumn h1{ 
font-size:20px;
height:28px;
font-weight:normal;	
line-height:17px;
}

#leftcolumn h2{
color:#99cc33; 
}

#leftcolumn h2 a{ 
color:#99cc33; 
text-decoration:underline;
}

#leftcolumn h2 a:hover{ 
text-decoration:none;
}

#leftcolumn a{ 
color:#99cc33; 
text-decoration:underline;
}

#leftcolumn a:hover{ 
text-decoration:none;
}


#leftcolumn p
{ 
	font-family:Arial,Verdana,   Helvetica, sans-serif; 
	font-size:11px; 
	padding:0px 0px 10px 0px; 
	margin:0; 
	color:#fff;
	line-height:17px;
}

.border{ 
border-bottom:1px solid #99cc33;
margin-top:8px;
}

.link{
	float:right;
		color:#99cc33;
}

.link a{
	color:#99cc33;
	text-decoration:underline;
}

.link a:hover{
text-decoration:none;
}

#left-content{
	float:left; 
	width: 458px;
}

#left-content ul{
padding:6px;
margin-left:11px;
line-height:17px;
list-style:square;
}

#left-content a{
color:#99cc33;
text-decoration:underline;
}


#left-content a:hover{
text-decoration:none;
}

#left-content ul a{
color:#99cc33;
text-decoration:underline;
}


#left-content ul a:hover{
text-decoration:none;
}

.bullets-left{
	 float:left; 
	 width: 185px;
	 margin-left:3px;
}

.bullets-right{
	float:right; 
	width: 232px;
}

.green{
	color:#99cc33;
}
#right-content{
	float:right; 
	width: 214px; 
}

#sponsors{
	position:absolute;
	width:214px;
	margin-top:232px;
}

#sponsors a{
	float:right; 
	color:#99cc33;
	text-decoration:underline;
	margin-top:5px;
}


#sponsors a:hover{
text-decoration:none;
}

#sponsors img{
border:0;
margin-right:10px;
margin-top:5px;
}

.pages{
	border-bottom:1px solid #99cc33;
}

 .no-jquery{
  width:710px;
  height:249px;
  position:absolute;
 }

/********************************************
   JQUERY IMAGES
********************************************/ 

div#header{
 color: #333;
 width: 486px;
 float: left;
}
div#video-header{
 height:483px;
}
 div#header div.wrap{
  background:url("../../../../jQuery/header-bg.png") 50% 0 no-repeat;
 }
 div#header div#slide-holder{
  z-index:40;
  width:710px;
  height:249px;
  position:absolute;
 }
  div#header div#slide-holder div#slide-runner{
   width:710px;
   height:270px;
   overflow:hidden;
   position:absolute;
   margin-left:0px;
   margin-top:0px;
  }
  div#header div#slide-holder img{
   margin:0;
   display:none;
   position:absolute;
   border:0;
  }
  div#header div#slide-holder div#slide-controls{
   top:50px;
   bottom:228px;
   width:710px;
   height:46px;
   display:none;
   position:absolute;
   background:url("../../../../jQuery/slide-bg.png") 0 0;
  }
   div#header div#slide-holder div#slide-controls p.text{
    float:left;
    color:#fff;
    display:inline;
    font-size:10px;
    line-height:16px;
    margin:15px 0 0 20px;
    text-transform:uppercase;
   }
 
   div#header div#slide-holder div#slide-controls p#slide-nav{
    float:right;
    height:24px;
    display:inline;
    margin:11px 15px 0 0;
    color:#fff;
   }
    div#header div#slide-holder div#slide-controls p#slide-nav a{
     float:left;
     width:24px;
     height:24px;
     display:inline;
     font-size:11px;
     margin:0 5px 0 0;
     line-height:24px;
     font-weight:bold;
     text-align:center;
     text-decoration:none;
     background-position:0 0;
     background-repeat:no-repeat;
     color:#fff;
    }
    div#header div#slide-holder div#slide-controls p#slide-nav a.on{
     background-position:0 -24px;
    }
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url("../../../../jQuery/silde-nav.png");}
div#nav ul li a{background:url("../../../../gavin/jQuery/nav.png") no-repeat;}


/********************************************
   RIGHT COLUMN
********************************************/ 

#rightcolumn { 
 float: right;
 color: #fff;
 background: #333333;
 margin-top:0px;
 width: 252px;
 display: inline;
}

#rightcolumn h1{ 
/**background:url('images/heading.jpg');**/
border-bottom:2px solid #99cc33;
font-size:20px;
color:#fff;
padding:10px;
padding-top:10px;
width: 229px; 
height: 21px;
float:right;
margin-bottom:14px;
font-weight:normal;
padding-left:0px;
}

#rightcolumn ul{ 
color:#fff;
padding:15px;
padding-left:20px;
list-style:none;
}

#rightcolumn a{
color:#99cc33;
text-decoration:underline;
}

#rightcolumn a:hover{
text-decoration:none;
}


#rightcolumn span{
color:#99cc33;
}

#rightcolumn p{
color:#fff;
}


/********************************************
   PORTFOLIO
********************************************/ 

.gallery {overflow:hidden;width:685px;margin:auto;margin-top:10px;}
.gallery div {float:left; width:220px; margin:auto;padding-bottom:25px;text-align:center;height: 144px;margin-right:5px;margin-bottom:10px;}
.gallery div img {display:block;border:2px solid #c0c0c0;margin:auto;}
.gallery div span{font-size:11px}


/********************************************
   FOOTER
********************************************/ 

#footer 
{
	word-spacing:2px;
	padding:0px;
	width:966px;
	float: left;
	margin-top: 10px;
	color:#fff;
	line-height:17px;
}

#footer a{color:#99cc33;text-decoration:underline !important}
#footer a:hover {color:#99cc33;text-decoration:none!important}

.left{
	float:left;
}

.right{
	float:right;
	width: 524px;
	text-align:right;
	text-transform:uppercase;
	font-weight:bold;
}

#footer span{
color:#99cc33;
}

/********************************************
   LIGHTBOX
********************************************/ 

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../../../../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../../../../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }