/* ----- Grid Styles ----- */
/* ================ */
/* = The 1Kb Grid = */     /* 16 columns, 40 pixels each, with 20 pixel gutter */
/* ================ */

.grid_1 {width:40px;}
.grid_2 {width:100px;}
.grid_3 {width:160px;}
.grid_4 {width:220px;}
.grid_5 {width:280px;}
.grid_6 {width:340px;}
.grid_7 {width:400px;}
.grid_8 {width:460px;}
.grid_9 {width:520px;}
.grid_10 {width:580px;}
.grid_11 {width:640px;}
.grid_12 {width:700px;}
.grid_13 {width:760px;}
.grid_14 {width:820px;}
.grid_15 {width:880px;}
.grid_16 {width:940px;}

.column {
	margin: 0 10px;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
.row .row {
	margin: 0 -10px;
	width: auto;
	display: inline-block;
}


/* ----- Main Styles ----- */
/*
Theme Name: Jon Horton Design
Theme URI: http://www.jonnhorton.com
Author: Jon Horton
Author URI: http://www.jonhorton.com
Version: 2.0.0
Description: This is a custom theme for Jon Horton Design. It is a work in progress.
Date Created: October 2009
Revised: July 2010
*/

/* ----- Main Styles ----- */
* {margin:0;padding:0;} 
html, body, #wrapper {height: 100%;}
body > #wrapper {height: auto; min-height: 100%;}
body {margin:0; padding: 0;  background: #fcfcfc;font:14px/1.5 'Droid Sans', Arial,sans-serif;}
#wrapper { margin: 0 auto 0 auto;width:100%;}
#header {height: 100px; vertical-align:middle;text-align:left; margin: 0 auto 0 auto; padding: 0px; background: #222 url("http://www.jonhorton.com/images/bg-header-3.png") 0px 0px repeat-x  scroll; border-bottom: 1px solid #16B2F5;}
#logo {float:left; border:0;}
.entry {background: #111; color:#999; /*-webkit-border-radius: 5px; -moz-border-radius: 5px; margin-top:-15px;*/ }
.entry p {color: #999; padding: 5px;}
.image {border: 5px solid #ccc; width:690px;}
a:hover .image  {border: 5px solid #16b2f5;}
.posted{font-size: 12px; color:#999; background:#000;  padding: 5px;}
#comment-reply {background:#eee; padding:10px 20px 20px 20px;}
.comment-entry {background: #eee; color:#222; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.comment-entry p {padding:10px; font-size: 14px; margin:0;}

/* -------- LINKS -------*/
a:link, a:visited { color:#16B2F5;  text-decoration: none; /*padding:3px; */} /*old:2d4d71 #666 #aaa*/
a:hover { text-decoration:none;background: #16B2F5;color:#fff;  }


#logo a {background: none;}
#squib a, .thumb a, .portfolio a{ background: none;}
.thumb, .portfolio {margin-right: -20px;}
.thumb a img {border: 5px solid #ccc; margin: 10px 20px 5px 0px; background: none;}
.portfolio a img{border: 5px solid #ccc; margin: 10px 16px 5px 0px; background: none;}
.thumb a span {margin:0 0 10px 20px; color: #16B2F5;}
.thumb a:hover img, .portfolio a:hover img {border: 5px solid #16b2f5;}

/* -------- Column Styles -------*/

#hero {width:686px; border:7px solid #ddd; height: 376px;margin-right:10px;float:left; background:#aaa url(http://www.jonhorton.com/images/loading.gif) no-repeat 50% 50%;}
#squib-large {height:411px; clear:both; overflow:hidden;  text-align:left; padding-top:20px;background: #eee url("http://www.jonhorton.com/images/bg-header-3.png") 0px -100px repeat-x  scroll;}

#squib {height:150px; clear:both; overflow:hidden;  text-align:left; padding-top:20px;background: #eee url("http://www.jonhorton.com/images/bg-header-3.png") 0px -621px repeat-x  scroll;}
#squib h1 {color: #333;font-size:65px;  font-weight:normal; text-align:center;}

#squib-large h1{margin-top: 50px;}


.recent-work a img { border: 7px solid #ddd;margin: 0 0 10px 0px; display:block; float:left; }
.recent-work a:hover img{border: 7px solid #16b2f5;}

.recent-work a span.large img {margin:  0 0 10px 0px;}
.recent-work a span img {margin-left:10px;}

/* ------- h2 BG images ------- */
.recent-work h2, h2.twitter-updates, h2.recent-jams,h2.blog-posts,h2.web,h2.photography,h2.print,h2.posters,h2.contact-project,h2.contact-hello {height: 45px;   color: #fff;text-align: center; vertical-align: middle; text-indent:-9999px;  -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.side h2 a:link, .side h2 a:visited {height:45px; display:block;margin-top:0px;}
.side h2 a:hover {background:none;}

.recent-work h2 {margin:0 0 10px 0;background: url("http://www.jonhorton.com/images/bg-h2.png") 0 0;}
h2.twitter-updates {margin:-5px -5px 10px -5px;background:#222 url("http://www.jonhorton.com/images/bg-h2.png") 0 -45px;}
h2.recent-jams {margin:-5px -5px 10px -5px;background: url("http://www.jonhorton.com/images/bg-h2.png") 0 -90px;}
h2.blog-posts {margin:-5px -5px 10px -5px;background:#222 url("http://www.jonhorton.com/images/bg-h2.png") 0 -135px;}
h2.web {margin:-5px -5px 10px -5px;background:#222 url("http://www.jonhorton.com/images/bg-h2.png") 0 -180px;}
h2.photography {margin:-5px -5px 10px -5px;background:#222 url("http://www.jonhorton.com/images/bg-h2.png") 0 -225px;}
h2.print {margin:-5px -5px 10px -5px;background:#222 url("http://www.jonhorton.com/images/bg-h2.png") 0 -270px;}
h2.posters {margin:-5px -5px 10px -5px;background:#222 url("http://www.jonhorton.com/images/bg-h2.png") 0 -315px;}
h2.contact-project {margin:-5px -5px 10px -5px;background:#222 url("http://www.jonhorton.com/images/bg-h2.png") 0 -360px;}
h2.contact-hello {margin:-5px -5px 10px -5px;background:#222 url("http://www.jonhorton.com/images/bg-h2.png") 0 -405px;}


#work-links a {height: 220px; display: block;margin-top:20px;}

.work-web, .work-photography, .work-print, .work-posters  {height: 220px;   color: #fff;text-align: center; vertical-align: middle; text-indent:-9999px;  display:block;}
.work-web {background:#eee url("http://www.jonhorton.com/images/work-links.jpg") 0px 0px;}
.work-web a:hover {background:#eee url("http://www.jonhorton.com/images/work-links.jpg") 0px -220px;}

.work-photography {background:#eee url("http://www.jonhorton.com/images/work-links.jpg") -220px 0px;}
.work-photography a:hover {background:#eee url("http://www.jonhorton.com/images/work-links.jpg") -220px -220px;}
.work-print {background:#eee url("http://www.jonhorton.com/images/work-links.jpg") -440px 0px;}
.work-print a:hover {background:#eee url("http://www.jonhorton.com/images/work-links.jpg") -440px -220px;}
.work-posters {background:#eee url("http://www.jonhorton.com/images/work-links.jpg") -660px 0px;}
.work-posters a:hover {background:#eee url("http://www.jonhorton.com/images/work-links.jpg") -660px -220px;}


#blurb{ border:1px solid #bbb; background: #ddd; padding:15px; width: 600px; float: left;  height: 235px;}
#main{padding: 15px 0;}
.side{background: #eee;  -webkit-border-radius: 5px; -moz-border-radius: 5px; padding:5px 5px 0 5px; margin:10px 0;}
.side p, .side ul {padding: 5px;}
.twitter  {	color:#333;	font-size: 12px;		letter-spacing: -.07em;}
.twitter ul li {margin-bottom:10px;list-style-type: none;}
.twitter h2, .twitter p {color:#aaa;}
.twitter li{color:#999;}
/*.twitter a:link, .twitter a:visited, .entry a:link, .entry a:visited, .navi-pages a:link, .pagecount a:visited {color: #ddd; text-decoration: none; } #aaa*/
.twitter a:hover, .entry a:hover, .navi-pages a:hover {color: #fff; text-decoration: none;}


.squib-work{background: transparent url("http://www.jonhorton.com/images/squib-work.png");}


/* -------Nav ------- */
#nav {overflow:hidden;}
#nav ul, #nav li {margin: 0; padding: 0;	list-style-type: none;float: right;}
#nav li {	display: block; float: left;	height: 100px;}
#nav li a {	display: block; float: left;	height: 100px; font-weight:bold; font-size:85%;}

#nav li.work a, #nav li.work a:visited {	width: 74px;	background: url(../images/nav.png) 0px 0px;	text-indent: -9999px; overflow: hidden;}
#nav li.work a:hover,#nav li.work a.selected {	background: url(../images/nav.png) 0px -100px;}
#nav li.about a, #nav li.about a:visited {	width: 96px;	background: url(../images/nav.png) -74px 0px;	text-indent: -9999px; overflow: hidden;}
#nav li.about a:hover, #nav li.about a.selected {background: url(../images/nav.png) -74px -100px;}
#nav li.contact a, #nav li.contact a:visited {	width: 110px;	background: url(../images/nav.png) -170px 0px;	text-indent: -9999px; overflow: hidden;}
#nav li.contact a:hover, #nav li.contact a.selected {	background: url(../images/nav.png) -170px -100px;}
#nav li.blog a, #nav li.blog a:visited {	width: 78px;	background: url(../images/nav.png) -280px 0px;	text-indent: -9999px; overflow: hidden;}
#nav li.blog a:hover, #nav li.blog a.selected {	background: url(../images/nav.png) -280px -100px;}
#nav li.portfolio a, #nav li.portfolio a:visited {	width: 122px;	background: url(../images/nav.png) -358px 0px;	text-indent: -9999px; overflow: hidden;}
#nav li.portfolio a:hover,#nav li.portfolio a.selected {	background: url(../images/nav.png) -358px -100px;}


/*----- Sticky Footer: http://www.cssstickyfooter.com/ -----*/
#footer {height: 90px;margin-top: -90px; position: relative; font: 16px 'Droid Sans', Helvetica, Arial,  sans-serif;background:  url("http://www.jonhorton.com/images/bg-header-3.png") 0px -531px repeat-x ;width: 100%; color:#333;clear:both; }
.padding_footer {padding:30px 0 0 0;}
.padding_10 {padding:20px 0;}
.right{text-align: right; float:right;}
#footer a:link, #footer a:visited {color: #555; text-decoration: none; padding:0;background:none;}
#footer a:hover {color: #111; text-decoration: underline;padding:0;background:none;}

#container { padding-bottom: 90px;}  /* must be same height as the footer */
.clearfix:after {content: ".";	display: block;	height: 0;	clear: both;	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* ----- Text Styles ----- */

h1,h2,h3,h4,h5,h6,  h2 a:link,  h2 a:visited, h1 a:link, h1 a:visited {color:#222; font-family: 'Droid Sans', Helvetica, Arial,  sans-serif; letter-spacing: -.07em; margin:10px 0;}
h2 a:hover,  h1 a:hover {color:#fff;}
h1 {font-size: 28px;font-weight: bold;}
h2 {font-size: 20px;}
h3 {font-size: 16px;}
.heading {color:#333;	font-size: 16px;	line-height:95%;}
p,li {color:#333;	font-size: 14px;	margin-bottom:15px; }
td {color:#999; font-size:12px; vertical-align:middle; padding:5px; }
hr{margin:0 0 15px 0;}
img {border: none;}
img.border{border: 5px solid #ccc;}
img.border:hover{border: 5px solid #16b2f5;}


ol,ul {list-style: disc; list-style-position:inside;  margin-left: 5px; padding: 0 5px;  }
li {margin-bottom:0;}
.pagecount {color: #666; font-size: 10px;}

label span.requiredfield {font-size: 18px; color: #ff0000;padding-top:5px;vertical-align:top; font-weight:bold;}

.project-details {border-left: 1px dotted #ccc; padding: 10px 20px 0px 20px;margin: 0px 0px 10px 10px; float:right; background: #f0f0f0; width:180px;}
.project details ul {list-style-image:url("http://www.jonhorton.com/images/bullet-star.gif");}

/* ----- Resume ----- */
.bigsquib {font-size:65px; font-weight:normal; text-align:center;}
/*.title h2, */ul.menu a {background:#333; color:#fff; padding:3px;  -webkit-border-radius: 5px; -moz-border-radius: 5px;}
.title h2 {font-size: 24px;}

.title ul.tasks {	margin:0 0 20px 0;}
.title ul.tasks li {	margin: 2px 0 0 0;	list-style-type:none;	background: #f4f4f4;	border-left: 5px #ccc solid;	padding:3px 10px;}
.title ul.tasks li:hover, ul.menu li ul li:hover {background: #eee; border-left: 5px #16B2F5 solid;}

/* ----- Menu Collapsed Styles ----- */
ul.menu {  list-style-type:none;  margin: 0;  padding: 0;}
ul.menu a {  display: block;  text-decoration: none;	}
ul.menu li {  margin-top: 1px;}
ul.menu li a {  background:#16B2F5;  color: #fff;	  padding: 0.5em;}
ul.menu li a:hover {  background: #333;}
ul.menu li ul li {  background: #f4f4f4;  color: #000;  padding: 5px 10px;  list-style-type:none;  border-left: 5px #ccc solid;  margin-top: 2px;}
/* ul.menu li ul li:hover{  background: #ddd;} */
ul.menu li ul {margin-left:0;}
 

/* ---- Form Styles ---- */

label {    display: block;    width: 150px;    float: left;    margin: 2px 4px 6px 4px;   text-align: right;}
input.contactform, select.contactform, textarea.contactform { width:400px; border: 2px solid #ccc; font-size:18px; color: #333; }
input.contactform, select.contactform {vertical-align: middle;height:30px;}
select.contactform {width:404px;}
textarea.contactform {font:16px/1.5 'Droid Sans',Arial,sans-serif;}
.requiredfield {font-size: 18px; font-weight: bold; color: #ff6600;padding-top:5px;}
.validation-advice { color: #ff6600; background: #fff url(http://www.jonhorton.com/images/alert.gif) no-repeat left center; padding-left: 22px; font-size: 85%; margin-left:150px; } 

input.btn-submit {background: #16b2f5; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 5px 10px; margin: 10px 0;  display:block; text-transform:capitalize; height: 40px; width:400px; border:0; font-size:18px; }
input:hover.btn-submit {background: #222; color:#fff; text-decoration:none;}


.advice {font-size: 11px;padding: 5px; margin-bottom:5px; background: #ececec;  color:#666;clear:both; }

.navi-pages {font-size: 11px;padding: 10px; margin-bottom:5px; background: #ececec; }
.navi-pages span {float:left;padding-top: 2px;color: #999;}
.navi-pages span a {background: none; border:0;}
.navi-pages span a:hover {border:0;}
.navi-pages p {text-align: right;margin:0; padding:0;}
.navi-pages a {font-size: 12px; background:#fcfcfc;padding: 5px;  color: #16B2F5; border: 1px solid #ccc;}
.navi-pages a:hover {background:#16B2F5; color:#fff; border: 1px solid #16b2f5;}

/* ----- Nivo Styles ----- */
/*
 * jQuery Nivo Slider v2.0
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
  
/* The Nivo Slider styles */
.nivoSlider {position:relative;}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
}
.nivo-controlNav a.active {font-weight:bold;}

/* Nivo Style Pack */
/*
 * Note: Include the nivo-slider.css file that comes
 * with the main download before including this file.
 */

#slider {
	position:relative;
	background:#202834 url(http://www.jonhorton.com/images/loading.gif) no-repeat 50% 50%;
	/*-moz-box-shadow:0px 0px 10px #111;
	-webkit-box-shadow:0px 0px 10px #111;
	box-shadow:0px 0px 10px #111; */
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0; display:block;
}

.nivo-controlNav {
	position:absolute;
	left: 10px;
	top: 10px;
}
.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(http://www.jonhorton.com/images/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:-22px 0;
}

.nivo-directionNav a {
	display:block;
	width:32px;
	height:34px;
	background:url(http://www.jonhorton.com/images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-32px 0;
	right:10px;
}
a.nivo-prevNav {left:10px;}


/* ----- Colorbox Styles ----- */
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#000;}

#colorbox{}
    #cboxContent{margin-top:20px;}
        #cboxLoadedContent{background:#000; padding:5px;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(http://www.jonhorton.com/images/colorbox/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(http://www.jonhorton.com/images/colorbox/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext.hover{background-position:bottom right;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(http://www.jonhorton.com/images/colorbox/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(http://www.jonhorton.com/images/colorbox/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose.hover{background-position:bottom center;}