/*
THEME NAME: EFCOM based on Sandbox
THEME URI: http://www.edfladung.com & http://www.plaintxt.org/themes/sandbox/
DESCRIPTION: my portfolio theme, my design, sandbox's functionality. yes, i know i could have designed a child theme for sandbox, but there was was too much funcationality i have changed. and i don't plan to relase this theme publicly.
VERSION: .1
AUTHOR: Ed Fladung & Andy Skelton & Scott Allan Wallick
AUTHOR URI:
TAGS: ed fladung, design, photogrpahy, portfolio, sandbox, microformats, hcard, hatom, xoxo, widgets, blank slate, starter theme, minimalist, developer
*/
/* structure */
body, html, #wrapper {height:100%;}
p {margin-bottom: 20px;}
body > #wrapper {height: auto; min-height: 100%;}
/* tooltips - i put this code at the front of the stylesheet because it didn't seem to work at the end. weird */
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #eee;
padding: 5px;
opacity: 0.8;
}
#tooltip h3, #tooltip div { margin: 0; }
#tooltip.pretty1 {
font-family: Arial;
border: none;
width: 93px;
height: 37px;
background: url('imgs/tooltip_img.png') no-repeat;
text-indent: -3000px;
}
#tooltip.pretty2 {
font-family: Arial;
border: none;
width: 93px;
height: 37px;
background: url('imgs/tooltip_grid.png') no-repeat;
text-indent: -3000px;
}
#tooltip.pretty h3 {
margin-bottom: 0.75em;
font-size: 12pt;
width: 220px;
text-align: center;
}
#tooltip.pretty div { width: 93px; text-align: center; }
/*the hackalicious sticky footer is done with this tutorial: http://www.cssstickyfooter.com/ */
#wrapper, #footer-wrapper {width:1020px; margin:auto; background: #fbf2e9 url(imgs/background.jpg) repeat-y; clear:both;}
#wrapper2 {padding-bottom: 142px;}
#header {position:relative; background: url(imgs/header-bg.png) no-repeat; padding: 0 30px;}
#footer {height:142px; background: url(imgs/footer-bg.png) no-repeat; padding: 0 30px; margin-top: -142px; clear:both;}
#site-title {background: url(imgs/logo.png) no-repeat; height: 135px; text-indent: -4000px; width: 160px; margin-left: 80px;}
#site-title a {display: block; height:135px; width:160px;}
#site-description {float: left; text-indent: -8000px;}
.banner, .about {margin-bottom: 40px; padding-bottom:40px; border-bottom: 1px solid #d8d8d3;}
#access { display: none;}
/* vertical alignment hack for header navs and footer text */
#header .valign {height: 112px; display: table;}
#sub-nav .valign {float:right;}
#footer .valign {height: 122px; display: table; margin-top:20px;}
.valign ul, .valign p {display: table-cell; vertical-align: middle;}
.non-image { display: table; background: #ffffff; padding:15px;}
/* main and sub nav home*/
#main-nav ul, #footer ul {list-style: none; margin:0; }
#main-nav ul li, #footer ul li {display: inline; margin:0;}
#main-nav ul li {float: left;}
#main-nav ul li.page-item-3 {display:block; background: url(imgs/nav-design.png) no-repeat 0 0; height:47px; width:82px; text-indent: -4000px;}
#main-nav ul li.page-item-3 a {display:block; height:47px; width:82px;}
#main-nav ul li.page-item-8 {display:block; background: url(imgs/nav-photo.png) no-repeat; height:47px; width:138px; text-indent: -4000px; margin-left: 20px;}
#main-nav ul li.page-item-8 a {display:block; height:47px; width:138px;}
#main-nav ul li:hover {display:block; background-position: 0 -141px;}
#main-nav ul li:active {display:block; background-position: 0 -94px;}
body.pageid-3 #main-nav ul li.page-item-3, body.parent-pageid-3 #main-nav ul li.page-item-3,
body.pageid-8 #main-nav ul li.page-item-8, body.parent-pageid-8 #main-nav ul li.page-item-8 {background-position-y: -47px;}
#sub-nav ul {line-height:40px;}
#sub-nav ul li {color: #22404a; margin: 0 2px; padding-bottom: 2px;}
#sub-nav ul li.page-item-2 a {background: url(imgs/nav-infocontact.png) no-repeat 5px 3px; }
#sub-nav ul li.page-item-12 a {background: url(imgs/nav-news.png) no-repeat 5px 3px; }
#sub-nav ul li.page-item-17 a {background: url(imgs/nav-prints.png) no-repeat 5px 3px; }
#sub-nav ul li.blog a {background: url(imgs/nav-blog.png) no-repeat 5px 3px; }
#sub-nav ul li a { display:block; padding: 2px 4px; height:12px; width:120px; text-indent: -4000px;}
#sub-nav ul li a:hover { background-color: #85e7f0; }
#sub-nav ul li.current_page_item { background-color: #ffffff; }
#sub-nav ul li.current_page_item a {background-color: #ffffff; }
#main-content { padding-bottom:40px;}
#sidebar{}
#content {}
/* banner */
.banner.home .banner-msg p, .banner.info .banner-msg p {height:90px; width:780px; text-indent: -4000px; margin:0 !important;}
.banner.home .banner-msg p {background: url(imgs/banner-home.png) no-repeat;}
.banner.info .banner-msg p {background: url(imgs/banner-about.png) no-repeat;}
.banner.home .banner-msg p a {float: left; display: block; height:90px; width:780px; }
.banner.info .banner-msg p:hover {background-position-y: -90px;}
.banner-thumb img {border: 5px solid #fff; background: #fff;}
.row1 {margin-bottom: 40px; padding-bottom:30px; border-bottom: 1px solid #d8d8d3;}
/* info+contact social networking basura */
.info .social ul li {float:left; display: inline; width:40px; height:40px; text-indent: -4000px; opacity: 0.7;}
.info .social ul li:hover {opacity: 1;}
.info .social ul li a {display: block; width:40px; height:40px;}
.info .social ul li.twitter {background: url(imgs/social-twitter.png) no-repeat;}
.info .social ul li.facebook {background: url(imgs/social-facebook.png) no-repeat;}
.info .social ul li.flickr {background: url(imgs/social-flickr.png) no-repeat;}
.info .social ul li.linkedin {background: url(imgs/social-linkedin.png) no-repeat;}
.info .social ul li.lastfm {background: url(imgs/social-lastfm.png) no-repeat;}
.info .social ul li.delicious {background: url(imgs/social-delicious.png) no-repeat;}
.info .social ul li.vimeo {background: url(imgs/social-vimeo.png) no-repeat;}
.info .words h6.qp-logo, .info .words h6.drift-logo { float:left; text-indent: -4000px; opacity: 0.7; padding-right:5px; }
.info .words h6.qp-logo:hover, .info .words h6.drift-logo:hover { opacity: 1;}
.info .words h6 a {display: block; width:40px; height:40px;}
.info .words h6.qp-logo {background: url(imgs/qp-logo.png) no-repeat;}
.info .words h6.drift-logo {background: url(imgs/drift-logo.png) no-repeat;}
/* awesome jquery rollovers politely borrowed from CraigSteely.com */
.portfolio-thumb {position:relative;}
.portfolio-thumb img, .about img {border: 11px solid #fff !important; background: #fff; display:block;}
.thumb-over { background: url(imgs/thumb-over.png); display: none; height: 100%; left: 11px; position: absolute; top: 11px; width:200px; height:133px; text-indent: -4000px;}
.portfolio {position: relative;}
#pics, #pics-auto {position: absolute; display: block; top:0; left:0;}
#pics img, #pics-auto img { border: 15px solid #fff; background: #fff;}
#pics-sizer { display: block; margin-bottom: 20px;}
#pics-sizer img {width: 335px; margin: 15px;}
.pics-sizer-left {background: red;}
.pics-sizer-right {background: blue;}
/* typography */
#body { font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; line-height: 18px; text-shadow: #fff 0px 0px 1px; }
#footer ul { color: #22404a; text-align: right;}
#footer ul li {border-right: 1px solid #999791;}
#footer ul li:last-child {border:0;}
#footer a { color: #22404a; width:auto; text-decoration: underline; }
#footer ul li a { padding: 2px 6px; width:auto;}
#footer a:hover { color: #22404a; text-decoration: none;}
#footer a:active { color: #79e6f0; text-decoration: none;}
#footer .copyright{ color: #22404a; padding:0; margin:0;}
h2 { text-shadow: #fff 0px 0px 1px;}
/* sidebar */
#sidebar h3 { font-size: 13px; margin-bottom: 0px;}
h3.news-title a {text-decoration: none; padding: 2px 4px;}
h3.news-title a:hover { color: #22404a; background: #85e7f0; text-decoration: none;}
h3.news-title a:active { background: #22404a; color: #fff;}
#sidebar .news-content {padding-left: 4px;}
#sidebar .p1, #sidebar .p2 { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #d8d8d3;}
body.blog #sidebar ul li, body.single #sidebar ul li { margin-bottom: 20px; border-bottom: 1px solid #d8d8d3;}
body.blog #sidebar li.widget_search, body.single #sidebar li.widget_search { padding-bottom: 20px;}
body.blog #sidebar ul li ul li, body.single #sidebar ul li ul li { margin-bottom: 0px; border-bottom: 0px;}
.news-meta { font-family: Georgia, Arial; font-style: italic;}
.news-utility a { font-style: italic; margin-bottom: 25px;}
div.news, div#project-nav { margin-bottom: 20px;}
div.news-row { margin-bottom: 20px;}
div.news p { margin-bottom: 0 !important;}
div.news .cat-links a {font-family: Georgia, Arial; text-decoration: none;}
div.news .cat-links a:hover { color: #22404a; background: #85e7f0; text-decoration: none;}
div.news .cat-links a:active { background: #22404a; color: #fff;}
.portfolio-title { margin-top: 5px;}
#project-nav ul .page_item a, .portfolio-title a {text-decoration: none; padding: 2px 4px;}
#project-nav ul .page_item a:hover, .portfolio-title a:hover{ color: #22404a; background: #79e6f0; text-decoration: none;}
#project-nav ul .page_item a:active, .portfolio-title :active { background: #22404a; color: #fff;}
.portfolio-title, .portfolio-utility { text-align: center;}
.portfolio-title a {font-weight: bold;}
.project-link span.new {font-size:11px; background: #fff; color:#8fe8ef; padding: 2px 5px; text-decoration: none; margin: 0 2px; -webkit-border-radius:10px 10px;}
.design-index, .photo-index {display:block; background: url(imgs/thumbgrid.png) no-repeat; height:33px; width:48px; text-indent: -4000px;}
.design-index a, .photo-index a {display:block; height:33px; width:48px;}
.design-index:hover, .photo-index:hover {display:block; background-position: 0 -33px;}
.design-index:active, .photo-index:active {display:block; background-position: 0 -66px;}
.portfolio-container { width: 220px; margin-bottom: 30px; float: left;}
#content .post-2, #content .post-5, #content .post-8, #content .post-11 { margin: 0 20px;}
#content .post-4, #content .post-7 {clear:left;}
/* portfolio + news */
.image-nav, .news-date {font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; margin-left: 20px; text-shadow: none; line-height:20px; color: #999791;}
.image-nav a {background: #f75b7c; color:#fff; padding: 2px 8px; text-decoration: none; margin: 0 2px; -webkit-border-radius:10px 10px;}
.image-nav a:hover { background: #22404a; color: #fff; text-decoration: none;}
.image-nav a:active { color: #22404a; background: #85e7f0;}
.image-nav #next {margin-right:5px;}
.image-nav #caption { margin-left: 10px;}
#content .news-meta, .info .words p.qp-text, #content h2.page-title { margin-bottom: 40px; padding-bottom:30px; border-bottom: 1px solid #d8d8d3;}
#content h2.page-title { font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; font-weight: bold;}
.news-entry img {margin-bottom: 20px; border: 15px solid #fff; background: #fff;}
.portfolio-meta {float: left; position: relative;}
.portfolio-meta p, .news-meta p, .portfolio-utility p, .portfolio-utility {font-size:11px; line-height: 16px;}
.portfolio-meta a, .news-meta a, .portfolio-utility p, .portfolio-utility { font-style: italic;}
#content .permalink a { font-size: 11px; padding: 2px 4px;}
#content .permalink a:hover { color: #22404a; background: #85e7f0; text-decoration: none;}
#content .permalink a:active { background: #22404a; color: #fff;}
ul.extrspcr li { padding-bottom: 10px;}
ul.extrspcr li ul { margin-bottom: 5px;}
ul.extrspcr li ul li{ padding-bottom: 0px;}
.small {font-style: italic; font-size:11px; line-height: 9px;}
}