/* IMPORTS ------------------------------------------------------------*/
@import url('reset.css');
/* HACKS ------------------------------------------------------------*/
.clear{
clear:both;
height:1px;
}
.inv{ display:none; }
/* PARAGRAPH AND BULLETS FIX --------------------------------------------*/
.cols ul,
.single ul,
.post ul,
.contact-left ul,
.contact-right ul{
margin-left: 20px;
list-style-type: disc;
font-weight: normal;
font-size: 14px;
color: #665D4E;
}
.cols ol,
.single ol,
.post ol,
.contact-left ol,
.contact-right ol{
margin-left: 20px;
list-style-type: decimal;
}
/* GENERAL ------------------------------------------------------------*/
body {
line-height: 1;
color: #696969;
background: #f9f7e8 url(../img/spring/bg.gif) repeat-x top center;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
div#wrapper{
position: relative;
width: 960px;
margin: 0 auto;
}
h1{
font-size: 36px;
line-height: 1.5em;
color: #665d4e;
}
h2{
font-size: 32px;
line-height: 1.5em;
color: #665d4e;
}
h3{
font-size: 26px;
line-height: 1.5em;;
color: #665d4e;
}
h4{
font-size: 22px;
line-height: 1.5em;
color: #665d4e;
}
h5{
font-size: 18px;
line-height: 1.5em;
font-weight: bold;
color: #665d4e;
}
h6{
font-size: 14px;
line-height: 1.5em;
color: #665d4e;
}
p.excerpt{
font-size: 32px;
line-height: 1.5em;;
color: #665d4e;
width: 960px;
margin: 0 auto;
padding-bottom: 20px;
text-transform: uppercase;
text-align: center;
}
p.excerpt a{
color: #3e372b;
text-decoration: none;
}
p.section-title{
display: block;
overflow: hidden;
color: #665d4e;
margin-bottom: 18px;
}
p.section-title span.title{
display: block;
float: left;
font-size: 36px;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #665d4e;
}
p.section-title span.desc{
display: block;
float: left;
font-size: 14px;
line-height: 1.5em;
margin-top: 18px;
}
.title-1{
background: url(../img/h1-bg.png) no-repeat -3px 3px;
text-indent: 9px;
}
.title-2{
background: url(../img/h2-bg.png) no-repeat 0px 15px;
text-indent: 10px;
}
.title-3{
color: #e1820b;
}
blockquote h4{
font-size: 26px;
background: url(../img/quotes-close.png) no-repeat right bottom;
font-style: italic;
font-family: Georgia;
color: #665d4e;
line-height: 1.5em;
}
blockquote h4:first-letter{
font-size: 26px;
}
div.col blockquote p,
blockquote p{
font-size: 14px;
font-style: italic;
font-family: Georgia;
color: #665d4e;
line-height: 1.5em;
}
.custom1 a{
text-decoration: none;
}
img.left-align{
float:left;
margin:8px 18px 18px 0;
display: block;
}
img.right-align{
float:right;
margin:0px 0px 0px 10px;
display: block;
}
img.boxed{
background: white;
padding: 5px;
border: 1px solid #606060;
}
.custom{
word-spacing: .3em;
font-weight: bold;
}
/* HEADER ------------------------------------------------------------*/
div#header{
overflow: hidden;
position: relative;
height: 210px;
width: 100%;
background: url(../img/spring/top-bg.png) no-repeat;
}
div#header img#logo{
position: absolute;
top:75px;
left: 0px;
}
/* ARROW ------------------------------------------------------------*/
img#arrow{
position: relative;
top: 145px;
}
img.arrow-home{
display: none;
}
img.arrow-about{
left: 680px;
}
img.arrow-gallery{
left: 770px;
}
img.arrow-blog{
left: 918px;
}
img.arrow-contact{
left: 920px;
}
/* NAV ------------------------------------------------------------*/
ul#nav{
display: block;
position: absolute;
top:120px;
right: 0px;
width: 500px;
z-index: 300;
}
ul#nav li{
display: block;
float: right;
}
ul#nav li a{
font-size: 16px;
text-decoration: none;
margin-left: 15px;
padding-right:15px;
border-right: 1px solid #665d4e;
}
ul#nav li.last a{
border-right: none 0px;
padding-right:0px;
}
ul#nav li ul li{
border: none;
}
ul#nav li ul{
display: block;
padding: 10px 5px;;
background: white;
border: 1px solid #665d4e;
}
ul#nav li ul li{
display: block;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #665d4e;
}
ul#nav li ul li:last-child{
border: none;
}
ul#nav li ul li a{
border: none;
font-size: 14px;
}
/* SEARCH ------------------------------------------------------------*/
form#search{
position: absolute;
top: 20px;
right: -22px;
width: 250px;
height: 50px;
}
form#search input#keyword{
color: #b8b2a9;
font-size: 14px;
width: 144px;
height: 30px;
margin: 10px 0px 5px 30px;
padding: 0px 30px 0px 5px;
border: 0;
background: url(../img/search-input.png) no-repeat transparent;
}
form#search input#go{
position: absolute;
top: -2px;
right: 20px;
width: 49px;
height: 49px;
border: 0px;
background: url(../img/go-button.png) no-repeat transparent;
}
form#search input#go:hover{
background-position: 0px -49px;
}
/* MAIN ------------------------------------------------------------*/
div#main{
width: 100%;
min-height: 650px;
position: relative;
overflow: hidden;
}
div.holder{
overflow: hidden;
}
div.holder div.block{
width: 307px;
float: left;
margin: 0px 18px 0px 0px;
}
div.holder div.last{
margin: 0px 0px 70px 0px;
}
div.holder div.block div.thumb-holder{
position: relative;
width: 307px;
height: 129px;
background: url(../img/thumb-bg.png) no-repeat;
margin-bottom: 5px;
}
div.holder div.block img.thumb{
position: absolute;
top:2px;
left: 2px;
}
div.holder div.block h2{
line-height: 1em;
margin-bottom: 0px;
text-indent: 0px;
background: none transparent;
}
div.holder div.block h3{
line-height: 1em;
margin-bottom: 10px;
}
div.holder div.block p.thumb-text{
font-size: 14px;
line-height: 1.5em;
color: #665d4e;
border-top: 2px solid #665d4e;
padding-top: 10px;
margin-bottom: 10px;
}
div.top-img{
width: 100%;
margin-top: 13px;
margin-bottom: 10px;
}
div.top-img img{
display: block;
margin: 0 auto;
}
/* COLUMNS ------------------------------------------------------------*/
div.one-col,
div.two-col,
div.three-col{
overflow: hidden;
}
div.separator{
border-bottom: 1px solid gray;
margin-bottom: 18px;
}
div.one-col div.col{
width: 100%;
}
div.two-col div.col{
width: 465px;
float: left;
margin-right: 30px;
}
div.two-col div.last{
margin-right: 0px;
}
div.three-col div.col{
width: 300px;
float: left;
margin-right: 30px;
}
div.three-col div.last{
margin-right: 0px;
}
div.col p{
font-size: 14px;
line-height: 1.5em;
margin-bottom: 1.5em;
}
/* SLIDESHOW ------------------------------------------------------------*/
div#slideshow{
overflow: hidden;
position: relative;
height: 380px;
margin-bottom: 5px;
width: 960px;
}
div#slideshow ul#slides{
margin: 0 auto;
width: 950px;
height: 337px;
position: absolute;
top:20px;
left: 5px;
}
div#slideshow-arrows{
margin: 0 auto;
z-index: 900;
width: 1000px;
height: 57px;
}
div#slideshow img#prev{
position: absolute;
top:180px;
left: 1px;
z-index: 20;
}
div#slideshow img#next{
position: absolute;
top: 180px;
right: 1px;
z-index: 21;
}
div#slideshow span{
background: url(../img/slideshow-border.png) no-repeat;
width: 960px;
height: 378px;
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
#slideshow-nav{
display: block;
position: absolute;
overflow: hidden;
bottom: 40px;
right: 20px;
z-index: 20;
}
#slideshow-nav a {
display: block;
float: left;
background: url(../img/slidebutton.png) no-repeat;
height: 15px;
width: 15px;
text-indent: -9000px;
margin-right: 5px;
}
#slideshow-nav a.activeSlide {
background: url(../img/slidebutton-over.png) no-repeat;
}
/* FADE-SLIDE ------------------------------------------------------------*/
div.fade-slide{
overflow: hidden;
height: 345px;
border: 2px solid white;
}
/* GALLERY ------------------------------------------------------------*/
ul.gallery{
overflow: hidden;
margin: 0px 0px 10px 0px;
width: 1000px;
}
ul.gallery li{
display: block;
position: relative;
overflow: hidden;
width: 226px;
height: 181px;
float: left;
margin: 0px 18px 10px 0px;
background: url(../img/gallery-thumb-bg.png) no-repeat;
text-align: center;
}
ul.gallery li img{
margin: 1px 0px 0px 1px;
}
ul.gallery li a:hover span{
display: block;
}
ul.gallery li span{
display: none;
position: absolute;
top:1px;
left: 1px;
width:224px;
height: 150px;
}
ul.gallery li.cat-images span{
background: url(../img/over.png) no-repeat;
}
ul.gallery li.cat-video span{
background: url(../img/over-video.png) no-repeat;
}
ul.gallery li.cat-flash span{
background: url(../img/over-flash.png) no-repeat;
}
ul.gallery li em{
display: block;
color: #665d4e;
font-size: 14px;
font-style: normal;
margin-top: 8px;
}
ul#portfolio-filter{
display: block;
overflow: hidden;
width: 920px;
height: 63px;
padding: 12px 20px 5px 20px;
margin-top: 0px;
margin-bottom: 0px;
background: #665d4e;
background: url(../img/filter-bg.png) no-repeat;
}
ul#portfolio-filter li{
display: block;
float: left;
margin-right: 10px;
margin-top: 16px;
font-size: 14px;
}
ul#portfolio-filter li:first-child{
color: #606060;
font-weight: bold;
}
ul#portfolio-filter li a{
color: #999999;
text-decoration: none;
}
ul#portfolio-filter li a:hover{
color: #606060;
}
/* MORE-GALLERIES ------------------------------------------------------------*/
ul.more-galleries{
display: block;
margin-left: 30px;
}
ul.more-galleries li{
display: block;
background: url(../img/bullet.png) no-repeat 0px 3px;;
margin-bottom: 0.3em;
text-indent: 18px;
}
ul.more-galleries li a{
font-size: 14px;
line-height: 1.5em;;
color: #665d4e;
margin-bottom: 1.5em;
text-decoration: none;
font-weight: bolder;
}
ul.more-galleries li a span{
color: #909090;
font-weight: lighter;
font-size: 14px;
}
ul.more-galleries li a:hover,
ul.more-galleries li a.active{
text-decoration: underline;
}
ul.more-galleries li:first-child{
/*list-style: none;
background: none;
margin-left: 0px;
margin-top: 26px;
margin-bottom: 1em;*/
}
/* BLOG PAGER ------------------------------------------------------------*/
ul.blog-pager{
display: block;
width: 100%;
}
ul.blog-pager li:first-child{
display: block;
float: left;
background: url(../img/prev-bullet.png) no-repeat top left ;
padding-left: 20px;
height: 16px;
}
ul.blog-pager li:last-child{
display: block;
float: right;
text-align: left;
background: url(../img/next-bullet.png) no-repeat top right ;
padding-right: 20px;
height: 16px;
}
ul.blog-pager li a{
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: #665d4e;
display: block;
}
/* PAGER ------------------------------------------------------------*/
ul.pager{
overflow: hidden;
display: block;
height: 20px;
position: absolute;
right: 0px;
margin-bottom: 230px;
}
ul.pager li{
display: block;
width:12px;
height: 12px;
float: left;
background: url(../img/spring/pager.png) no-repeat;
background-position: -18px 0px;
margin-left: 5px;
}
ul.pager li:hover,
ul.pager li.active{
background-position: -38px 0px;
}
ul.pager li a{
display: block;
width: 100%;
height: 100%;
text-indent: -9000px;
}
ul.pager li:first-child{
background-position: 0px 0px;
}
ul.pager li:last-child{
background-position: -59px 0px;
}
/* BLOG ------------------------------------------------------------*/
div#main div#posts{
width: 610px;
float: left;
}
div#posts div.post,
div#posts div.single{
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 30px;
font-weight: bold;
font-size: 14px;
}
div#posts div.post p.post-title,
div#posts div.single p.post-title{
display: block;
font-size: 26px;
line-height: 1.5em;
color: #665d4e;
padding-right: 70px;
}
div#posts div.post p.post-meta,
div#posts div.single p.post-meta{
display: block;
font-size: 14px;
line-height: 1.5em;
color: #665d4e;
}
div#posts div.post p.post-meta span,
div#posts div.single p.post-meta span{
font-weight: bold;
color: #979186;
}
div#posts div.post div.post-img,
div#posts div.single div.post-img{
position: relative;
width: 612px;
height: 230px;
padding-bottom:12px;
margin-top: 7px;
}
div#posts div.post div.post-img span,
div#posts div.single div.post-img span{
position: absolute;
bottom:1px;
left: 0px;
width:614px;
height: 20px;
background: url(../img/post-shadow.png) no-repeat center bottom;
z-index: -1;
}
div#posts div.post div.post-img img,
div#posts div.single div.post-img img{
border: 2px solid white;
width: 606px;
}
div#posts div.post p.brief,
div#posts div.single p.brief{
display: block;
font-size: 16px;
line-height: 1.5em;
margin-bottom: 0.5em;
color: #665d4e;
font-weight: normal;
}
div#posts div.post a.more,
div.holder div.block a.more{
display: block;
float: left;
overflow: hidden;
background: url(../img/spring/more-button.png) no-repeat;
width: 68px;
height: 25px;
text-indent: -9000px;
}
div#posts div.post a.more:hover,
div.holder div.block a.more:hover{
background-position:0px -25px;
}
/* COMMENTS BALLOON ------------------------------------------------------------*/
div#posts div.post p.post-comments{
display: block;
position: absolute;
right: 0px;
top: 0px;
width: 67px;
height: 59px;
background: url(../img/spring/comments-balloon.png) no-repeat;
color: white;
font-size: 22px;
text-align: center;
padding-top: 12px;
}
div#posts div.comments p.post-comments{
display: block;
position: relative;
width: 67px;
height: 59px;
color: white;
font-size: 22px;
text-align: center;
padding-top: 10px;
margin-bottom: 20px;
}
div#posts div.comments p.post-comments span{
display: block;
position: absolute;
top: 10px;
left: 80px;
font-size: 22px;
color: #665d4e;
}
/* COMMENTS ------------------------------------------------------------*/
div#posts div.comments{
overflow: hidden;
position: relative;
margin-top: 10px;
padding-top: 30px;
margin-bottom: 40px;
padding-bottom: 0px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
div.comments ol.comments-list li{
display: block;
overflow: hidden;
margin-bottom: 30px;
padding: 10px 10px;
}
div.comments ol.comments-list li:nth-child(odd){
background: #faf9f5;
}
div.comments ol.comments-list li img{
border: 1px solid #665d4e;
padding: 1px;
display: block;
float: left;
margin: 0px 10px 10px 0px;
}
div.comments ol.comments-list li p.meta{
display: block;
font-size: 12px;
line-height: 1.5em;
width: 500px;
float: left;
font-style: italic;
}
div.comments ol.comments-list li p.meta span{
font-weight: bold;
}
div.comments ol.comments-list li p.brief{
display: block;
font-size: 14px;
line-height: 1.5em;
color: #665d4e;
float: left;
width: 520px;
}
/* SIDEBAR ------------------------------------------------------------*/
div#sidebar{
width: 275px;
float: right;
}
div#sidebar ul.side-block,
div#sidebar ul.side-posts{
display: block;
margin-bottom: 10px;
}
div#sidebar ul.side-block li{
display: block;
margin-bottom: 7px;
padding-bottom: 5px;
border-bottom: 1px solid #665d4e;
text-indent: 15px;
}
div#sidebar ul.side-block li a{
font-size: 14px;
line-height: 1.5em;
color: #665d4e;
text-decoration: none;
}
div#sidebar ul.side-posts li{
display: block;
overflow: hidden;
padding: 5px 0px;
margin: 5px 0px;
}
div#sidebar ul.side-posts li img{
float: left;
margin-right: 5px;
padding: 1px;
border: 1px solid #665d4e;
}
div#sidebar ul.side-posts li p.brief,
div#sidebar ul.side-posts li p.title{
display: block;
font-size: 14px;
line-height: 1.5em;
color: #665d4e;
}
div#sidebar ul.side-posts li p.title{
font-weight: bold;
font-size: 14px;
line-height: 1.5em;
}
div#sidebar ul.side-block li:first-child a,
div#sidebar ul.side-posts li:first-child a{
display: block;
font-size: 18px;
line-height: 1.5em;
color: #665d4e;
text-decoration: none;
text-indent: 10px;
padding-top: 16px;
}
div#sidebar ul.side-posts li:first-child a{
padding-top: 10px;
}
div#sidebar ul.side-block li:first-child,
div#sidebar ul.side-posts li:first-child{
background: url(../img/sidebar-top.png) no-repeat ;
height: 50px;
border: none;
}
div#sidebar ul.side-block li:last-child,
div#sidebar ul.side-posts li:last-child{
border: none;
}
/* CONTACT ------------------------------------------------------------*/
div.contact-left{
width: 450px;
float: left;
}
div.contact-right{
width: 450px;
float: right;
}
div.contact-right p{
font-size: 14px;
line-height: 1.5em;
margin-bottom: 1.5em;
color: #665d4e;
}
div.contact-right a{
color: #665d4e;
font-weight: bold;
text-decoration: none;
}
div.taped-image{
display: block;
position: relative;
height: 290px;
}
div.taped-image span{
position: absolute;
background: url(../img/tape.png) no-repeat;
width: 171px;
height: 28px;
left: 120px;
}
div.taped-image em{
position: absolute;
background: url(../img/shadow.png) no-repeat top center;
height: 28px;
width: 100%;
bottom: -11px;
}
div.taped-image img{
margin-top: 15px;
border: 4px solid white;
}
/* FORMS ------------------------------------------------------------*/
div.contact-left form,
div.leave-comment form{
}
div.contact-left form,
div.leave-comment form{
margin-top: 20px;
}
div.contact-left form input,
div.contact-left form textarea,
div.leave-comment form input,
div.leave-comment form textarea{
color: #665d4e;
font-size: 14px;
border: 1px solid #665d4e;
background: #f9f7e8;
padding: 4px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div.contact-left form input,
div.contact-left form textarea,
form#comment-form input,
form#comment-form textarea{
width: 400px;
margin-bottom: 6px;
}
div.contact-left form input#send,
form#comment-form input#send{
width: 87px;
height: 36px;
background: url(../img/submit-button.png) no-repeat transparent;
border: none;
margin-top: 14px;
}
div.contact-left form input#send:hover,
form#comment-form input#send:hover{
background-position: 0px -37px;
}
div.contact-left form fieldset label,
form#comment-form label{
display: block;
font-size: 14px;
line-height: 1.5em;
font-weight: bold;
color: #665d4e;
}
div.contact-left form fieldset p,
form#comment-form p{
}
div.contact-left p#error,
div.leave-comment p#error{
font-size: 14px;
line-height: 1.5em;
font-weight: bold;
color: #cc0000;
margin-bottom: 10px;
}
div.contact-left p#success,
div.leave-comment p#success{
font-size: 14px;
line-height: 1.5em;
font-weight: bold;
color: #e1820b;
margin-bottom: 10px;
}
/* FONT STYLES ------------------------------------------------------------*/
div#main p.boxed-dotted{
background: white;
padding: 5px;
border: 2px dotted gray;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div#main p.boxed-dashed{
background: white;
padding: 5px;
border: 2px dashed gray;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div#main p.boxed-important{
background: #e3b438;
padding: 5px;
border: 2px solid #801409;
color: #801409;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div#main p.boxed-blue{
background: #dfeefa;
padding: 5px;
border: 2px solid #4a5761;
color: #4a5761;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
ul.list li{
margin-left: 20px;
list-style: disc;
font-size: 14px;
line-height: 1.5em;
margin-bottom: 1em;
padding-bottom: 1em;
color: #665d4e;
border-bottom: 1px solid gray;
}
ol.list li{
margin-left: 20px;
list-style-type: decimal;
font-size: 14px;
line-height: 1.5em;
margin-bottom: 1em;
padding-bottom: 1em;
color: #665d4e;
border-bottom: 1px solid gray;
}
/* TOGGLE & ACCORDION ------------------------------------------------------------*/
h5.accordion-trigger,
h5.toggle-trigger {
padding: 0 0 0 45px;
margin: 0 0 5px 0;
height: 46px;
line-height: 46px;
width: 100%;
float: left;
background: url(../img/toggle-button.png) no-repeat 10px 10px;
border-bottom: 1px solid #665d4e;
}
h5.accordion-trigger a,
h5.toggle-trigger a {
color: #665d4e;
text-decoration: none;
display: block;
}
h5.accordion-trigger a:hover,
h5.toggle-trigger a:hover {
color: #606060;
}
h5.accordion-trigger.active,
h5.toggle-trigger.active {
background-position-x: 10px;
background-position-y: -68px;
}
div.accordion-container,
div.toggle-container {
margin: 0 0 5px 0px;;
padding: 0;
overflow: hidden;
width: 455px;
clear: both;
}
div.accordion-container .block,
div.toggle-container .block {
padding: 10px;
}
div.accordion-container .block p,
div.toggle-container .block p{
font-size: 14px;
line-height: 1.5em;
margin-bottom: 1.5em;
}
/* FOOTER ------------------------------------------------------------*/
div#footer{
width: 100%;
padding-top: 60px;
margin-top: 40px;
}
div#footer a{
color: #fff;
}
div#footer ul#follow li p{
font-size: 14px;
line-height: 1.5em;
color: #665d4e;
font-weight: bold;
}
div#footer div#footer-wrapper{
position: relative;
width: 960px;
min-height: 200px;
margin: 0 auto;
background: url(../img/bottom-bg.png) no-repeat bottom center;
}
div#footer div#footer-wrapper ul#follow{
display: block;
position: absolute;
width: 244px;
height: 56px;
top: -80px;
left: 358px;
background: url(../img/follow-bg.png) no-repeat;
}
div#footer div#footer-wrapper ul#follow li{
display: block;
float: left;
margin-left: 17px;
margin-top: 10px;
}
div#footer div.footer-cols{
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
div#footer div.footer-cols div{
width: 238px;
margin: 0px 1px;
float: left;
min-height: 170px;
background: url(../img/footer-separator.png) no-repeat top right;
}
div#footer div.footer-cols ul{
width: 100px;
margin: 0 auto;
}
div#footer div.footer-cols div.last{
background: none;
}
div#footer div.footer-cols ul li{
margin-left: 10px;
margin-bottom: .1em;
}
div#footer div.footer-cols ul li a{
text-decoration: none;
font-size: 14px;
line-height: 1.5em;
font-weight: lighter;
}
div#footer div.footer-cols ul li:first-child{
margin-bottom: .5em;
}
div#footer div.footer-cols ul li:first-child a{
text-decoration: none;
font-size: 14px;
}
div#footer div.footer-cols ul li a:hover{
text-decoration: underline;
}
div#footer div.footer-bottom{
margin-top: 30px;
overflow: hidden;
width: 960px;
}
div#footer div.footer-bottom p.legal{
display: block;
font-size: 12px;
line-height: 1.5em;
height: 30px;
text-align: center;
}