/* ----- 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.1 Description: This is a custom theme for Jon Horton Design. It is a work in progress. Date Created: October 2009 Revised: July 2011 */ /* ================ */ /* = 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;} /* ----- Titillium Font Styles ----- */ @font-face { font-family: 'TitilliumText22LThin'; src: url('fonts/titilliumtext22l001-webfont.eot'); src: url('fonts/titilliumtext22l001-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/titilliumtext22l001-webfont.woff') format('woff'), url('fonts/titilliumtext22l001-webfont.ttf') format('truetype'), url('fonts/titilliumtext22l001-webfont.svg#TitilliumText22LThin') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TitilliumText22LRegular'; src: url('fonts/titilliumtext22l003-webfont.eot'); src: url('fonts/titilliumtext22l003-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/titilliumtext22l003-webfont.woff') format('woff'), url('fonts/titilliumtext22l003-webfont.ttf') format('truetype'), url('fonts/titilliumtext22l003-webfont.svg#TitilliumText22LRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TitilliumText22LBold'; src: url('fonts/titilliumtext22l005-webfont.eot'); src: url('fonts/titilliumtext22l005-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/titilliumtext22l005-webfont.woff') format('woff'), url('fonts/titilliumtext22l005-webfont.ttf') format('truetype'), url('fonts/titilliumtext22l005-webfont.svg#TitilliumText22LBold') format('svg'); font-weight: normal; font-style: normal; } .thin {font-family:'TitilliumText22LThin';} /* ----- 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 url(/images/bgnoise.gif);font:14px/1.5 'TitilliumText22LRegular', 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; -webkit-transition: border .3s ease-in; -moz-transition: border .5s ease-in; -o-transition: border .5s ease-in; transition: border .5s ease-in;} 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;} a:hover { text-decoration:none;background: #16B2F5; color:#fff; } h1 a:link, h1 a:visited { color:#222; background:none; -webkit-transition: color .3s ease-in; -moz-transition: color .5s ease-in; -o-transition: color .5s ease-in; transition: color .5s ease-in; } h1 a:hover {color: #16b2f5;} img {border: none;} #logo a {background: none;} #squib a, .thumb a, .portfolio a{ background: none;} .thumb, .portfolio {margin-right: -20px;} .thumb a img, .portfolio a img, img.border {border: 5px solid #ccc; background: none; -webkit-transition: border .3s ease-in; -moz-transition: border .5s ease-in; -o-transition: border .5s ease-in; transition: border .5s ease-in;} .portfolio a img{border: 5px solid #ccc; background: none; -webkit-transition: border .3s ease-in; -moz-transition: border .3s ease-in; -o-transition: border .3s ease-in; transition: border .3s ease-in; } .thumb a img {margin: 0 20px 10px 0px;} .portfolio a img {margin: 10px 16px 5px 0px;} .thumb a span {margin:0 0 10px 20px; color: #16B2F5;} .thumb a:hover img, .portfolio a:hover img, img.border:hover {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, #squib strong {color: #333;font-size:60px; font-family: 'TitilliumText22LRegular'; font-weight:normal; text-align:center;text-shadow: 0px 2px 0px white;} #squib-large h1{margin-top: 50px;} .recent-work a img { border: 7px solid #ddd;margin: 0 0 10px 0px; display:block; float:left; -webkit-transition: border .3s ease-in; -moz-transition: border .5s ease-in; -o-transition: border .5s ease-in; transition: border .5s ease-in;} .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;} .portfolio-section { margin: 30px 0; } .thumb { margin-bottom: 20px; } /* ------- 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");} /*----- Resume Styles -----*/ #resume .section { border-bottom:1px solid #ccc; } .resume-entry { padding:25px 0; margin: 0 10px; border-bottom:1px solid #e5e5e5; } #resume .section .resume-entry:last-child {border-bottom:none;} #resume h3 {margin:0;} #resume h4 {margin:0 0 20px 0;} #resume .location {color:#999;} #resume .dates {color:#999;} #resume .skills {float:left; width:300px;margin: 0 5px;} ul.list { margin:10px 0 20px 0;} ul.list li { margin: 2px 0 0 0; list-style-type:none; background: #f4f4f4; border-left: 5px #ccc solid; padding:3px 10px; -webkit-transition: border .3s ease-in; -moz-transition: border .5s ease-in; -o-transition: border .5s ease-in; transition: border .5s ease-in; } ul.list li:hover {background: #eee; border-left: 5px #16B2F5 solid;} .skill-level { color: #999; font-family: 'TitilliumText22LThin'; border-bottom: 1px dotted #999; cursor: help; margin: 0 0 0 3px; } .skill-key span { padding: 0 15px; border-right: 1px dotted #ccc; } .skill-key span:last-child {border-right: none;} h5.get-in-touch { color: #666; background: #ececec; border: 1px solid #d5d5d5; padding: 5px 10px; margin: 0 0 20px 0; line-height: 30px; font-size: 24px; text-shadow: 1px 1px 0px white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .fixed {position:fixed;} /* -------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 'TitilliumText22LBold', 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 */ .clear {clear:both;} /* ----- Text Styles ----- */ h1,h2,h3,h4,h5,h6, h2 a:link, h2 a:visited {color:#222; font-family: 'TitilliumText22LRegular', Helvetica, Arial, sans-serif; letter-spacing: -.07em; margin:10px 0; font-weight:normal;} h2 a:hover {color:#fff;} h1 {font-size: 36px; margin: 0 0 10px 0; } #resume h1 {font-size:32px; text-transform:uppercase;} h2 {font-size: 30px; font-family: 'TitilliumText22LThin'; text-transform:uppercase; color:#666;} h3 {font-size: 24px; font-family: 'TitilliumText22LBold'} h4 {font-size: 18px; font-family: 'TitilliumText22LBold'} .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;} b, strong {font-family: 'TitilliumText22LBold', Arial, sans-serif; font-weight:normal;} /*em, i {font-family: 'LatoItalic', Arial, sans-serif; font-weight:normal;}*/ 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 ---- */ input {font:18px/1.5 'TitilliumText22LRegular',Arial,sans-serif;} 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; padding:5px;} input.contactform, select.contactform {vertical-align: middle;height:20px;} select.contactform {width:404px;} textarea.contactform {font:16px/1.5 'TitilliumText22LRegular',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 5px; margin-bottom:5px; background: #ececec; line-height: 20px; } .navi-pages span { float:left; 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; /* css3 awesomeness*/ -webkit-transition: color .2s ease-in; -moz-transition: color .2s ease-in; -o-transition: color .2s ease-in; transition: color .2s ease-in; } .navi-pages a:hover {background:#16B2F5; color:#fff; border: 1px solid #16b2f5;} /* * 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 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;} /* cbox fix on portfolio items*/ .thumb a.cboxElement img { margin: 0 17px 10px 0px; } /* ----- 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;}