/* CSS Document */

body{
	margin: 0px;
	padding: 0px;
	font: 11px Georgia;
	background: url(../gfx/bgRepeat.jpg);
	background-position: top left;
	background-repeat: repeat;
	background-attachment: fixed;
}

h1{	font: 42px Georgia; color: #cc092f; margin-top: 0px;}
h2{	font: bold 30px Georgia; color: #cc092f; margin-top: 0px;}
h3{	font: 21px Georgia; color: #cc092f; margin-top: 0px;}
h4{	font: bold 16px verdana; color: #45719b; }
h5{	font: bold 14px verdana; color: #45719b; }
h6{	font: bold 12px verdana; color: #45719b; }

/* MAKES ALL BROWSERS HANDLE HEADINGS AND PARAGRAPHS THE SAME, USE AT YOUR DISCRETION */
/*h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 6px 0; }*/

.clear{	clear: both; }
.left{ float: left; }
.right{ float: right; }
.red{ color: #cc092f; }
img{ border: none; }
button { cursor: pointer; }

form, fieldset, legend{ margin: 0; padding: 0; }
fieldset{ border: none; }
legend{ display: none; }
.nobg{ border: none; background: none; }

a{
	color: #666666;
	text-decoration: none;
}

a:focus{ outline: 0;}


a:hover{
	text-decoration: underline;
}

/* CSS TRANSPARENCY, THIS INVALIDATES THE STYLESHEET, USE AT YOUR DISCRETION */
/*a:hover img{ opacity: 0.8; filter: alpha(opacity=80); -moz-opacity:0.8; }*/

/* input[type=""] DOES NOT WORK IN IE6 */
input[type="checkbox"], input[type="radio"]{ border: none; width: auto; background: none; }

/*
input, textarea{
	background: white;
	border: solid 1px #797979;	
	font-family: Georgia, sans-serif;
}
*/

input, textarea {
	font-family: Georgia, sans-serif;
	border: 0px;
}

input.submit{
	width: 100px;
	background: white;
	height: 24px;
}



.box{
	width: 989px;
	margin: 0 auto;
}

#header{
	height: 135px;
	background: white;
}

#header a#logoFhoke{
	background: url(../gfx/logoFhoke.gif) no-repeat;
	background-position: bottom left;
	float: left;
	width: 253px; /* 62px */
	height: 80px;
	display: block;
	position: relative;
	top: 35px;
}

#header a#logoMail{
	background: url(../gfx/logoMail.gif) no-repeat;
	float: left;
	width: 62px; /* 62px */
	height: 135px;
	display: block;
}

#headerRight{
	width: 674px;
	float: right;
	height: 69px;
	padding-top: 66px;
}

#headerRight ul, #headerRight li{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#headerRight ul{ float: right; }

#headerRight ul li{
	float: left;
	padding-top: 35px;
}

#headerRight ul li a{
	padding: 0px 15px;
	color: #cc092f;
	font: bold 16px Georgia;
}

#headerRight ul li a:hover{
	text-decoration: none;
}

#headerRight ul li.navOn a span {	
	border-bottom: 3px solid #CC092F;
}
#transparentTop{
	background: url(../gfx/transparentTop.png) no-repeat center;
	margin: 0 auto;
	height: 23px;	
}
	
#introduction{
	clear: both;
	padding: 5px 20px 0px 18px;
}

#introduction a{
	color: #cc092f;
	text-decoration: none;
	float: right; 
	font: 14px Georgia; 
	font-weight: bold; 
	font-style: italic;
	margin-top: 28px;
}

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

#introduction h1{ line-height: 50px; }



#introductionContact{
	clear: both;
	padding: 5px 20px 0px 18px;
}

#introductionContact a{
	color: #cc092f;
	text-decoration: none;
}

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

#introductionContact h1{ line-height: 50px; }



#mainArea{
	clear: both;
	border-top: solid 5px #cc092f;
	background: white;
	padding: 20px;
	width: 949px;
	overflow: hidden;
	font: 14px georgia;
	color: #6e6e6e;
	line-height: 20px;
}

#mainArea a, #blog a{ 
	font: bold 14px Georgia; 
	color: #cc092f;
	padding-top: 10px;
}

#mainArea h3{ 
	padding: 0px;
	margin: 0px;
}

.underline {
	clear: both;
	border-top: solid 1px #D9D9D9;
	margin-bottom: 20px;
}

.pagination{
	clear: both;
	border-top: solid 1px #d9d9d9; 
	border-bottom: solid 1px #d9d9d9; 
	height: 34px;
	margin-bottom: 20px;
	padding: 15px 0px 0px 0px;
}

.paginationLeft{
	float: left;
	width: 617px;
	font-weight: bold;
}

.pagLeftL{
	float: left;
	width: 327px;
}

.pagLeftR{
	float: right;
	width: 290px;
	text-align: center;
}

.paginationRight{
	float: right;
	width: 332px;
	text-align: right;
}

#blog .paginationLeft {
	width: 70%;
}

#blog .paginationRight {
	width: 30%;
}

#blog .pagLeftL {
	width: 53%
}

#blog .pagLeftR {
	width: 47%;
}

.mainAreaLeft{
	float: left;
	width: 618px;
}


#mainArea h2{ 
	font-style: italic; 
	margin-bottom: 0px;
	padding-bottom: 10px;
}

.mainAreaLeftL{
	float: left;
	width: 290px;
}


.mainAreaLeftR{
	float: right;
	width: 290px;
	margin-left: 38px;
}

.mainAreaRight{
	float: right;
	width: 293px;
	margin-left: 38px;
}


.portfolioImages{
	clear: both;
	width: 949px;
	overflow: hidden;
	margin-bottom: 20px;

}

.portfolioImages a:hover h3{ text-decoration: underline; }

.portfolioImages img{
	padding-bottom: 15px;
	background: url(../gfx/exampleImageFade.gif) no-repeat bottom;
}

#workIn{
	clear: both;
	font-size: 20px;
	line-height: 22px;
}

#workInLeft{
	float: left;
	width: 690px;
	margin-right: 35px;
}

#workInLeft a{
	font: 18px georgia;
	color: #6e6e6e;

}

#workInRight{
	float: right;
	width: 224px;
}

#workInRight a{
	line-height: 18px;
	text-decoration: none;
}
 
#workInRight h2{
	font: bold 14px Georgia; 
	color: #cc092f;
	line-height: 18px;
	display: inline;
} 

#blog{
	clear: both;
}

#blogMain {
	float: right;
	clear: none;
	width: 716px;
}

.blogDivide{
	color: #6e6e6e;
	padding: 10px;
	background-color: #e5e5e5;
}

#blogSidebar {
	width: 243px;
	float: left;
	clear: none;
}

.blogLeft{
        float: left;
	clear: both;
        width: 243px;
        margin-right: 30px;
}

.blogLeftIn{
        border-top: solid 5px #cc092f;
        background: white;
        overflow: hidden;
        font: 14px georgia;
        color: #6e6e6e;
        line-height: 20px;
        padding: 20px;
}

.blogLeftIn h3 {
	font-style: italic;
	font-size: 20px !important;
	font-weight: bold;
	margin-bottom: 5px;
}

.blogLeftBottomFade{
        clear: both;
        float: left;
        background: url(../gfx/blogLeftBottomFade.png) no-repeat;
        height: 20px;
        width: 243px;
}

.blogLeft a{
        font-weight: normal;
	color: #cc092f !important;
}

.blogLeft ul, #blogLeft li{
        margin: 0px;
        padding: 0px;
        list-style: none;
}

.blogLeft li {
	padding-left: 10px;
}

#blogLeft{
	float: left;
	width: 243px;	
	margin-right: 30px;	
}

#blogLeftIn{
	border-top: solid 5px #cc092f;
	background: white;
	overflow: hidden;	
	font: 14px georgia;
	color: #6e6e6e;
	line-height: 20px;
	padding: 20px;
}

#blogLeftBottomFade{
	clear: both;
	float: left;
	background: url(../gfx/blogLeftBottomFade.png) no-repeat;
	height: 20px;
	width: 243px;
}


#blogLeft a{ 
	text-decoration: underline; 
	font-weight: normal;
}

#blogLeft ul, #blogLeft li{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.blogRight {
	float: right;
	clear: both;
	width: 716px;
	position: relative;
}

.blogRightIn{
        padding: 20px;
	padding-left: 33px;
	padding-right: 30px;
        border-top: solid 5px #cc092f;
        background: white;
        font: 14px georgia;
        color: #6e6e6e;
        line-height: 20px;
}

.blogRightBottomFade{
        background: url(../gfx/blogRightBottomFade.png) no-repeat;
        height: 20px;
        float: right;
        width: 716px;
	margin-bottom: 20px;
}

.blogRightIn h2 a {
        font: bold 30px Georgia;
        color: #cc092f;
        margin-top: 0px;
	margin-bottom: 10px;
	font-size: 26px !important;
}

.blogRightIn a {
	color: #CC092F;
	font-style: italic;
	font-size: 13px !important;
	font-weight: bold;
}

.blogRightIn .commentsTag {
	position: absolute;
	top: 20px;
	left: -25px;
	background-image: url('/images/comments_tag.png');
	background-repeat: no-repeat;
	background-position: top left;
	height: 76px;
	width: 48px;	
}

.blogRightIn .commentsTag a {
	color: #FFFFFF !important;
	font-size: 20px !important;
	text-align: center;
	padding-top: 40px;
	display: block;
}

#blogRight{
	float: right;
	width: 716px;
}

#blogRight p img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#blogRightIn{	
	padding: 20px;
	border-top: solid 5px #cc092f;
	background: white;
	overflow: hidden;	
	font: 14px georgia;
	color: #6e6e6e;
	line-height: 20px;	
}

#blogRightIn h2 a{
	font: bold 30px Georgia; 
	color: #cc092f; 
	margin-top: 0px;
}

#blogRightBottomFade{
	background: url(../gfx/blogRightBottomFade.png) no-repeat;
	height: 20px;
	float: right;
	width: 716px;
}


#bottomFade{
	clear: both;
	height: 19px;
	background: url(../gfx/bottomFade.png) no-repeat bottom;
}

.bottomFadeSplit{
	clear: both;
	height: 19px;
	background: url(../gfx/bottomFadeSplit.png) no-repeat bottom;
}

#footer{
	background: url(../gfx/footerRepeat.png) repeat-y;
	clear: both;
	padding: 20px;
	width: 949px;
	overflow: hidden;
	font: 16px georgia;
	color: white;
	line-height: 20px;
}

#footer h2{
	color: white;
	font-size: 26px;
}

#footer h3{
	color: white;
	width: 200px;
	font-size: 22px;
	font-style: italic;
	border-bottom: solid 2px #b8b8b8;
	padding: 0px 0px 5px 0px;
}

#footer h4{
	color: white;
	width: 200px;
	margin-top: 0px;
	font: italic 22px georgia;
	border-bottom: solid 2px #b8b8b8;
	background: url(../gfx/industryNewsIcon.png) no-repeat left;
	padding: 0px 0px 5px 30px;
}

#footer ul, #footer li{
	margin: 0px;
	padding: 0px;
	list-style: none outside;
}

#footer li{
	background: url(../gfx/bulletFooter.gif) 0px 3px no-repeat;
	padding-left: 20px;
	margin-bottom: 20px;
	display: block;
	width: 200px;
}

#footer a{
	text-decoration: underline;
	color: white;
}

#footer .date{
	font-size: 12px;
}

#footerBottom{ clear: both; }

#footerBottom2{ clear: both; font-size: 9px; font-weight: bold;  margin-left: 130px; margin-top: -20px;}

#footerBottom a{
	text-decoration: none;
}

#footerBottomLeft{
	float: left;
	width: 80%;
}

#footerBottomLeft a{
	float: left; 
}

#footerBottomLeft a#logoFhokeBottom{
	background: url(../gfx/logoFhokeBottom.png) no-repeat;
	height: 55px;
	width: 181px;
	display: block;
}

#footerBottomRight{
	float: right;
	width: 20%;
	text-align: right;
}

#footerBottomRight a{
	float: right;
}

a.feeds{
	background: url(../gfx/iconFeeds.gif) 0px 3px no-repeat;
	padding: 0px 0px 0px 22px;
	margin-top: 35px;
	display: block;
	text-decoration: none;
}

a:hover.feeds{ text-decoration: underline; }

a.feedsSub{
	background: url(../gfx/iconFeeds.gif) 0px 10px no-repeat;
	padding: 0px 0px 0px 22px;
	margin-top: 35px;
	display: block;
	text-decoration: none;
}


a.feedsSub2{
	background: url(../gfx/iconFeeds2.gif) 0px 10px no-repeat;
	padding: 0px 0px 0px 22px;
	margin-top: 35px;
	display: block;
	text-decoration: none;
}

/* Contact */
#contact {  }
	#contact form { width: 290px; float: left; }
	
		#contact form ol li { 
			display: block; 
			width: 100%; 
			overflow: hidden; 
			margin-bottom: 10px;			
		}
		
		#contact form ol{ 
			margin: 0px;
			padding: 0px;
		}		
		
		#contact form ol li label { 
			display: block; 
			padding: 5px 0 4px; 
		}
	/*	
		#contact form ol li input, #contact form ol li textarea { 
			background: #FFF; 
			display: block; 
			border: 1px solid #c9c9c9; 
			height: 20px; 
			padding: 5px 5px 0;  
			width: 95%; 
			font: 0.8em/1.5em Georgia, Arial, sans-serif; 
			color: #444; 
		}
		
		#contact form ol li textarea { height: auto; }
	*/	
		#contact form button { 
			width: 68px; 
			height: 24px; 
			display: block; 
			margin: 5px 0 0; 
			background: url(../gfx/buttonSubmitContact.gif) 0 0 no-repeat;
			overflow: hidden;
			border: none;
			text-indent: -999em; 
			float: right;
		}
		
#aboutUs{
	clear: both;
}		

#aboutUsLeft{
	float: left;
	width: 465px;
}

#aboutUsRight{
	float: right;
	width: 465px;
}
ul.sitemap {
	padding-left: 35px;
}

ul.sitemap li {
	list-style: none;
	margin-bottom: 5px;
}

ul.sitemap li a {
	font-size: 14px !important;
	font-weight: normal !important;
}

a.sitemapTitle {
	font-size: 16px !important;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

a#login {
	position: absolute;
	top: 50px;
	right: 15px;
}

#header div.box {
	position: relative;
}

div#clientLogin {
	width: 100%;
	position: absolute;
	top: 135px;
	left: 0px;
	z-index: 100;
}

div#clientLoginInner {
	background-image: url('/images/loginbg.png');
	background-repeat: repeat-x;
	background-position: top left;
	width: 100%;
	height: 63px;
	text-align: center;
}

div#clientLogin form {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}

div#clientLogin span {
	font-size: 16px;
	font-weight: bold;
	color: #878787;
	position: relative;
	top: -15px;
}

div#clientLogin span.loginError {
	color: #FF0000;
}

div#clientLogin input {
	border: 0px;
}

input#username {
	padding: 0px;
	height: 25px !important;
	width: 218px !important;
	padding-top: 6px;
	padding-left: 5px;
	background-image: url('/images/username.png');	
	background-position: top left;
	background-repeat: no-repeat;
	margin-left: 10px;
	margin-right: 10px;
	position: relative;
	top: -16px;
}

input#password {
	margin-right: 10px;
	padding: 0px;
	height: 25px !important;
	padding-top: 6px;
	padding-left: 5px;
        width: 218px !important;
        background-image: url('/images/password.png');
        background-position: top left;
        background-repeat: no-repeat;
	position: relative;
	top: -16px;
}

input#loginsubmit {
	position: relative;
	top: -5px;
}

div#contactDD {
	width: 100%;
	height: 265px;
	background-image: url('/images/contactbg.png');
	background-repeat: repeat-x;
	background-position: top left;
	position: absolute;
	top: -265px;
	left: 0px;
	z-index: 2;
	text-align: center;
}

div#contactBody {
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	font-family: Georgia, sans-serif;	
}

div#contactBody h3 {
	font-size: 36px;
	font-style: italic;
	margin-top: 26px;
	margin-bottom: 20px;
}

div#contactBody th {
	color: #878787;
	font-size: 14px;
	vertical-align: middle;
	font-weight: normal;
	padding-right: 20px;
}

div#contactBody input {
	border: 0px;
	outline: 0px;
}

input.txt {
	background-image: url('/images/input.png');
	background-position: top left;
	background-repeat: no-repeat;
	padding: 0px;
	height: 25px;
	width: 218px;
	padding-left: 5px;
	padding-top: 6px;
}

div#contactBody td {
	vertical-align: top;
	padding-right: 20px;
	padding-bottom: 5px;
}

div#contactBody tr {
	margin-bottom: 10px;
}

textarea {
	background-image: url('/images/textarea.png');
	background-repeat: no-repeat;
	background-position: top left;
	border: 0px;
	padding: 0px;
	width: 218px;
	height: 148px;
	padding-top: 6px;
	padding-left: 5px;
}

a#getInTouch {
	position: relative;
	top: 7px;
	outline: 0px;
}

a#getInTouch img {
	outline: 0px;
}

input#searchsubmit {
	float: right;
	clear: both;
	margin-bottom: 10px;
}

input#searchbox {
	width: 195px;
	padding-top: 10px;
	padding-left: 10px;
	height: 21px;
	line-height: 30px;
	background-image: url('/images/search_box.png');
	background-repeat: no-repeat;
	background-position: top left;
	position: relative;
	left: -3px;
	margin-bottom: 10px;
	margin-top: 10px;
}

div.searchlink {
	border-top: 1px solid #E2E2E2;
	width: 200px;
	float: left;
	clear: both;
	padding-top: 5px;
	padding-bottom: 5px;
}

div.searchlink a {
	background-image: url('/images/social_sprite.png');
	background-repeat: no-repeat;
	padding-left: 25px;
}

a#s_rss { background-position: 0px -7px; }
a#s_fb { background-position: 0px -40px; }
a#s_tw { background-position: 0px -71px; }
a#s_fl { background-position: 0px -104px; }
a#s_lf { background-position: 0px -135px; }

ol#commentlist {
	list-style: none;
}

ol#commentlist div.commentText {
	background-color: #E0E0E0;
	padding: 10px;
	width: 620px;
}

ol#commentlist div.commentNipple {
	width: 620px;
	background-image: url('/images/nipple.png');
	background-repeat: no-repeat;
	background-position: top left;
	height: 15px;
}

ol#commentlist p {
	margin-top: 5px;
}

ol#commentlist a {
	color: #CC092F;
	text-decoration: underline;
}

h2#comments {
	margin-left: 40px;
	font-size: 26px;
	text-transform: capitalize;
	color: #000000;
}

h2#comments a {
	color: #CC092F;
	text-decoration: underline;
}

form#commentform label {
	float: left;
	clear: both;
}

form#commentform input.txt {
	float: left;
	clear: both;
}

textarea#comment {
	float: left;
	clear: both;
	background-image: url('/images/blogtextarea.png');
	width: 388px;
	height: 172px;
}

div#commentsLeft {
	float: left;
	clear: none;
	height: 200px;
	width: 250px;
}

div#commentsRight {
	float: right;
	clear: none;
	height: 200px;
	width: 400px;
}

form#commentform {
	height: 250px;
}

input#commentsubmit {
	float: right;
	clear: both;
	margin-top: 10px;
	margin-right: 15px;
}

input#author {
	margin-bottom: 19px;
}

input#email {
	margin-bottom: 19px;
}

div#blogSocial {
	background-color: #E0E0E0;
	height: 100px;
	width: 100%;
	text-align: center;
	float: left;
}

div#blogSocial a {
	display: block;
	height: 100px;
	width: 65px;
	padding-top: 65px;
	float: left;
	clear: none;
	background-image: url('/images/social_sprite_large.png');
	background-repeat: no-repeat;
	background-position: top left;
	font-weight: bold;
	font-style: italic;
	margin-right: 20px;
	margin-top: 10px;
}

a#bs_fl { background-position: 0px 0px !important; margin-left: 150px; }
a#bs_tw { background-position: -90px 0px !important; }
a#bs_di { background-position: -178px 0px !important; }
a#bs_st { background-position: -266px 0px !important; }
a#bs_fb { background-position: -353px 0px !important; }

ul.blogPaging {
	margin: 0px;
	padding: 0px;
	margin-bottom: 10px;
	display: block;
	float: left;
	clear: both;
	position: relative;
	top: -10px;
}

ul.blogPaging li a {
	color: #000000;
	text-decoration: underline;
	font-weight: bold;
	display: block;
	height: 100%;
	width: 100%;
}

ul.blogPaging li {
	font-size: 12px;
        font-weight: bold;
        text-align: center;
	display: block;
        float: left;
        clear: none;
	width: 25px;
        height: 20px;
	list-style: none;
        margin-right: 5px;
	padding-top: 5px;
}

ul.blogPaging li.link {
	border: 1px solid #A0A0A0;
	text-decoration: none;
}

ul.blogPaging li.current {
	border: 1px solid #000000;
	background-color: #FFFFFF;
	color: #000000;
}

ul.blogPaging li.link a {
	color: #A0A0A0;
	text-decoration: none;
}

ul.blogPaging li.current a {
	color: #000000 !important;
}