/* ------------------------------------------------------------------------- * AV Arego * Bouw-Verbouwing en Interieur op maat * * Author: * Syahrasi * syahrasi@gmail.com * http://syahrasi.com * ------------------------------------------------------------------------- */ @import url(../font/stylesheet.css); /* ------------------------------------------------------------------------- * =COLOR INFO * ------------------------------------------------------------------------- * These declaration blocks are for informational purpose only, and there is no id * named color_info used anywhere in the template */ #color_info .base_color { color: #666666; } #color_info .light_base_color { color: #cccccc; } #color_info .lightest_base_color { color: #eeeeee; } #color_info .dark_base_color { color: #333333; } #color_info .darker_base_color { color: #222222; } #color_info .darkest_base_color { color: #111111; } #color_info .accent_color { color: #2a7fff; } #color_info .light_accent_color { color: #aaccff; } /* ------------------------------------------------------------------------- * =GLOBAL RESET * ------------------------------------------------------------------------- */ html, body { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } .clear {clear: both} html { font-size: 100.01%; } div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, code, del, dfn, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } blockquote, q { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; quotes: "" ""; } blockquote:before, q:before, blockquote:after, q:after { content: ""; } th, td, caption { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; text-align: left; font-weight: normal; vertical-align: middle; } table { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; border-collapse: separate; border-spacing: 0; vertical-align: middle; } a img { border: none; } * { outline: none; } /* ------------------------------------------------------------------------- * =GENERAL * ------------------------------------------------------------------------- */ body p { color: #666666; } body a { color: #aaccff; text-decoration: none; } body a:visited { color: #cccccc; } body a:focus { color: #2a7fff; } body a:hover { color: #aaccff; } body a:active { color: #aaccff; } body a:hover { text-decoration: underline; } body #content-wrapper a, body #secondary-content a { color: #2a7fff; font-weight: bold; } body #content-wrapper a:visited, body #secondary-content a:visited { color: #aaccff; } body #content-wrapper a:focus, body #secondary-content a:focus { color: #2a7fff; } body #content-wrapper a:hover, body #secondary-content a:hover { color: #2a7fff; } body #content-wrapper a:active, body #secondary-content a:active { color: #aaccff; } .float-right { display: inline; float: right; } .float-left { display: inline; float: left; } /* ------------------------------------------------------------------------- * =TYPOGRAPHY * ------------------------------------------------------------------------- */ body { line-height: 1.5; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; color: #333333; font-size: 87.5%; } h1 { font-weight: normal; color: #222222; font-size: 3em; line-height: 1.6; margin-bottom: 0.5em; } h1 img { margin: 0; } h2 { font-weight: normal; color: #222222; font-size: 2em; margin-bottom: 0.75em; } h3 { font-weight: normal; color: #222222; font-size: 1.5em; line-height: 1; margin-bottom: 1em; clear: both } h4 { font-weight: normal; color: #222222; font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } h5 { font-weight: normal; color: #222222; font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-weight: normal; color: #222222; font-size: 1em; font-weight: bold; } h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } p { margin: 0 0 1.5em; } p img.left { display: inline; float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } p img.right { display: inline; float: right; margin: 1.5em 0 1.5em 1.5em; padding: 0; } a { text-decoration: underline; color: #000099; } a:visited { color: #000066; } a:focus { color: black; } a:hover { color: black; } a:active { color: #cc0099; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em { font-style: italic; } dfn { font-style: italic; font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color: #666; } pre { margin: 1.5em 0; white-space: pre; } pre, code, tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } li ul, li ol { margin: 0; } ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em; } table { margin-bottom: 1.4em; /* width: 100%; */ } th { font-weight: bold; } thead th { background: #c3d9ff; } /* th, td, caption { padding: 4px 10px 4px 5px; } */ tr.even td { background: #e5ecf9; } tfoot { font-style: italic; } caption { background: #eee; } .quiet { color: #666666; } .loud { color: #111111; } h1, h2, h3, h4, h5, h6 { font-family: 'TitilliumText14L600wt', Arial, sans-serif; letter-spacing: 0; } /* ------------------------------------------------------------------------- * =LAYOUT * ------------------------------------------------------------------------- */ #tooltip{ color: #666; border: 1px solid #CCCCCC; background: #f7f7f7; position:absolute; padding:6px 8px; display:none; text-transform:uppercase; font-size:10px; line-height: 190%; max-width: 200px; text-align: center} /*------------------------------------contact*/ .clear {clear: both} #contactform {margin: 20px 0 10px 0 } #contactform fieldset label input { width: 98%; float: left; border: 1px solid #CCCCCC; height: 20px; padding: 5px 0 0 5px; outline: none; } #contactform fieldset label textarea {width: 98%; height: 100px;display: block; border: 1px solid #CCCCCC; overflow: auto; float: left; padding: 5px 0 0 5px; outline: none} #contactform label.holder {display: block; position: relative; padding: 0 0 10px 0; clear: both; float: left; width: 100%} #contactform label.half { width: 47%; margin: 0 5% 0 0} #contactform label.half-last {clear: none; width: 47%;} #contactform label.holder span {display: block; width: 80%; float: left; color:#999; font: bold 12px Arial, Helvetica, sans-serif; text-transform:uppercase;margin: 0 0 4px 0} #contactform fieldset {border: none; outline: none; padding: 0} label.error { color: #da3939; font-size: 10px; font-style: italic; font-weight: normal; width: 70%; text-align: right; position: absolute; top: 28px; right: 15px} /* ------------------------------------------------------------------------- * =LAYOUT * ------------------------------------------------------------------------- */ body { background: #eeeeee url('../images/headerbg-ds.png') no-repeat 50% 38px; min-width: 1000px; } #outer-container { width: 100%; margin: 0 auto 20px; overflow: hidden; display: inline-block; text-align: left; } #outer-container { display: block; } #top-bar-container { width: 100%; margin: 0 auto; overflow: hidden; display: inline-block; background: #222222 url(../images/topbarbg.png) repeat-x bottom; border-bottom: 1px solid #666666; } #top-bar-container { display: none; } #top-bar { width: 940px; margin: 0 auto; overflow: hidden; display: inline-block; width: 980px; padding: 10px 0; } #top-bar { display: block; } #top-bar p { color: #666666; padding: 0 20px; margin: 0; font-size: .8em; } #top-bar p.contact { display: inline; float: left; } #top-bar ul { margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; display: inline-block; display: inline; float: right; padding: 0 20px; font-size: .8em; } #top-bar ul { display: block; } #top-bar ul li { list-style-type: none; margin-left: 0px; white-space: nowrap; display: inline; float: left; padding-left: 0; padding-right: 0; } #top-bar ul li.first { padding-left: 0px; } #top-bar ul li.last { padding-right: 0px; } #top-bar ul li { padding-left: 1em; } #top-bar ul li a { color: #666666; text-decoration: none; padding: 5px 0 5px 20px; } #top-bar ul li a:hover { text-decoration: underline; } #top-bar ul li a:hover { color: #cccccc; } #top-bar ul li a.rss { background: transparent url("../images/icons/rss.png") no-repeat 0 50%; } #top-bar ul li a.facebook { background: transparent url("../images/icons/facebook.png") no-repeat 0 50%; } #top-bar ul li a.tumblr { background: transparent url("../images/icons/tumblr.png") no-repeat 0 50%; } #top-bar ul li a.twitter { background: transparent url("../images/icons/twitter.png") no-repeat 0 50%; } #container { width: 940px; margin: 0 auto; overflow: hidden; display: inline-block; width: 980px; background-color: #FFFFFF; } #container { display: block; } #footer, #action { display: inline; float: left; margin-right: 0; width: 940px; } #header-container { width: 100%; margin: 0 auto -165px; overflow: hidden; display: inline-block; background: #333333 url('../images/hbg/trans-grid.png') repeat center top; border-bottom: 1px solid #FFFFFF; } #header-container { display: block; } #header-bg { width: 100%; height: 319px; margin: 0 auto; overflow: hidden; display: inline-block; background: transparent url('../images/headerbg-ds.png') no-repeat center top; border-bottom: 1px solid #222222; } #header-bg { display: block; } #header { height: 160px; width: 980px; margin: 0 auto; padding: 40px 0; background: transparent url('../images/highlight.png') no-repeat center top; } #header a { text-decoration: none; display: block; } #main-menu { float: right; margin-top: 10px; margin-right: 20px; padding: 0; position: relative; z-index: 9998; font-family: 'TitilliumText14L600wt', Arial, sans-serif; } #main-menu li { float: left; } #main-menu li a { float: left; } #main-menu li { list-style: none; position: relative; padding-right: 8px; } #main-menu li a { padding: 4px 8px; } #main-menu li a:hover { background-color: #111111; } #main-menu li.active a { background-color: #222222; } #main-menu li.active a:hover { background-color: #111111; } #main-menu li ul { display: none; position: absolute; left: 0; top: 100%; padding: 0; margin: 0; z-index: 9999; font-size: .8em; background-color: #222222; } #main-menu li:hover > ul { display: block; } #main-menu li ul li { padding: 0; } #main-menu li ul li, #main-menu li ul li a { float: none; background-color: #222222; } #main-menu li ul li a { width: 120px; display: block; } #main-menu li ul li ul { display: none; font-size: 1em; background-color: #222222; left: 100%; top: 0; } #main-menu li ul li:hover ul { display: block; } #content-wrapper, #secondary-content { display: inline; float: left; margin-right: 0; width: 940px; } /* start slideshow */ #content-wrapper { width: 980px; padding: 0; } #content-wrapper #slider-wrapper { padding: 20px; } #content-wrapper #slider-wrapper #slider { width: 940px; height: 480px; overflow: hidden; position: relative; } #content-wrapper #slider-wrapper #slider .items { width: 20000em; position: absolute; clear: both; } #content-wrapper #slider-wrapper #slider .items div { float: left; } #content-wrapper #slider-wrapper #slider .items div .info { display: none; margin: 0; width: 940px; height: 110px; background: transparent url("../images/trans.png"); } #content-wrapper #slider-wrapper #slider .items div .info h3 { padding: 20px 20px 10px; margin: 0; color: #FFF; } #content-wrapper #slider-wrapper #slider .items div .info h3 a { text-decoration: none; text-decoration: none; } #content-wrapper #slider-wrapper #slider .items div .info h3 a:hover { text-decoration: underline; } #content-wrapper #slider-wrapper #slider .items div .info p { padding: 0 20px 20px; color: #FFFFFF; } #content-wrapper #slider-wrapper .navi { padding: 0; margin: 0; height: 45px; position: absolute; bottom: -18px; left: 400px; z-index: 999; } #content-wrapper #slider-wrapper .navi a { background-position: 0 0; background-image: url(../images/nav.png); width: 20px; height: 20px; margin: 3px; display: block; float: left; font-size: 1px; } #content-wrapper #slider-wrapper .navi a:hover { background-position: 0 -20px; cursor: pointer; } #content-wrapper #slider-wrapper .navi a.active { background-position: 0 -40px; cursor: default; } #content-wrapper #slider-wrapper a.browse { z-index: 999; background: url(../images/arrow.png) no-repeat; display: block; width: 30px; height: 30px; margin: 40px 10px; position: absolute; bottom: -40px; cursor: pointer; } #content-wrapper #slider-wrapper a.right { background-position: 0 -30px; clear: right; margin-right: 0px; right: 10px; } #content-wrapper #slider-wrapper a.right:hover { background-position: -30px -30px; } #content-wrapper #slider-wrapper a.left { background-position: 0 0; margin-left: 0px; left: 10px; } #content-wrapper #slider-wrapper a.left:hover { background-position: -30px 0; } #content-wrapper #slider-wrapper a.disabled { visibility: hidden !important; } /* end of slideshow */ .block { margin-top: 20px; margin-bottom: 20px; } .block h3 { padding: 10px 0; border-bottom-width: 5px; border-bottom-style: solid; } .block ul { margin: 0; } .block a { text-decoration: none; } .block a:hover { text-decoration: underline; } .block.first { margin-left: 20px; } .block.last { margin-right: 0; } #subheader { margin: 0; width: 980px; background-color: #eeeeee; border-bottom: 1px solid #FFFFFF; } #subheader h2 { padding: 20px; margin-bottom: 0; border-bottom: 1px solid #cccccc; color: #666666; } #content { display: inline; float: left; margin-right: 20px; width: 700px; margin: 20px; } #content .post { margin-bottom: 40px; overflow: hidden; display: inline-block; } #content .post { display: block; } #content .post h2 { margin: 0 0 10px 0; font-size: 2.2em; } #content .post h2 a { color: #666666; text-decoration: none; } #content .post h2 a:hover { text-decoration: underline; } #content .post .post-info, #content .post .post-meta { clear: both; padding: 5px 0; border-top: 5px solid #eeeeee; border-bottom: 1px solid #eeeeee; } #content .post .post-meta { margin-top: 20px; margin-bottom: 0; } #content h3.project-title { margin: 0 0 20px; padding: 10px 0; border-bottom: 5px solid #eeeeee; } .single #content { display: inline; float: left; margin-right: 0; width: 940px; margin: 20px; } #portfolio-container { overflow: hidden; display: inline-block; margin: 0; padding: 0; margin-right: -20px; } #portfolio-container { display: block; } #portfolio-container .item { margin: 0 20px 20px 0; } #portfolio-container .item a { border: none; } #portfolio-container .item a img { background-color: #FFFFFF; padding: 4px; border: 1px solid #cccccc; } #portfolio-container .item a:hover img { background-color: #eeeeee; } #portfolio-container.project-gallery .item { display: inline; float: left; margin-right: 20px; width: 220px; height: 280px; padding: 0 0 20px; } #portfolio-container.project-gallery .item .desc h4 { margin: 5px 0 5px 5px; } #portfolio-container.project-gallery .item .desc h4 a { text-decoration: none; } #portfolio-container.project-gallery .item .desc h4 a:hover { text-decoration: underline; } #portfolio-container.project-gallery .item .desc p { margin: 0 0 0 5px; } #portfolio-container.project-gallery-lightbox .item { display: inline; float: left; margin-right: 20px; width: 220px; } #portfolio-container.project-list { margin-right: 0; } #portfolio-container.project-list .item { overflow: hidden; display: inline-block; margin-right: 0; } #portfolio-container.project-list .item { display: block; } #portfolio-container.project-list .item img { display: inline; float: left; margin-right: 20px; } #portfolio-container.project-list .item .desc { display: inline; float: left; margin: 0; width: 380px; } #portfolio-container.project-list .item .desc h3 { margin: 5px 0 10px 0; border-bottom: 1px solid #eeeeee; padding: 0 0 10px; } #portfolio-container.project-list .item .desc h3 a { text-decoration: none; } #portfolio-container.project-list .item .desc h3 a:hover { text-decoration: underline; } #portfolio-container.project-list .item .desc p.view a { color: #eeeeee; font-size: .8em; text-decoration: none; padding: 5px 10px; background-color: #666666; } #portfolio-container.project-list .item .desc p.view a:hover { text-decoration: underline; } #portfolio-container.project-list .item .desc p.view a:hover { background-color: #333333; } #sidebar { display: inline; float: left; margin-right: 0; width: 220px; } #sidebar .block h3 { border-color: #eeeeee; } #sidebar .block ul { padding: 0; } #sidebar .block ul li { list-style-type: none; margin-left: 0px; min-height: 1px; margin: 0; padding: 5px 0 5px 20px; border-bottom: 1px solid #eeeeee; background: transparent url('../images/bullet.png') no-repeat 0 10px; } #sidebar .block ul li.first { border-top: none; } #sidebar .block ul li.last { border-bottom: none; } #secondary-content { background: transparent url('../images/dropshadow.png') no-repeat top left; margin: 0; width: 980px; } #secondary-content .block { display: inline; float: left; margin-right: 20px; width: 300px; color: #333333; } #secondary-content .block h3 { color: #333333; border-color: #eeeeee; } #secondary-content .block p img { background-color: #FFFFFF; padding: 4px; border: 1px solid #cccccc; display: inline; float: left; margin: 0 12px 12px 0; } #secondary-content .block.main { width: 620px } #secondary-content ul.services { padding: 0; } #secondary-content ul.services li { list-style-type: none; margin-left: 0px; min-height: 1px; margin: 0; padding: 5px 0 5px 20px; border-bottom: 1px solid #eeeeee; background: transparent url('../images/bullet.png') no-repeat 0 10px; } #secondary-content ul.services li.first { border-top: none; } #secondary-content ul.services li.last { border-bottom: none; } #secondary-content p.testimonials { background: transparent url('../images/lquote.png') no-repeat top left; text-indent: 1.5em; } #secondary-content p.testimonials .client { text-align: right; display: block; padding-top: 10px; } #footer { background: #333333 url('../images/dropshadow.png') no-repeat top left; width: 980px; } #footer a { text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer .block { display: inline; float: left; margin-right: 20px; width: 300px; color: #cccccc; } #footer .block h3 { color: #cccccc; border-color: #222222; } #footer .block p { color: #cccccc; } #footer .photo-gallery { text-align: center; overflow: hidden; display: inline-block; margin-right: -12px; } #footer .photo-gallery { display: block; } #footer .photo-gallery a { border: none; } #footer .photo-gallery a img { background-color: #222222; width: 56px; height: 56px; display: inline; float: left; margin: 0 12px 12px 0; border: 5px solid #222222; } #footer .photo-gallery a:hover img { border-color: #cccccc; } #footer .blog-post-wrapper { overflow: hidden; display: inline-block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #222222; } #footer .blog-post-wrapper { display: block; } #footer .blog-post-wrapper .date-box { display: inline; float: left; margin-right: 20px; background-color: #222222; padding: 10px 5px; width: 30px; font-size: .6em; font-weight: bold; text-align: center; } #footer .blog-post-wrapper .date-box span { margin: 0; padding: 0; display: block; line-height: normal; } #footer .blog-post-wrapper .date-box span.month { font-size: 2em; } #footer .blog-post-wrapper .blog-post { display: inline; float: left; width: 240px; padding: 0; margin: 0; } #footer ul.tweet { padding: 0; margin-bottom: 20px; } #footer ul.tweet li { list-style-type: none; margin-left: 0px; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid #222222; position: relative; } #footer ul.tweet li.last { border: none; } #footer ul.tweet li span { font-style: italic; } #footer p.twitter-follow { text-align: center; font-size: .8em; } #footer p.twitter-follow a.button { position: relative; color: #333333; padding: 4px 45px 4px 12px; margin-left: 10px; background: #2a7fff url(../images/overlay-button.png) repeat-x; text-decoration: none; display: inline-block; cursor: pointer; font-weight: bold; } #footer p.twitter-follow a.button:hover { background-color: #aaccff; text-decoration: none; } #footer p.twitter-follow a.button:visited { color: #333333; } #footer p.twitter-follow a.button span { position: absolute; right: -3px; top: -21px; display: block; width: 50px; height: 50px; background: transparent url("../images/twitter.png") no-repeat; } #footer .footer-bottom { display: inline; float: left; margin-right: 0; width: 940px; width: 980px; background: #333333 url('../images/dropshadow.png') no-repeat top left; font-family: 'TitilliumText14L600wt', Arial, sans-serif; } #footer .footer-bottom ul { display: inline; float: left; margin-right: 20px; width: 620px; margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; display: inline-block; padding: 20px 0; margin: 0 20px; } #footer .footer-bottom ul { display: block; } #footer .footer-bottom ul li { list-style-type: none; margin-left: 0px; white-space: nowrap; display: inline; float: left; padding-left: 0; padding-right: 0; } #footer .footer-bottom ul li.first { padding-left: 0px; } #footer .footer-bottom ul li.last { padding-right: 0px; } #footer .footer-bottom ul li { padding-right: 20px; } #footer .footer-bottom p { display: inline; float: left; margin-right: 0; width: 300px; margin-bottom: 0; color: #cccccc; padding: 20px 0; text-align: right; } /* ------------------------------------------------------------------------- * =COMPONENT * ------------------------------------------------------------------------- */ #logo_wrapper { display: inline; float: left; margin-left: 20px; } #logo { position: relative; font-family: 'TitilliumText14L600wt', Arial, sans-serif; color: #FFFFFF; letter-spacing: 0; display: inline; float: left; margin: 0; padding: 8px 40px 0 0; /* image replacement */ text-indent: -9999em; overflow: hidden; text-align: left; background-image: url('../images/../images/logo.png'); background-repeat: no-repeat; background-position: 0 0; width: 165px; /* end image replacement */ } #logo .home { display: none; } #logo:hover .home { display: block; width: 32px; height: 32px; position: absolute; right: 0; top: 0; background: transparent url("../images/home.png") no-repeat 0 0; } #slogan { color: #aaccff; font-size: 0.9em; margin: 0; padding: 0; display: inline; float: left; clear: left; text-transform: uppercase } #welcome { background: #111111; margin: 0; padding: 20px; } #welcome p { margin: 0; padding: 0; font-family: 'TitilliumText14L250wt', Arial, sans-serif; font-size: 2.2em; color: #eeeeee; } #welcome-image { display: inline; float: left; background: #111111; margin: 0; padding: 0; } #welcome-image img { margin: 0; padding: 0; } #content p.intro, #sidebar p.intro { font-size: 1.2em; } #content p img, #sidebar p img, #content p .thumb_holder { background-color: #FFFFFF; padding: 4px; border: 1px solid #cccccc; margin: 0 10px 10px 0; } #content p img.float-right, #sidebar p img.float-right { margin-right: 0; margin-left: 10px; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { margin-top: 1.2em; color: #666666; } #action { background-color: #222222; width: 980px; padding: 0; } #action p { font-size: 1.5em; color: #cccccc; margin: 0; padding: 20px; text-align: center; font-family: 'TitilliumText14L600wt', Arial, sans-serif; } #action p a.button { color: #333333; padding: 4px 12px; margin: 0 7px; background: #2a7fff url(../images/overlay-button.png) repeat-x; text-decoration: none; display: inline-block; cursor: pointer; font-weight: bold; } #action p a.button:hover { background-color: #aaccff; text-decoration: none; } #action p a.button:visited { color: #333333; } blockquote { background-color: #FFFFFF; padding: 20px; border-left: 5px solid #cccccc; margin: 20px 0 20px 30px; } code { background-color: #FFFFFF; padding: 20px; border: 1px solid #cccccc; margin: 20px 0 20px 30px; display: block; } /* table { background-color: #FFFFFF; } table thead th { background-color: #cccccc; } table tbody tr th, table tbody tr td { border-bottom: 1px solid #cccccc; } */ #search { background-color: #eeeeee; margin: 20px 0; padding: 20px 20px; } #search .form-wrapper { background-color: #FFFFFF; border: 1px solid #cccccc; } #search .form-wrapper fieldset { border: none; } #search .form-wrapper legend { display: none; } #search .form-wrapper label { position: absolute; left: -9999px; } #search .form-wrapper input[type="text"] { border: 0; padding: 3px; width: 145px; } #search .form-wrapper input[type="image"] { border: 0; margin: 0; vertical-align: -8px; } ol.comments { margin: 0 0; padding: 0; list-style: none; } ol.comments li { border-bottom: 1px solid #eeeeee; padding: 10px 0; } ol.comments ul { margin: 0; padding: 0; list-style: none; } .comments li { margin: 20px 0; overflow: hidden; } .comments .meta { float: left; display: inline; width: 140px; } .comments .meta li { margin: 0; border: none; padding: 0; } .comments .meta .date { color: #cccccc; font-size: .8em; } .comments .meta img { background-color: #FFFFFF; padding: 4px; border: 1px solid #cccccc; } .comments .body { float: left; display: inline; width: 540px; padding: 0; margin-left: 20px; } #commentform { overflow: hidden; display: inline-block; } #commentform { display: block; } #commentform p { margin: 0; padding: 0 0 20px; } #commentform p.top-row { display: inline; float: left; margin-right: 20px; width: 220px; } #commentform p.top-row.last { margin-right: 0; } #commentform p.button { display: inline; float: right; margin: 0; padding: 0; } #commentform label { font-weight: bold; } #commentform input, #commentform select, #commentform textarea { margin: 5px 0; padding: 4px; border: 1px solid #cccccc; background-color: #eeeeee; } #commentform input:focus, #commentform select:focus, #commentform textarea:focus { background-color: #FFFFFF; border: 1px solid #cccccc; } #commentform #name, #commentform #email, #commentform #website { width: 210px; } #commentform #message { width: 690px; } #commentform input.button { color: #eeeeee; text-decoration: none; border: none; padding: 5px 10px; background-color: #666666; } #commentform input.button:hover { text-decoration: underline; } #commentform input.button:hover { background-color: #333333; } #contactform { overflow: hidden; display: inline-block; } #contactform { display: block; } #contactform p { margin: 0; padding: 0 0 20px; } #contactform p.top-row { display: inline; float: left; margin-right: 20px; width: 220px; } #contactform p.top-row.last { margin-right: 0; } #contactform p.button { display: inline; float: right; margin: 0; padding: 0; } #contactform label { font-weight: bold; } #contactform input, #contactform select, #contactform textarea { margin: 5px 0; padding: 4px; border: 1px solid #cccccc; background-color: #eeeeee; } #contactform input:focus, #contactform select:focus, #contactform textarea:focus { background-color: #FFFFFF; border: 1px solid #cccccc; } #contactform #name, #contactform #email, #contactform #subject, #contactform #message { /* width: 690px; */ } #contactform p.button { position: relative; padding: 0; display: block; background-color: #333333; margin-bottom: 20px; cursor: pointer } #contactform p.button:hover { background-color: #333333;cursor: pointer } #contactform p.button input.button { color: #eeeeee; background-color: transparent; text-decoration: none; border: none; padding: 2px 10px 5px 10px; margin: 0; cursor: pointer} #contactform p.button input.button:hover { text-decoration: underline; cursor: pointer} #contactform p.button img.loaderIcon { border: none; background-color: transparent; position: absolute; margin: 0; top: 0; right: 0; cursor: pointer} #response { margin: 0 0 20px 0; padding: 10px 10px 10px 20px; display: none; } #response p { padding: 0 0 0 25px; } #response.error { border: 2px solid #FBC2C4; background-color: #FBE3E4; display: block; } #response.error p { color: #8A1F11; background: transparent url("../images/exclamation.png") no-repeat 0 0; } #response.success { border: 2px solid #C6D880; background-color: #E6EFC2; display: block; } #response.success p { color: #264409; background: transparent url("../images/tick.png") no-repeat 0 0; } #contact-main #spam-check { display: none; } h3.comment-header, h3.comment-form-header { padding: 10px 0; border-bottom: 5px solid #eeeeee; } #pagination { overflow: hidden; display: inline-block; clear: both; padding: 0; margin: 0 0 20px; } #pagination { display: block; } #pagination li { list-style-type: none; margin-left: 0px; display: inline; float: left; margin: 0 5px; font-size: .8em; } #pagination li.prev { margin-left: 0; } #pagination li.next { margin-right: 0; } #pagination li a { display: block; padding: 4px 10px; background-color: #eeeeee; color: #333333; } #pagination li a:hover { background-color: #666666; color: #eeeeee; } #pagination li a.active { background-color: #666666; color: #eeeeee; } /* ------------------------------------------------------------------------- * =THEME * ------------------------------------------------------------------------- */ /* LIGHT THEME * Apply this theme by adding "light" class to * example: */ body.light { background-color: #FFFFFF; } body.light #content-wrapper #subheader { background-color: #FFFFFF; background-image: none; } body.light #content-wrapper #subheader h2 { border-color: #eeeeee; } body.light #top-bar-container { background-color: #666666; border-color: #FFFFFF; } body.light #top-bar-container #top-bar p { color: #eeeeee; } body.light #top-bar-container #top-bar ul a { color: #eeeeee; } body.light #header-container { background: #eeeeee url(../images/hbg/noise-light.png) repeat center top; border-color: #eeeeee; } body.light #header-container #header-bg { border-color: #cccccc; } body.light #header-container #header-bg #header #logo_wrapper #logo { color: #333333; } body.light #header-container #header-bg #header #logo_wrapper #slogan { color: #666666; } body.light #main-menu li a { color: #666666; } body.light #main-menu li a:hover { color: #FFFFFF; background-color: #666666; } body.light #main-menu li.active a { color: #FFFFFF; background-color: #666666; } body.light #main-menu li ul { background-color: #666666; } body.light #main-menu li ul a { color: #cccccc; } body.light #action { background-color: #666666; } body.light #action p { color: #eeeeee; } body.light #footer { background-color: #eeeeee; } body.light #footer .block h3 { color: #666666; border-color: #cccccc; } body.light #footer p, body.light #footer li, body.light #footer a { color: #666666; } body.light #footer .photo-gallery a img { border-color: #cccccc; } body.light #footer .photo-gallery a:hover img { border-color: #FFFFFF; } body.light #footer .blog-post-wrapper { border-color: #cccccc; } body.light #footer .blog-post-wrapper .date-box { color: #FFFFFF; background-color: #666666; } body.light #footer .tweet li { border-color: #cccccc; } body.light #footer .footer-bottom { background-color: #cccccc; } body.light #footer .footer-bottom a { color: #666666; } /* DARK THEME * Apply this theme by adding "dark" class to * example: * note: */ body.dark { background-color: #222222; } body.dark p, body.dark ul, body.dark li, body.dark dl, body.dark table { color: #cccccc; } body.dark code, body.dark blockquote, body.dark th { color: #cccccc; background-color: #111111; border-color: #333333; } body.dark td { color: #cccccc; background-color: #222222; border-color: #333333; } body.dark #header-container { border-color: #666666; } body.dark #header-container #header-bg { border-color: #111111; } body.dark #container { background-color: #222222; } body.dark #container #action { background-color: #333333; } body.dark #container #subheader { background-color: #222222; background-image: none; border-bottom: none; } body.dark #container #subheader h2 { color: #cccccc; border-color: #333333; } body.dark #container #content-wrapper #content h1, body.dark #container #content-wrapper #content h2, body.dark #container #content-wrapper #content h3, body.dark #container #content-wrapper #content h4, body.dark #container #content-wrapper #content h5, body.dark #container #content-wrapper #content h6 { color: #eeeeee; } body.dark #container #content-wrapper #content .post-info, body.dark #container #content-wrapper #content .post-meta { border-color: #333333; } body.dark #container #content-wrapper #content h3.comment-header, body.dark #container #content-wrapper #content h3.comment-form-header, body.dark #container #content-wrapper #content h3.project-title { border-color: #333333; } body.dark #container #content-wrapper #content .comments li { border-color: #333333; } body.dark #container #content-wrapper #content #pagination li a { background-color: #111111; color: #eeeeee; } body.dark #container #content-wrapper #content #pagination li a:hover { background-color: #666666; color: #eeeeee; } body.dark #container #content-wrapper #content #pagination li a.active { background-color: #666666; color: #eeeeee; } body.dark #container #content-wrapper #content #contact-main p.button img.loaderIcon { border: none; background-color: transparent; } body.dark #container #content-wrapper #content #contact-main #response.error { border: 2px solid #FBC2C4; background-color: #8A1F11; } body.dark #container #content-wrapper #content #contact-main #response.error p { color: #FBE3E4; } body.dark #container #content-wrapper #content #contact-main #response.success { border: 2px solid #C6D880; background-color: #264409; } body.dark #container #content-wrapper #content #contact-main #response.success p { color: #E6EFC2; } body.dark #container #content p img, body.dark #container #content .comments img, body.dark #container #sidebar p img, body.dark #container #sidebar .comments img, body.dark #container #secondary-content p img, body.dark #container #secondary-content .comments img { background-color: #222222; border-color: #333333; } body.dark #container #content p a:hover img, body.dark #container #content .comments a:hover img, body.dark #container #sidebar p a:hover img, body.dark #container #sidebar .comments a:hover img, body.dark #container #secondary-content p a:hover img, body.dark #container #secondary-content .comments a:hover img { background-color: #cccccc; } body.dark #container #content a, body.dark #container #sidebar a, body.dark #container #secondary-content a { color: #aaccff; font-weight: bold; } body.dark #container #content a:visited, body.dark #container #sidebar a:visited, body.dark #container #secondary-content a:visited { color: #cccccc; } body.dark #container #content a:focus, body.dark #container #sidebar a:focus, body.dark #container #secondary-content a:focus { color: #2a7fff; } body.dark #container #content a:hover, body.dark #container #sidebar a:hover, body.dark #container #secondary-content a:hover { color: #aaccff; } body.dark #container #content a:active, body.dark #container #sidebar a:active, body.dark #container #secondary-content a:active { color: #aaccff; } body.dark #container #content .block h3, body.dark #container #sidebar .block h3, body.dark #container #secondary-content .block h3 { color: #eeeeee; border-color: #333333; } body.dark #container #content .block li, body.dark #container #sidebar .block li, body.dark #container #secondary-content .block li { border-color: #333333; } body.dark #container #portfolio-container .item a img { background-color: #222222; border-color: #333333; } body.dark #container #portfolio-container .item a:hover img { background-color: #cccccc; } body.dark #container #portfolio-container .item .desc h3 { border-color: #333333; } body.dark #container #portfolio-container .item .desc .view a { background-color: #111111; } body.dark #container #portfolio-container .item .desc .view a:hover { background-color: #333333; } body.dark #container #search { background-color: #333333; } body.dark #container #footer .block h3 { color: #eeeeee; } /* GRUNGE THEME * Apply this theme by adding "grunge" class to * example: * * note: you can combine this with dark or light theme by chaining classes * example: or */ body.grunge { background-image: url(../images/headerbg-ds-tx.png); } body.grunge #header-bg { background-image: url(../images/headerbg-ds-tx.png); } /* ------------------------------------------------------------------------- * =CSS3 * ------------------------------------------------------------------------- */ h1, h2, h3 { /* text-shadow: #aaaaaa 1px 1px 1px; */} #logo { text-shadow: #333333 1px 1px 1px; } #logo:hover .home { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #slogan { text-shadow: #222222 1px 1px 1px; } #main-menu ul { /* Webkit (Safari, Chrome) */ -webkit-box-shadow: #111111 1px 1px 5px; /* Gecko (Firefox, Camino) */ -moz-box-shadow: #111111 1px 1px 5px; /* CSS3 */ box-shadow: #111111 1px 1px 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #main-menu li { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #main-menu li a { text-shadow: #333333 1px 1px 1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #main-menu li a:hover { text-shadow: #333333 1px 1px 1px; } #main-menu li.active a { text-shadow: #333333 1px 1px 1px; } #main-menu li.active a:hover { text-shadow: #333333 1px 1px 1px; } #main-menu li.active li a:hover { text-shadow: #333333 1px 1px 1px; } #content-wrapper #slider-wrapper #slider .items div .info h3 { text-shadow: #222222 1px 1px 1px; } #subheader h2 { text-shadow: white 1px 1px 1px; } #portfolio-container .item a img { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #portfolio-container.project-list .item .desc p.view a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #secondary-content .block h3 { text-shadow: #cccccc 1px 1px 1px; } #secondary-content .block p img { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #action p { text-shadow: #333333 1px 1px 1px; } #action p a.button { border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; /* Webkit (Safari, Chrome) */ -webkit-box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; /* Gecko (Firefox, Camino) */ -moz-box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; /* CSS3 */ box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; border-bottom: 1px solid rgba(0,0,0,0.25); text-shadow: #cccccc 1px 1px 1px; } #footer .block h3 { text-shadow: #222222 1px 1px 1px; } #footer .photo-gallery a img { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #footer .blog-post-wrapper .date-box { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #footer p.twitter-follow a.button { border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; /* Webkit (Safari, Chrome) */ -webkit-box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; /* Gecko (Firefox, Camino) */ -moz-box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; /* CSS3 */ box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; border-bottom: 1px solid rgba(0,0,0,0.25); text-shadow: #cccccc 1px 1px 1px; } #content p img, #sidebar p img, #content p .thumb_holder { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .comments .meta img { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #commentform input.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #contactform p.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #pagination li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* ------------------------------------------------------------------------- * =THEME * ------------------------------------------------------------------------- */ /* LIGHT THEME * Apply this theme by adding "light" class to * example: */ body.light #header-container #header-bg #header #logo_wrapper #logo { text-shadow: #666666 1px 1px 1px; } body.light #header-container #header-bg #header #logo_wrapper #slogan { text-shadow: #cccccc 1px 1px 1px; } body.light #main-menu li a { text-shadow: #cccccc 1px 1px 1px; } body.light #main-menu li a:hover { text-shadow: #333333 1px 1px 1px; } body.light #main-menu li.active a { text-shadow: #333333 1px 1px 1px; } body.light #main-menu li ul a { text-shadow: #666666 1px 1px 1px; } body.light #main-menu li ul li, body.light #main-menu li ul li a { background-color: #666666; } body.light #main-menu li ul li a:hover { background-color: #333333; } body.light #footer .block h3 { text-shadow: #cccccc 1px 1px 1px; } /* DARK THEME * Apply this theme by adding "dark" class to * example: */ body.dark h1, body.dark h2, body.dark h3 { text-shadow: #222222 1px 1px 1px; } body.dark #container #subheader h2 { text-shadow: #222222 1px 1px 1px; } body.dark #container #content .block h3, body.dark #container #sidebar .block h3, body.dark #container #secondary-content .block h3 { text-shadow: #222222 1px 1px 1px; }