/* -------------------------------------------------------------- Theme Name: WPESP - Portfolio Theme Coda Theme URI: http://www.wpesp.com/portfolio Description: A Portfolio Theme by WPESP. Author: Víctor García Cuenllas. Author URI: http://wpesp.com Version: 0.1 Tags: portfolio, theme, wpesp General comments/License Statement if any. TYPOGRAPHY Font families: - Sans-serif: Arial, Helvetica, sans-serif - Serif: Georgia,"Times New Roman",Times,serif Font size: 28px -> 2.333em 24px -> 2em 20px -> 1.666em 16px -> 1.333em 14px -> 1.166em 12px -> Deafult (body{font-size: 75%}) Colors: - Pink: #ED184A - Blue: #159F9F - Dark prune: #3E2E39 - Beige: #F8F0D0 - Light Grey: #999 -------------------------------------------------------------- */ @import "style/css/reset.css"; /*@import "style/css/diagnostic.css"; Just use for developing tests */ /* Text meant only for screen readers */ .screen-reader-text { position: absolute; left: -9000px; } /* -------------------------------- WordPress.com Stats - I hide the smiley (http://wordpress.org/extend/plugins/stats/faq/) -------------------------------- */ img#wpstats { display:none; } /*=THE BIG GUYS ----------------------------------------------- */ body { font: 80%/1.5em Arial, Helvetica, sans-serif; background:transparent url(style/images/dot-pattern2.png) top left repeat; border-top: solid 2px #ED184A;} /*body { font: 75%/1.5em Arial, Helvetica, sans-serif; background: #ffffff url(style/images/wood-texture.jpg) top left repeat-x; padding-top:10px;} */ /*=LAYOUT ----------------------------------------------- */ #wrap { width:970px; margin-left:auto; margin-right:auto; padding:0px 0px 20px 0px;} /* -------------------------------- CENTER ALL 946px -------------------------------- */ div.featured, div#works, div#content, div#foot { padding:0px; overflow:hidden; width:900px;} div#mainContent { background:white; width:900px; padding:0px 35px 30px 35px; } /* =HEADER ----------------------------------------------------*/ div#header { padding: 0px 0px 0px 0px; height:118px; padding-bottom:15px; } div#siteTitle { float:left; } div#header h1 { padding-top:35px; padding-left:20px;} div#header h1 a, #header h1 a:hover, #header h1 a:focus { font-size: 3.9em; color:#333333; text-decoration:none; background:none; } div#header p { color: #909090; font-size: 1.3em; margin: 1px 0px 0px 0px; line-height: 1.3em; display:none;} .tk-blackout-2am { word-spacing:-5px; } /* Navigation */ div#navigation { float:right; width:600px;} div#navigation div#menu { height: 25px; margin-top:0px;} div#navigation div#menu ul { margin: 0; } div#navigation div#menu ul li { float: right; list-style-type:none; font-size:18px;} div#navigation div#menu ul li#menulast { } div#navigation div#menu ul li a { display: block; height: 25px; width:75px; text-align:center; padding: 50px 0px 10px 0px; margin:0 8px; color: #333; line-height: 25px; text-decoration: none; border:none; background-color: #ffffff; -webkit-transition: background .2s ease-out; } div#navigation div#menu ul li a:hover { background-color: #ED184A; color:white; padding: 75px 0px 10px 0px; } div#navigation div#menu ul li a.active, div#navigation div#menu ul li a.active:hover, div#navigation div#menu ul li.current-menu-item a, div#navigation div#menu ul li.current-page-ancestor a { background-color: #ED184A; color:white; border:white; padding: 75px 0px 10px 0px; text-decoration:none;} div#navigation div#menu div#feed { display: inline; float: right; margin-left:10px; height: 25px; padding: 50px 0px 0px 0px;} div#navigation div#menu div#feed a { background: transparent url(style/images/Rss.png) no-repeat; display: block; height: 25px; width: 25px; border:none; margin:0px;} div#navigation div#menu div#feed a:hover { background-position: 0 -25px; } div#navigation div#menu div#feed a span { display:none; } /* =WORK PAGES ----------------------------------------------------*/ /* Featured */ div.featured {margin: 20px auto 56px auto;} .scrollContainer div.featured { margin:0px 0px 10px 0px; } div.featured div.info { float: left; width: 485px; position: absolute; padding-right:20px;} div.featured div.info dl dt {float: left; display: inline; } div.featured ul.view { margin-top: 285px; position: absolute; width: 505px; padding-bottom:10px;} div.featured ul.view li { display: inline; margin-right: 7px; } div.featured div.stick a { background-color: #f2f2f2; border: 1px solid #333; float: right; height: 269px; padding: 14px; width: 359px;} div.featured div.stick a:hover { border: 1px solid #999; } div.featured div.stick a img { background-color: #fff; /* for IE */ filter:alpha(opacity=100); /* CSS3 standard */ opacity:1; width: 359px; } div.featured div.stick a:hover img { background-color: #fff; /* for IE */ filter:alpha(opacity=50); /* CSS3 standard */ opacity:.5; width: 359px; } div.featured dl, div.panel dl {margin-bottom: 1.5em;} /* Works */ div#works { margin-top: 56px; } div#works div.minus14 { margin-left: 0px; overflow: hidden; width: 900px; } /* Why width=960px? We have add the negative margin-left (-14px=+14px) to the div#workd width (946px). */ div#works div.minus14 div.thumb{ margin: 0px 3px; padding-bottom: 10px; display: inline; float: left; width: 294px;} div#works div.minus14 div.thumb a {background-color: #f2f2f2; border: 1px solid #333; display: block; height: 115px; padding: 8px 0; text-align: center; } div#works div.minus14 div.thumb a:hover {border: 1px solid #999; } div#works div.minus14 div.thumb a img { background-color: #f2f2f2; opacity: 1; filter:alpha(opacity=100); width: 276px;} div#works div.minus14 div.thumb a:hover img { background-color: #ffffff; opacity: .5; filter:alpha(opacity=50); width: 276px;} /* Coda.css */ div#slider { margin: 0 auto; position: relative; width: 900px;} div#slider img.scrollButtons { position: absolute; top: 120px; cursor: pointer; } div#slider img.scrollButtons.left { left: -27px; } div#slider img.scrollButtons.right { right: -27px; } /* .SCROLL */ div#slider div.scroll { clear: left; height: 305px; overflow: hidden; padding:0; position: relative; /* fix for IE to respect overflow */width: 900px; } /* .PANEL */ /* DIV.PANEL is close to DIV.FEATURED style from layout.css */ div#slider div.scroll div.scrollContainer div.panel { height: 305px; overflow: hidden; padding: 0 1px 0; width: 899px; } /* 1px padding for a good view */ div#slider div.scroll div.scrollContainer div.panel div.info { float: left; width: 490px; position: absolute; } div#slider div.scroll div.scrollContainer div.panel div.info dl dt { float: left; display: inline; } div#slider div.scroll div.scrollContainer div.panel ul.view { margin-top: 285px; position: absolute; width: 490px; } div#slider div.scroll div.scrollContainer div.panel ul.view li { display: inline; margin-right: 7px; } div#slider div.scroll div.scrollContainer div.panel div.stick img.new { float: right; top: 241px; position: relative; z-index: 1000; } div#slider div.scroll div.scrollContainer div.panel div.stick a.afternew { background-color: #f2f2f2; border: 1px solid #333; float: right; height: 269px; right: -66px;padding: 14px; position: relative; width: 359px; } div#slider div.scroll div.scrollContainer div.panel div.stick a { background-color: #f2f2f2; border: 1px solid #333; float: right; height: 269px; padding: 14px; position: relative; width: 359px; } div#slider div.scroll div.scrollContainer div.panel div.stick a:hover { border: 1px solid #999; } div#slider div.scroll div.scrollContainer div.panel div.stick a:hover img { opacity: .5; filter:alpha(opacity=50); } /* =CASE STUDY & ABOUT PAGES ----------------------------------------------------*/ div#content { padding-top: 20px; background:#ffffff;} /* Ct-info */ div#content div#ct-info{display: inline; float: left; width: 580px; margin-bottom:20px;} div#content div#ct-info a.brd { background-color: #fff; border: 1px solid #333;display: block; } div#content div#ct-info a.brd:hove r{ border: 1px solid #999; } div#content div#ct-info a.brd:hover img { background-color: #fff;opacity: .5; filter:alpha(opacity=50); width: 622px;} div#content div#ct-info img {margin: 0;} /* The height should be multiple of 18px */ div#content div#ct-info ul, div#content div#ct-info ol {margin-left:10px; padding-left:14px;} div#content div#ct-info ul ul, div#content div#ct-info ol ol {margin-left:10px;} div#content div#ct-info ul, div#content div#ct-info ol{color: #333;} div#content div#ct-info ul {list-style-position:outside; list-style-type:circle;} div#content div#ct-info ul li, div#content div#ct-info ol li { margin-bottom: 0.5em; } div#content div#ct-info ol {list-style-position:outside;list-style-type:decimal;} div#content div#ct-info blockquote, div#content div#ct-info q{color: #333; font-style: italic; margin: 36px 66px; padding: 0 14px; text-align: justify;} div#content div#ct-info blockquote p {color: #333;} /* Featured */ div.featured div.stick img.new {float: right; top: 241px; position: relative; z-index: 1000;} div.featured div.stick a.afternew {background-color: #f2f2f2; border: 1px solid #333; float: right; height: 269px; right: -66px; padding: 14px; position: relative; width: 359px;} /* =CONTACT ----------------------------------------------------*/ div#content div#ct-info div#contact{ } div#content div#ct-info div#contact div#usermessageb.failure{ border: 2px solid #ccc; clear: both; padding: 4px; } div#content div#ct-info div#contact label { width:130px; float:left; text-align:left; margin-right:10px; } div#content div#ct-info div#contact form p input, div#content div#ct-info div#contact form p textarea { border: solid 1px #cccccc; width:420px;} div#content div#ct-info div#contact form p#btnSubmit input { width:60px; margin-left: 140px; background-color:#ED184A; color:white;} /*Typography*/ div#content div#ct-info div#contact div#usermessageb{color: #333; font-weight: bold;} div#content div#ct-info div#contact p.linklove{display: none;} div#content div#ct-info div#contact form{font-size: 1em;} div#content div#ct-info div#contact form p{color: #333;} div#content div#ct-info div#contact form fieldset label{color: #333; font-weight: bold;} div#content div#ct-info div#contact form fieldset span.reqtxt, div#content div#ct-info div#contact form fieldset span.emailreqtxt{color: #666; font-weight: normal; padding-left: 4px;} div#content div#ct-info div#contact form fieldset ol li.textonly{color: #333;margin-bottom: 18px; text-align: justify;} div#content div#ct-info div#contact form fieldset ol li input, div#content div#contact form fieldset ol li textarea {font-size: 1em; font-family: Arial, Helvetica, sans-serif;} div#content div#ct-info div#contact #quote-website .oneLine label { width:130px; float:left; text-align:left; margin-right:10px; } div#content div#ct-info div#contact #quote-website label { width:auto; float:none; text-align:left; margin-right:0px; display:block;} div#content div#ct-info div#contact #quote-website textarea { width:555px; height:70px;} div#content div#ct-info div#contact #quote-website fieldset { border:solid 1px #cccccc; padding:10px; margin-top:20px; background:#f7f7f7;} div#content div#ct-info div#contact #quote-website fieldset legend { padding:0px 20px; } div#content div#ct-info div#contact form #quote-website p#btnSubmit input { width:100px; margin-top:30px; margin-left: 250px; background-color:#ED184A; color:white;} /* -------------------------------- Sidebar -------------------------------- */ div#content div#sidebar { display: inline; float: right; text-align: left; width: 240px; padding:0px 20px 20px 20px; background:#f2f2f2; } div#content div#sidebar dl { margin-top:20px; } div.workPage div#sidebar {margin-top:40px;} div#content div#sidebar dl dd { } div#content div#sidebar div.vcard ul { margin-left:10px; padding-left:0px; } div#content div#sidebar div.vcard ul li { margin-bottom: 0.5em; list-style-position:outside; list-style-type:circle; line-height:1.4em;} div#content div#sidebar ul li a { } div#content div#sidebar div.vcard img { margin-bottom: 1.6em; } div#content div#sidebar div.vcard a.card { background: transparent url(style/images/vcard.png) no-repeat 0 100%; padding-left: 24px; } div#content div#sidebar div.vcard span { margin: 0; padding: 0; } div#content div#sidebar div.imageBorder { margin:20px 0px; } div#content div#sidebar div.imageBorder p { /*background-color: #fff; border: 1px solid #333; padding: 14px; width: 200px; height:200px;*/} div#content div#sidebar div.vcard div.imageBorder img { margin-bottom:0px; } /*Typography*/ div#content div#sidebar h3 {margin-top: 10px;} div#content div#sidebar dl dd{margin-bottom:8px; padding-bottom:0.75em;} /* we have change margin-bottom:18px; by 8px (margin-bottom:18px-border-bottom:1px-padding-bottom:9px) */ div#content div#sidebar2 { display: inline; float: right; text-align: left; width: 295px; padding:0px; background:#ffffff; } div#content div#sidebar2 div#works { margin-top:0px; } div#content div#sidebar2 div#works div.minus14 { margin-left: 0px; overflow: hidden; width: 295px; } div#content div#sidebar2 div#works div.minus14 div.thumb { margin: 5px 0px; } /* =BLOG ----------------------------------------------------*/ /* -------------------------------- Post -------------------------------- */ #content.single { width: 518px; margin: 0; padding: 70px 130px; } .post-entry { padding-bottom:40px; clear:left; } .postmetadata { width:100px; float:left; } p.date { text-align:center; font-weight:bold; width:80px; background:#ED184A; padding:5px; color:#F8F0D0; font-size:130%;} p.date .year { font-size:120%; } div.post { margin-left:120px;} div.post h2 { margin-top:0px; } /*Comments*/ #commentsBox {margin-top:30px; padding-top:10px; border-top:solid 1px #f2f2f2;} textarea#comment {width:450px;} #commentform input {width:200px;} #commentform input, #commentform textarea { border: solid 1px #cccccc; } #commentform input#submit { width:150px; margin-left:0px; background-color:#ED184A; color:white; } div#content div#ct-info ol.commentlist { margin:0px; padding:0px;} div#content div#ct-info ol.commentlist li { list-style-position:inside; background:#f2f2f2; padding: 10px; margin:0px 0px 10px 0px;} /* -------------------------------- Sidebar -------------------------------- */ #sidebar form { margin: 0; } #sidebar ul, #sidebar ul ol { margin: 0; padding: 0; list-style: none; } #sidebar ul li { list-style-type: none; list-style-image: none; margin-bottom: 15px; line-height: 1.7; } #sidebar ul p, #sidebar ul select { margin: 5px 0 8px; } #sidebar ul ul, #sidebar ul ul ul { margin: 0; } ol li, #sidebar ul ol li { list-style: decimal outside; } #sidebar ul ul li, #sidebar ul ol li { margin: 0; padding: 0; } .homepage #sidebar ul li { padding:0px; margin:0px; } #searchform { margin: 0 auto; padding: 0 0 15px 0; text-align: left; } #sidebar #searchform #s { width: 125px; padding: 2px 0; } /* Begin Form Elements */ #searchform { margin: 0 auto; padding: 0 0 5px 0; text-align: left; } #searchform input { border: solid 1px #cccccc; width:200px; } #searchform label { display:none; } #searchform input#searchsubmit, #searchform input#sidebarsubmit { width:100px; margin-left:10px; background-color:#ED184A; color:white; } .entry form { /* This is mainly for password protected posts, makes them look better. */ text-align:center; } select { width: 130px; } /* End Form Elements */ /* =SERVICES ----------------------------------------------------*/ #ServicesPage .ServiceBox { margin-right:15px; margin-bottom:20px; background:#f2f2f2; padding:5px 15px 15px 15px; clear:left; line-height:normal; } #ServicesPage .ServiceBox .stick a { float:left; margin-right:30px; width:240px; background-color: #ffffff; border: 1px solid #333; padding: 8px; } div#content div#ct-info #ServicesPage img { margin:0; } /* =PHOTOS ----------------------------------------------------*/ #content div.flickr-gallery { margin:0px; } /* =FOOTER ----------------------------------------------------*/ div#footer { clear:both; margin-top:20px; padding:0px; text-align:left; background: url(style/images/logo-graphics.gif) 100% 50% no-repeat; } /*div#footer { clear:both; height:49px; margin-top:20px; padding:18px 0px 18px 0px; background: url(style/images/wood-texture.jpg) bottom left repeat-x;}*/ div#footer div#foot { padding: 0; } div#footer div#foot div#footnav { padding: 5px 0 0px; } div#footer div#foot div#footnav ul { margin-bottom:0px; } div#footer div#foot div#footnav li { display: inline; margin-right:5px; } div#footer div#foot div#footnav li a {padding:2px 5px; border:none; background-color: #ffffff;} div#footer div#foot div#footnav li a:hover, div#footer div#foot div#footnav li.active a { color:#ffffff; border:none; background-color: #159F9F; text-decoration:none;} div#footer div#foot p.rss { height:25px; background: url(style/images/Rss.png) no-repeat top left; padding-left: 28px; } div#footer a img { border:none; } /*Typography*/ div#footer div#foot ol#footnav li { font-size: .9em; } div#footer div#foot p { clear:left; font-size: .9em; margin: 0; line-height:25px;} div#lang_sel_footer { margin-top:20px; padding:10px; background:transparent !important; border:none !important; text-align:left !important;} div#lang_sel_footer a { border:none; } /* =CLASSES ----------------------------------------------------*/ /* Float */ .fl{float: left;} .fr{float: right;} .alignleft{float: left; padding-right: 14px; margin-bottom: 18px;} .alignright{float: right; padding-left: 14px; margin-bottom: 18px;} /* Rounder Cornes (Just Firefox, Safari and Ie8 at this moment) */ .br-rd4 { /*border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px;*/ } .br-rd2 { /*border-radius: 4px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px;*/} strong { color:#ED184A; } em { font-style:normal; font-weight:bold; } p.intro {font-size:1.4em; line-height:1.3em; margin-top:0.5em; } /* =LINKS ----------------------------------------------------*/ a { color: #159F9F; text-decoration: underline; } a { -webkit-transition: background .2s ease-out; } a:hover, a:focus { background: #ED184A; color:#F8F0D0;} h3 a { color: #159F9F; } a img, .fixed-icons a { border:none; } /* =HEADINGS ----------------------------------------------------*/ h1, h2, h3, h5, h5, h6 {font-weight:bold; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { border:none; background:none;} h2 {color: #3E2E39; font-size: 1.4em; line-height:1em; margin: 15px 0 .5em 0; font-weight:bold; text-transform:uppercase; } .homepage h2 { clear:left; } h2 a { color: #333; text-decoration: none; } h2 a:hover, h2 a:focus { color: #ED184A; text-decoration: none; background:none; text-decoration:none;} div#content div#ct-info h2 { /*background: url(style/images/title-bg.gif) center right no-repeat;*/} div#sidebar h2 { } h3, fieldset legend { color: #159F9F; font-size:1.2em; margin: 15px 0 5px 0px; text-transform:uppercase; font-weight:normal;} h4 { text-transform:uppercase; font-size:1.2em; margin: 15px 0px 5px 0px; } /* =BLOCKS ----------------------------------------------------*/ p, dl, ul, ol {color: #333; } p, ul { margin-bottom: 10px; } abbr, acronym {border-bottom: 1px dotted #666; cursor: help;} /* =TOOLS ----------------------------------------------------*/ .spacer {clear:both;position:relative;font-size:0px;height:0px;line-height:0px;} .hidden {position:absolute; left:0px; top:-9999px; width:1px; height:1px; overflow:hidden;} /* =404 ----------------------------------------------------*/ div#content div#error h2{background: none; padding-left: 0;} div#content div#error h3{font-weight: normal;}