/* @override 
	http://jhk.scottorchard.com/css/style.css */

/* CSS Document */
/* reset all elements */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Import webfont files */

/* @license
 * MyFonts Webfont Build ID 1469124, 2011-11-06T21:35:17-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Franklin Gothic Book by URW++
 * URL: http://www.myfonts.com/fonts/urw/franklin-gothic/t-book/
 * Copyright: Copyright 2010 URW++ Design & Development Hamburg
 * Licensed pageviews: 10,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=1469124
 * 
 * © 2011 Bitstream Inc
*/

@font-face {font-family: 'FranklinGothicURW-Boo';src: url('../webfonts/166AC4_0.eot');src: url('../webfonts/166AC4_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/166AC4_0.woff') format('woff'),url('../webfonts/166AC4_0.ttf') format('truetype'),url('../webfonts/166AC4_0.svg#wf') format('svg');}


.FranklinGothicURW-Boo { 
	font-family: FranklinGothicURW-Boo;
	font-weight: normal;
	font-style: normal;
}

/* Project specific styles */

body {font: 0.8em FranklinGothicURW-Boo;color: #8a8c8e;background: #FFF;margin: 0;padding: 0;}
#wrapper {width: 100%;margin: 0;padding: 0;position:relative;}
#header{margin: 31px 0px 25px 43px;width:950px;}
#header h1 {background: url(../images/jhkcreative_logo.gif) no-repeat 0 0;text-transform: uppercase;text-align: center;margin: 0;padding: 0;min-width:960px;}

#header h1 a{width:57px;height:25px;display:block; text-indent:-99999px;}
#nav {list-style: none;padding: 0;margin: 0 0 25px 0;	float:left;font-size:15px;height:33px;}
#nav li {display: inline;position:relative;float: left;}
/*#nav li a {display: block;padding: 10px 30px 0 0;color: #8a8c8e;text-decoration: none;}*/
#nav li a { 
	display: block;
	padding: 10px 30px 0 0;
	color: #8a8c8e;
	text-decoration: none;
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	-ms-transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
	transition: color 0.3s linear;
}
#nav li a:hover {color: #00aeef;}
#nav #down-list {position: absolute; display:none;top:26px;left:-5px;margin:0;padding:5px 0 0 0;width: 200px;background:#FFF; z-index:10}
#nav #down-list a{font-size:13px;}
#nav li li {display: block;margin:0 ;float:none;}
#nav li li a{padding:5px 5px 5px 5px}
.clearFloat {clear:both;  margin:0;padding:0; }
/* IE7 Display Fix */  
#nav #holder ul li {display: inline;}   

#controls{/*position: absolute; top: 25px;left:450px;*/float:right;font-size:15px;padding: 10px 0px 0 0;}
#controls .title{text-align:right; }
#controls .title, #controls .count{color:#000}
#controls .count,#controls a.prev{margin-left:8px;}
#controls .count{width:40px; display:inline-block;}
#controls .credits{margin-left:8px;}
#controls .prevproject{margin-left:200px; }
#controls .nextproject{margin-left:10px; padding-right: 24px;}
#controls a.next,#controls a.prev{width:10px;height:12px;text-indent:-99999px;display:inline-block}

#controls a.prev{background:#FFF url(../images/arrows.png) no-repeat 0px 0;}
#controls a.next{background:#FFF url(../images/arrows.png) no-repeat right 0;}

#controls a.prevproject, #controls a.nextproject {color: #00aeef;}
#controls a.prevproject:hover, #controls a.nextproject:hover {color: #000;}


#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(../images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

#content {overflow:auto;z-index:1;width:100%;background-color: #FFF;}
#copy{ margin:20px 0 0 43px;}
.block{width:350px;margin-right:50px; float:left;}
#content .home p{font-size:15px; line-height:22px;display:none; background-color: #FFF;}
#contact-photo {display: block; white-space: nowrap;}
#contact-photo img {margin: 5px 0 0 -100px;}
h1{font-size:15px;font-weight:normal; margin:0;color:#000;}
h2 {margin: 0;padding: 0.5em 0;color:#000;}
h3 {color:#000;}

#rec h3 {line-height:18px;font-weight:normal; color: #8a8c8e;}
#rec p {margin-left: 0px;padding-bottom:5px;}
p {font-size: 13px; margin: 0 0 18px 0;padding: 0;color:#8a8c8e;line-height:20px;}
/*a {color:#8a8c8e;text-decoration:none;}*/
a {
	color:#8a8c8e;
	text-decoration:none;
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	-ms-transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
	transition: color 0.3s linear;
}
a:hover {color:#00aeef;}

a.viewproject {
	color: #00aeef;
	}
	
a.viewproject:hover {
	color: #000000;
	}

#content img.right {float: right;margin: 0 0 8px 8px;}

#content .credits {width:287px;margin: 47px 0px 25px 43px; line-height:18px;}
#content .credits p{margin: 0 0 18px 0;color:#8a8c8e; font-size:13px;}

#content .contact p {font-size: 15px;}

#foot {padding: 15px;color: #8a8c8e;text-align: center;margin: 30px 0 0 0;}

#static-credit {position:absolute; left: 43px; top:585px; z-index:2;}
#static-credit p {font-size: 11px;}
/**
* Custom gallery styles.
*/
#custom-gallery {
    background: #fff;
    padding: 0px;
    height: 650px;
}

    #custom-gallery div.slide .image-holder {
        background: #FFF;
    }
	
	#custom-gallery div.slide .info{
	margin-left:43px;
	}
    
    #custom-gallery div.slide .info h2 {
        font-size: 12px;
        color: #000;
    }

    #custom-gallery div.slide .info p {
        color: #8a8c8e;
    }
    
    #custom-gallery div.thumbnails {
        width: 850px;
        height: 60px;
        margin-top: 28px;
    }
    
        #custom-gallery div.thumbnails ul {
            padding: 5px;
        }

        #custom-gallery div.thumbnails .indicator {
            border: 3px solid #be0016;
            padding: 2px;
            margin: -5px 0 0 -5px;
        }

/**
* The dimensions of the gallery components are gathered here for easy modification.
* Other styles for these elements can be found below.
* Edit this part after having a look at the help file.
*/
.vion-gallery { height: 700px; width: 100%; } /* The dimensions of the main gallery */
.vion-gallery div.slide { /*width: 600px; */}
.vion-gallery div.slide .image-holder { /*width: 600px;*/ height: 539px; } /* The dimension of your images. */
.vion-gallery div.thumbnails { height: 56px; width: 593px; } /* The dimensions of the thumbnail scroller. */
.vion-gallery div.thumbnails ul li img { height: 50px; width: 75px; } /* The dimension of your thumbnails. */

/**
* Reset gallery components.
*/
.vion-gallery img,
.vion-gallery h2,
.vion-gallery p,
.vion-gallery ul,
.vion-gallery ul li {
margin: 0;
padding: 0;
}

/**
* Styles for the main gallery frame. Edit this to change the background color, 
* paddings etc.
*/
.vion-gallery {
position: relative;
background: #000;
padding: 20px 0 0 20px;
overflow: hidden;
}

/**
* Styles for the slides DIV.
*/
.vion-gallery div.slides {
width: 999999px; /* A temporary large value for the startup to avoid the layout problems in some browsers. This value will be updated when the JS file is loaded. Do not modify.*/
float: left;
}

/**
* Styles for the gallery mask.
*/
.vion-gallery div.gallery-mask {
position: relative;
width: 100%;
overflow: hidden;
}

/**
* Edit margin-left to adjust the spacing between slides.
*/
.vion-gallery div.slide {
position: relative;
float: left;
margin-left: 10px;
}

/**
* Reset the margin-left for the first slide.
*/
.vion-gallery div.slide:first-child {
margin-left: 0;
}

/**
* Styles for the image-holder. The image background color can be set here.
*/
.vion-gallery div.slide .image-holder {
    background: #303030;
    opacity: 1; /* Do not edit. */
    filter: alpha(opacity=100); /* Do not edit */
    overflow: hidden;
    cursor: pointer;
}
    
/**
* Set the cursor to default for the selected slide.
*/
.vion-gallery div.slide.selected .image-holder {
    cursor: default;
}
    
/**
* Styles for the img element.
*/
.vion-gallery div.slide img {
    opacity: 0; /* Do not edit. */
    filter: alpha(opacity=0); /* Do not edit. */
    float: left;
}
    
/**
* Styles for the info section.
*/
.vion-gallery div.slide .info {
    clear: both;
    opacity: 0;
    filter: alpha(opacity=0);
    padding: 20px 20px 20px 0px;
}

    .vion-gallery div.slide .info h2 {
        font: bold 12px Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #fff;
        margin-bottom: 5px;
    }

    .vion-gallery div.slide .info p {
        font: 12px Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #b3b3b3;
        line-height: 16px;
    }
        
/**
* Styles for the thumbnails section. The dimensions of the thumbnail scroller
* can be found at the top of the styles file. Edit the dimensions if you need
* a different thumbnail size.
*/
.vion-gallery div.thumbnails {
position: relative;
clear: both;
overflow: hidden;
margin: auto;
margin-top: 20px;
}

.vion-gallery div.thumbnails ul {
    position: relative;
    float: left;
    padding: 3px; /* This should be equal to the indicator's border size. See below. */
    list-style: none;
    width: 999999px; /* A temporary large value for the startup to avoid the layout problems in some browsers. This value will be updated when the JS file is loaded. Do not modify.*/
}

    .vion-gallery div.thumbnails ul li {
        margin-left: 3px; /* Spacing between the thumbnails. */
        float: left;
        cursor: pointer;
        opacity: 0; /* Do not edit. */
        filter: alpha(opacity=0); /* Do not edit. */
    }

    .vion-gallery div.thumbnails ul li.selected {
        cursor: default;
    }

    .vion-gallery div.thumbnails ul li:first-child {
        margin-left: 0;
    }
        
/**
* Styles for the indicator. You can change the border size and color here.
* See the instructions below.
*/
.vion-gallery div.thumbnails .indicator {
    position: absolute;
    border: 3px solid #fff; /* Update the padding for the ul above after modifying the size. */
    margin: -3px 0 0 -3px; /* These margins should be equal to the border size. */
    z-index: 1;
}