Team:Fudan D/css/style.css
From 2012.igem.org
Chocolatenw (Talk | contribs) (Created page with "@charset "utf-8"; - →CSS Document: /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - [Table of contents] 1. Body 2. Top / #top 3. Header / #header - ...") |
Chocolatenw (Talk | contribs) |
||
Line 1: | Line 1: | ||
- | |||
- | |||
- | |||
/* | /* | ||
- | + | Torn v.1.2 | |
- | + | ||
- | + | ||
- | 1. | + | |
- | 2 | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
*/ | */ | ||
+ | /* IMPORTS ------------------------------------------------------------*/ | ||
- | /* | + | @import url('reset.css'); |
- | + | ||
- | + | @import url('social-icons.css'); | |
- | + | ||
- | + | /* HACKS ------------------------------------------------------------*/ | |
+ | |||
+ | .clear{ | ||
+ | clear:both; | ||
+ | height:1px; | ||
+ | } | ||
+ | |||
+ | .inv{ display:none; } | ||
+ | |||
+ | /* prettyPhoto fix */ | ||
+ | .pp_description, | ||
+ | .currentTextHolder{ | ||
+ | color: #606060; | ||
+ | } | ||
+ | |||
+ | /* TOOLTIP ------------------------------------------------------------*/ | ||
+ | |||
+ | .tooltip, | ||
+ | .tooltip-right, | ||
+ | .tooltip-bottom, | ||
+ | .tooltip-left { | ||
+ | display:none; | ||
+ | font-size:12px; | ||
+ | height:70px; | ||
+ | width:160px; | ||
+ | padding:25px; | ||
+ | color: #ffffff; | ||
+ | line-height: 1.3em; | ||
+ | z-index: 600; | ||
+ | } | ||
+ | |||
+ | .tooltip {background:transparent url(../img/tooltip.png);} | ||
+ | .tooltip-right {background:transparent url(../img/tooltip-right.png);} | ||
+ | .tooltip-bottom {background:transparent url(../img/tooltip-bottom.png);} | ||
+ | .tooltip-left {background:transparent url(../img/tooltip-left.png);} | ||
+ | |||
+ | /* GENERAL ------------------------------------------------------------*/ | ||
+ | |||
+ | html{ | ||
height: 100%; | height: 100%; | ||
} | } | ||
- | body | + | |
- | font: | + | body { |
- | + | line-height: 1; | |
- | color: # | + | font-family: Tahoma, Arial, Helvetica, sans-serif; |
+ | font-size: 100%; | ||
+ | height: 100%; | ||
+ | background: #1f1f1f url(../img/bgs/strips-bold.png); | ||
+ | color: #1f1f1f; | ||
} | } | ||
- | + | ||
- | + | .wrapper-header{ | |
- | + | width: 800px; | |
- | + | position: absolute; | |
- | + | top: 0px; | |
- | + | left: 200px; | |
+ | |||
} | } | ||
- | + | ||
- | + | #header{ | |
- | + | position: relative; | |
+ | width: 800px; | ||
+ | height: 135px; | ||
+ | font-size: 14px; | ||
+ | z-index: 10; | ||
} | } | ||
- | + | ||
- | + | .torn-top{ | |
- | + | position: absolute; | |
+ | height: 6px; | ||
+ | width: 100%; | ||
+ | top: 130px; | ||
+ | background: url(../img/borders/torn-top.png) repeat-x bottom ; | ||
+ | z-index: 130; | ||
} | } | ||
- | + | ||
- | + | #logo{ | |
- | + | position: absolute; | |
- | + | top: 20px; | |
+ | left: -5px; | ||
} | } | ||
- | + | ||
- | font-size: | + | #main{ |
- | + | position: relative; | |
+ | width: 100%; | ||
+ | min-height: 700px; | ||
+ | font-size: 14px; | ||
+ | background: white; | ||
+ | padding-top: 22px; | ||
} | } | ||
- | + | ||
- | + | .wrapper{ | |
+ | width: 800px; | ||
+ | margin-left: 20px; | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
} | } | ||
- | + | ||
- | + | .page-title-holder{ | |
- | + | width: 100%; | |
- | padding: | + | margin-bottom: 18px; |
+ | padding-bottom: 18px; | ||
+ | border-bottom: 1px #ccc dashed; | ||
} | } | ||
- | + | ||
- | font-size: | + | .page-title{ |
- | + | font-size: 40px; | |
- | + | color: #1f1f1f; | |
+ | margin-left: 10px; | ||
} | } | ||
- | + | ||
- | font-size: | + | .page-subtitle{ |
- | + | font-size: 26px; | |
- | + | color: #555555; | |
+ | margin-left: 10px; | ||
} | } | ||
- | + | ||
- | + | ||
+ | .page-title-holder > .page-title, | ||
+ | .page-title-holder > .page-subtitle{ | ||
+ | margin-left: 30px; | ||
} | } | ||
- | + | ||
- | + | .page-title-holder .link-button{ | |
- | + | margin-left: 30px; | |
- | + | ||
} | } | ||
- | + | ||
- | + | h1{ font-size: 40px;} | |
- | + | ||
- | + | h2{ font-size: 36px;} | |
+ | |||
+ | h3{ font-size: 30px;} | ||
+ | |||
+ | h4{ font-size: 26px;} | ||
+ | |||
+ | h5{ font-size: 20px;} | ||
+ | |||
+ | h6{ font-size: 16px;} | ||
+ | |||
+ | h7{ font-family:Mistral; | ||
+ | font-size: 20px; | ||
+ | text-transform: none; | ||
} | } | ||
- | + | h8{font-family:"Staccato222 BT"; | |
- | + | font-size:25px; | |
+ | } | ||
+ | h9{font-family:"Copperplate Gothic Light"; | ||
+ | font-size:17px; | ||
+ | font-weight:700; | ||
+ | color:#FEC709; | ||
+ | } | ||
+ | |||
+ | h1, h2, h3, h4, h5, h6{ | ||
+ | margin-bottom: .0em; | ||
} | } | ||
a{ | a{ | ||
- | |||
text-decoration: none; | text-decoration: none; | ||
+ | color: #fec709; | ||
} | } | ||
- | + | ||
- | + | .headline, | |
- | + | .custom, | |
+ | .title .big{ | ||
+ | word-spacing: 0.2em; | ||
} | } | ||
- | + | ||
- | + | div.headline{ | |
- | + | font-size: 32px; | |
- | + | line-height: 1.5em; | |
- | + | color: #fff; | |
- | + | width: 960px; | |
- | + | text-transform: uppercase; | |
- | + | text-align: center; | |
- | + | text-shadow: #000 1px 1px 1px; | |
- | + | margin-bottom: 20px; | |
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | margin- | + | .title{ |
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | color: #665d4e; | ||
+ | height: 90px; | ||
+ | width: 960px; | ||
+ | margin: 0 auto 0px auto; | ||
+ | background: url(../img/title-bg.png) no-repeat; | ||
+ | color: #12262d; | ||
} | } | ||
- | + | ||
- | + | .sub-header{ | |
- | + | font-size: 30px; | |
- | + | ||
} | } | ||
- | . | + | |
- | + | .title span.big{ | |
- | margin | + | display: block; |
+ | float: left; | ||
+ | font-size: 24px; | ||
+ | margin: 22px 0px 0px 25px; | ||
} | } | ||
- | . | + | |
- | + | .title span.small{ | |
- | + | display: block; | |
+ | float: left; | ||
+ | font-size: 14px; | ||
+ | margin-left: 15px; | ||
+ | margin-top: 31px; | ||
} | } | ||
- | |||
- | + | a.more{ | |
- | # | + | display: block; |
- | + | overflow: hidden; | |
- | + | color: #fff; | |
+ | font-size: 14px; | ||
+ | line-height: 1.3em; | ||
+ | text-decoration: none; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | a.more:hover{ | |
- | + | color: white; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .separator{ | |
- | + | border-top: 1px solid #e2e6e7; | |
- | + | margin-bottom: 1.5em; | |
- | + | ||
- | margin | + | |
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
- | + | .top-gap{ | |
+ | margin-top:20px; | ||
+ | } | ||
+ | |||
+ | /* page-content--------------------------------------------------------*/ | ||
+ | |||
+ | .page-content{ | ||
+ | overflow: visible; | ||
+ | width: 950px; | ||
+ | margin: 10px 10px 20px 10px; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | |||
+ | .page-content p{ | ||
+ | margin-bottom: 18px; | ||
+ | } | ||
+ | |||
+ | /* page-introduction--------------------------------------------------------*/ | ||
+ | |||
+ | .page-introduction{ | ||
+ | overflow: visible; | ||
+ | width: 950px; | ||
+ | margin: 10px 10px 20px 10px; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | |||
+ | .page-introduction p{ | ||
+ | margin-bottom: 18px; | ||
+ | } | ||
+ | |||
+ | /* page-contact--------------------------------------------------------*/ | ||
+ | |||
+ | .page-contact{ | ||
overflow: hidden; | overflow: hidden; | ||
+ | width: 960px; | ||
+ | margin: 10px 10px 20px 10px; | ||
+ | line-height: 1.5em; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .page-contact p{ | |
+ | margin-bottom: 18px; | ||
+ | } | ||
- | . | + | |
- | position: | + | /* COLUMNS LAYOUT----------------------------------------------------------*/ |
+ | |||
+ | .one-half, | ||
+ | .one-third, | ||
+ | .two-third, | ||
+ | .three-fourth, | ||
+ | .one-fourth { | ||
+ | float:left; | ||
+ | margin-right:20px; | ||
+ | position:relative; | ||
} | } | ||
- | + | ||
- | + | .one-half{width: 458px;} | |
- | + | ||
- | + | .one-third{width: 300px;} | |
- | + | ||
- | + | .one-fourth{width: 220px;} | |
- | + | ||
- | + | .two-third{width: 620px;} | |
- | + | ||
- | + | .three-fourth{width: 700px; } | |
- | + | ||
- | + | .last { | |
- | + | clear:right; | |
- | + | margin-right:0 !important; | |
- | + | } | |
- | + | ||
- | + | /* LINK BUTTON ------------------------------------------------------------*/ | |
- | + | ||
- | + | .link-button{ | |
- | + | display: table; | |
- | margin: | + | height: 31px; |
+ | padding-left: 5px; | ||
+ | font-size: 20px; | ||
+ | margin-top: 10px; | ||
+ | color: #1f1f1f; | ||
+ | background: url(../img/yellow/sprites.png) -40px -170px no-repeat; | ||
} | } | ||
- | |||
- | |||
- | |||
- | + | .link-button span{ | |
- | + | display: block; | |
- | height: | + | height: 100% ; |
- | top: | + | padding-top: 8px; |
+ | padding-right: 10px; | ||
+ | padding-left: 5px; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat right -132px; | ||
} | } | ||
- | + | ||
- | left: | + | /* SEARCH ------------------------------------------------------------*/ |
+ | |||
+ | .top-search{ | ||
+ | position: absolute; | ||
+ | left: 800px; | ||
+ | top: 20px; | ||
} | } | ||
- | # | + | |
- | + | form#searchform{ | |
+ | position: relative; | ||
+ | width: 230px; | ||
+ | height: 50px; | ||
} | } | ||
- | # | + | |
- | width: | + | form#searchform input#s{ |
- | height: | + | color: #1f1f1f; |
- | + | font-size: 14px; | |
- | + | width: 210px; | |
+ | height: 26px; | ||
+ | margin: 0px 0px 5px 0px; | ||
+ | padding: 0px 5px 0px 5px; | ||
+ | border: 0; | ||
+ | background: #d2d2d2 url(../img/bgs/strips-thin.png); | ||
} | } | ||
- | . | + | |
+ | |||
+ | form#searchform input#searchsubmit{ | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 220px; | ||
+ | width: 33px; | ||
+ | height: 31px; | ||
+ | border: 0px; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat transparent -100px -92px; | ||
+ | } | ||
+ | |||
+ | form#searchform input#searchsubmit:hover{ | ||
+ | background-position: -137px -92px; | ||
+ | } | ||
+ | |||
+ | /* STYLED ------------------------------------------------------------*/ | ||
+ | |||
+ | img.left-align{ | ||
+ | float:left; | ||
+ | margin:8px 18px 18px 0; | ||
display: block; | display: block; | ||
- | + | } | |
- | + | ||
- | height: | + | img.right-align{ |
- | top: | + | float:right; |
+ | margin:0px 0px 0px 10px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | img.boxed{ | ||
+ | background: white; | ||
+ | padding: 5px; | ||
+ | border: 1px solid #cccccc; | ||
+ | } | ||
+ | |||
+ | img.border{ | ||
+ | border: 2px solid white; | ||
+ | } | ||
+ | |||
+ | .shadow-img{ | ||
+ | display: block; | ||
+ | padding-bottom: 22px; | ||
+ | background: url(../img/thumb-shadow.png) no-repeat bottom center ; | ||
+ | } | ||
+ | |||
+ | .dropcap { | ||
+ | display:block; | ||
+ | float:left; | ||
+ | font-size:40px; | ||
+ | line-height:40px; | ||
+ | margin:0 8px 0 0; | ||
+ | } | ||
+ | |||
+ | .highlight { | ||
+ | background:yellow; | ||
+ | color:#111111; | ||
+ | padding:1px 4px; | ||
+ | } | ||
+ | |||
+ | .pullquote-right, | ||
+ | .pullquote-left { | ||
+ | border-left: #555555 2px solid; | ||
+ | float:right; | ||
+ | font-size:16px; | ||
+ | line-height:1.5em; | ||
+ | margin: 20px 0px 20px 20px; | ||
+ | padding:0 0 0 20px; | ||
+ | width:33%; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | .pullquote-left { | ||
+ | float:left; | ||
+ | margin: 20px 20px 20px 0px; | ||
+ | } | ||
+ | |||
+ | .pullquote-right{ | ||
+ | border-left: none; | ||
+ | border-right: #555555 2px solid; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* TABLE ------------------------------------------------------------*/ | ||
+ | |||
+ | table, td, th { | ||
+ | vertical-align:middle; | ||
+ | } | ||
+ | |||
+ | table { | ||
+ | border-collapse:separate; | ||
+ | border-spacing:0; | ||
+ | border-top:1px solid white; | ||
+ | margin-bottom:28px; | ||
+ | width:100%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | th{ | ||
+ | border-top:5px solid #555555; | ||
+ | color: #ffffff; | ||
+ | padding:10px; | ||
+ | text-transform:uppercase; | ||
+ | background-color: #1f1f1f; | ||
+ | } | ||
+ | |||
+ | td{ | ||
+ | padding:10px; | ||
+ | } | ||
+ | |||
+ | td, th{ | ||
+ | border-bottom: 1px solid #1f1f1f; | ||
+ | } | ||
+ | |||
+ | /* INFO BOXES ------------------------------------------------------------*/ | ||
+ | |||
+ | .info, | ||
+ | .success, | ||
+ | .warning, | ||
+ | .error, | ||
+ | .validation{ | ||
+ | border: 1px solid; | ||
+ | margin: 10px 0px; | ||
+ | padding:15px 10px 15px 50px; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
- | background-position: | + | background-position: 10px center; |
+ | border-radius: 5px; | ||
+ | -moz-border-radius: 5px; | ||
+ | -webkit-border-radius: 5px; | ||
} | } | ||
- | . | + | |
- | background- | + | .info{ |
+ | color: #00529B; | ||
+ | background-color: #BDE5F8; | ||
+ | background-image: url('../img/knobs-icons/Knob Info.png'); | ||
} | } | ||
- | + | ||
- | + | .success{ | |
- | + | color: #4F8A10; | |
- | + | background-color: #DFF2BF; | |
- | + | background-image: url('../img/knobs-icons/Knob Valid Green.png'); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .warning{ | |
- | + | color: #9F6000; | |
- | + | background-color: #FEEFB3; | |
- | + | background-image: url('../img/knobs-icons/Knob Attention.png'); | |
- | background: url( | + | |
- | + | ||
} | } | ||
- | + | ||
- | + | .error{ | |
- | + | color: #D8000C; | |
- | + | background-color: #FFBABA; | |
- | + | background-image: url('../img/knobs-icons/Knob Cancel.png'); | |
- | + | ||
} | } | ||
- | + | ||
- | + | /* TOGGLE & ACCORDION ------------------------------------------------------------*/ | |
- | + | ||
- | + | h5.accordion-trigger, | |
- | + | h5.toggle-trigger { | |
- | + | padding: 0 0 0 20px; | |
- | + | margin: 0 0 5px 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
height: 46px; | height: 46px; | ||
- | + | line-height: 46px; | |
- | + | width: 100%; | |
+ | float: left; | ||
+ | border-bottom: 1px solid #cccccc; | ||
} | } | ||
- | |||
- | + | h5.accordion-trigger a, | |
- | + | h5.toggle-trigger a { | |
- | + | text-decoration: none; | |
- | + | display: block; | |
- | + | color: #1f1f1f; | |
} | } | ||
- | # | + | |
+ | h5.accordion-trigger a:hover, | ||
+ | h5.toggle-trigger a:hover { | ||
+ | color: #cccccc; | ||
+ | } | ||
+ | |||
+ | div.accordion-container, | ||
+ | div.toggle-container { | ||
+ | margin: 0 0 5px 0px; | ||
+ | padding: 0; | ||
+ | overflow: hidden; | ||
+ | width: 95%; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | div.accordion-container .block, | ||
+ | div.toggle-container .block { | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | div.accordion-container .block , | ||
+ | div.toggle-container .block { | ||
+ | font-size: 14px; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | |||
+ | div.accordion-container .block p, | ||
+ | div.toggle-container .block p{ | ||
+ | margin-bottom: 1.5em; | ||
+ | } | ||
+ | |||
+ | /*-- NAV ---------------------------------------------------------------*/ | ||
+ | |||
+ | #nav{ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | right: 0px; | ||
+ | top: 63px; | ||
+ | height: 72px; | ||
+ | } | ||
+ | |||
+ | #nav li{ | ||
+ | display: block; | ||
float: left; | float: left; | ||
- | + | height: 100%; | |
- | + | margin-left: 4px; | |
- | + | margin-right: 4px; | |
+ | z-index: 8; | ||
} | } | ||
- | + | #nav>li>a{ | |
- | + | color: #fec709; | |
- | + | height: 47px; | |
- | background: url(../ | + | padding: 25px 8px 0px 8px; |
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | #nav li a:hover{ color: #FFFFFF; } | ||
+ | |||
+ | #nav li.current_page_item{ | ||
+ | background: url(../img/yellow/sprites.png) no-repeat right -27px ; | ||
+ | } | ||
+ | |||
+ | #nav li.current_page_item a{ color: #1f1f1f; } | ||
+ | |||
+ | /* sub nav */ | ||
+ | |||
+ | #nav li ul{ | ||
+ | padding:0px; | ||
+ | background: #fec709; | ||
+ | } | ||
+ | |||
+ | #nav>li>ul{ | ||
+ | margin: 47px 0px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #nav li ul li{ | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | border-bottom: 1px solid #fff; | ||
+ | } | ||
+ | |||
+ | #nav li ul li:last-child{ | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | #nav li ul li a{ | ||
+ | padding: 10px; | ||
+ | margin: 0px; | ||
+ | font-size: 14px; | ||
+ | color: #1f1f1f; | ||
+ | } | ||
+ | |||
+ | #nav li ul li:hover{ background: #1f1f1f; } | ||
+ | |||
+ | #nav li ul li:hover a{ color: #fff; } | ||
+ | |||
+ | |||
+ | /* SLIDESHOW ------------------------------------------------------------*/ | ||
+ | |||
+ | .wrapper-slideshow{ | ||
+ | width: 975px; | ||
+ | margin-left: 30px; | ||
overflow: hidden; | overflow: hidden; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | ||
+ | #slideshow{ | ||
+ | overflow: hidden; | ||
position: relative; | position: relative; | ||
- | + | margin-top: 15px; | |
- | + | margin-bottom: 15px; | |
- | + | width: 100%; | |
- | + | z-index: 0; | |
- | + | ||
} | } | ||
- | + | ||
- | + | #slideshow ul#slides{ | |
+ | width: 970px; | ||
+ | height: 345px; | ||
} | } | ||
- | + | ||
- | + | #slideshow-nav-holder{ | |
- | + | display: block; | |
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | height: 31px; | ||
+ | bottom: 0px; | ||
+ | right: 0px; | ||
+ | z-index: 30; | ||
} | } | ||
- | + | #slideshow-nav{ | |
- | + | display: block; | |
- | + | overflow: hidden; | |
- | background: url(../ | + | height: 31px; |
+ | background: url(../img/yellow/sprites.png) -45px -132px; | ||
+ | float: left; | ||
} | } | ||
- | . | + | |
- | + | #slideshow-nav-holder .nav-left{ | |
+ | width: 13px; | ||
+ | height: 31px; | ||
+ | float: left; | ||
+ | background: url(../img/yellow/sprites.png) -1px -132px; | ||
+ | } | ||
+ | |||
+ | #slideshow-nav-holder .nav-right{ | ||
+ | width: 13px; | ||
+ | height: 31px; | ||
+ | float: left; | ||
+ | background: url(../img/yellow/sprites.png) -963px -132px; | ||
+ | } | ||
+ | |||
+ | #slideshow-nav a { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | |||
+ | background: url(../img/yellow/sprites.png) -91px -52px; | ||
+ | width: 14px; | ||
+ | height: 15px; | ||
+ | margin-top: 11px; | ||
+ | text-indent: -9000px; | ||
+ | margin-right: 3px; | ||
+ | margin-left: 3px; | ||
+ | } | ||
+ | |||
+ | #slideshow-nav a:hover{ | ||
+ | background: url(../img/yellow/sprites.png) -91px -31px; | ||
+ | } | ||
+ | |||
+ | #slideshow-nav a.activeSlide { | ||
+ | background: url(../img/yellow/sprites.png) -69px -31px; | ||
+ | } | ||
+ | |||
+ | /* BLOCKS ------------------------------------------------------------*/ | ||
+ | |||
+ | .blocks-holder{ | ||
+ | display: block; | ||
overflow: hidden; | overflow: hidden; | ||
- | + | margin-bottom: 15px; | |
} | } | ||
- | . | + | |
- | + | .blocks-holder li{ | |
- | + | display: block; | |
- | + | float: left; | |
+ | width: 460px; | ||
+ | margin: 10px 10px; | ||
+ | } | ||
+ | |||
+ | .blocks-holder .img-holder{ | ||
overflow: hidden; | overflow: hidden; | ||
- | + | position: relative; | |
} | } | ||
- | + | .blocks-holder .img-holder .block-title{ | |
- | . | + | display: block; |
position: absolute; | position: absolute; | ||
- | + | bottom: 0px; | |
- | + | left: 10px; | |
- | width: | + | width: 430px; |
- | + | padding: 10px 10px 0px 10px; | |
- | padding: | + | font-size: 26px; |
- | + | background: white; | |
- | background: | + | |
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | /* | + | .blocks-holder .block-text{ |
- | . | + | line-height: 1.5em; |
+ | padding: 0px 20px 10px 20px; | ||
+ | } | ||
+ | |||
+ | /* FILTER ---------------------------------------------------*/ | ||
+ | |||
+ | #portfolio-filter{ | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | width: 970px; | ||
+ | height: 22px; | ||
+ | padding-top: 3px; | ||
+ | margin-left: 0px; | ||
+ | margin-bottom: 8px; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat right top; | ||
+ | } | ||
+ | |||
+ | #portfolio-filter li{ | ||
display: block; | display: block; | ||
float: left; | float: left; | ||
- | + | margin-right: 10px; | |
- | + | font-size: 20px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | #portfolio-filter li:first-child{ | |
- | + | color: #FFF; | |
- | + | padding-right: 10px; | |
- | + | margin-left: 30px; | |
- | + | border-right: 1px solid white; | |
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | /* | + | #portfolio-filter li a{ |
- | . | + | color: #1f1f1f; |
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #portfolio-filter li a:hover{ | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | /* GALLERY ------------------------------------------------------------*/ | ||
+ | |||
+ | /* 3 cols default */ | ||
+ | .gallery{ | ||
overflow: hidden; | overflow: hidden; | ||
- | + | width: 100%; | |
} | } | ||
- | . | + | |
+ | .gallery li{ | ||
display: block; | display: block; | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | width: 300px; | ||
+ | height: 200px; | ||
float: left; | float: left; | ||
- | + | margin: 10px 10px; | |
- | + | } | |
- | + | ||
- | background | + | .gallery.two-cols li{ |
- | padding- | + | width: 458px; |
- | + | } | |
- | + | ||
+ | .gallery.three-cols li{ | ||
+ | width: 300px; | ||
+ | } | ||
+ | |||
+ | .gallery.four-cols li{ | ||
+ | width: 220px; | ||
+ | } | ||
+ | |||
+ | .gallery li span{ | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | right: 0px; | ||
+ | width: 44px; | ||
+ | height: 44px; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat -0px -31px; | ||
+ | } | ||
+ | |||
+ | .gallery li:hover span{ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .gallery li em{ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 280px; | ||
+ | bottom: 0px; | ||
+ | left: 10px; | ||
+ | padding: 10px 10px 0px 10px; | ||
+ | background: white; | ||
+ | color: #1f1f1f; | ||
+ | font-size: 20px; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | |||
+ | .gallery.two-cols li em{ | ||
+ | width: 428px; | ||
+ | } | ||
+ | |||
+ | .gallery.three-cols li em{ | ||
+ | width: 280px; | ||
+ | } | ||
+ | |||
+ | .gallery.four-cols li em{ | ||
+ | width: 190px; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | /* GALLERY PAGER ------------------------------------------------------------*/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .gallery-pager{ | |
- | . | + | |
- | + | ||
overflow: hidden; | overflow: hidden; | ||
+ | display: block; | ||
+ | height: 16px; | ||
+ | margin-left: 0px; | ||
+ | margin-top: 18px; | ||
+ | margin-bottom: 20px; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .gallery-pager li{ | |
- | . | + | display: block; |
- | / | + | width: 17px; |
+ | height: 16px; | ||
+ | float: left; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat; | ||
+ | background-position: -90px -31px; | ||
+ | margin-left: 5px; | ||
} | } | ||
- | + | ||
- | + | .gallery-pager li:hover, | |
- | + | .gallery-pager li.active{ | |
- | + | background-position: -69px -31px; | |
} | } | ||
- | . | + | |
- | + | .gallery-pager li a{ | |
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | text-indent: -9000px; | ||
} | } | ||
- | . | + | |
- | background | + | .gallery-pager li:first-child{ |
- | + | background-position: -47px -31px; | |
} | } | ||
- | . | + | |
+ | .gallery-pager li:last-child{ | ||
+ | background-position: -110px -31px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* BLOG ------------------------------------------------------------*/ | ||
+ | |||
+ | .wrapper-blog{ | ||
+ | width: 960px; | ||
overflow: hidden; | overflow: hidden; | ||
- | + | margin-top: 20px; | |
- | + | ||
} | } | ||
- | + | ||
- | + | #posts{ | |
- | + | width: 710px; | |
- | + | min-height: 650px; | |
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | . | + | #posts .post{ |
+ | width: 100%; | ||
+ | margin-bottom: 30px; | ||
+ | overflow: hidden; | ||
+ | } | ||
- | . | + | #posts .post .meta{ |
- | + | display: block; | |
+ | overflow: hidden; | ||
+ | float: left; | ||
+ | height: 88px; | ||
+ | width: 80px; | ||
+ | padding-left: 10px; | ||
+ | color: #ffffff; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat -443px -30px; | ||
} | } | ||
- | / | + | #posts .post .meta li{ |
- | . | + | display: block; |
+ | } | ||
+ | |||
+ | #posts .post .meta .day{ | ||
+ | font-size: 40px; | ||
+ | margin-top: 5px; | ||
+ | margin-bottom: -7px; | ||
+ | } | ||
+ | |||
+ | #posts .post .meta .month-year{ | ||
+ | font-size: 16px; | ||
+ | margin-bottom: 7px; | ||
+ | } | ||
+ | |||
+ | #posts .post .meta .comments{ | ||
+ | font-size: 16px; | ||
+ | text-indent: 22px; | ||
+ | background: url(../img/comments-icon.png) no-repeat 0px 2px; | ||
+ | } | ||
+ | |||
+ | #posts .post .post-content{ | ||
width: 620px; | width: 620px; | ||
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
- | display: | + | #posts .post .post-img{ |
- | + | display: block; | |
- | + | position: relative; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
- | margin- | + | #posts .post .post-img img{ |
- | + | margin-bottom: 5px; | |
- | + | ||
} | } | ||
- | + | ||
- | + | #posts .post .post-title { | |
- | + | background: #ffffff; | |
- | } | + | position: absolute; |
- | + | left: 10px; | |
- | + | padding: 10px; | |
- | + | width: 590px; | |
- | + | } | |
- | + | ||
- | + | #posts .post .post-title{} | |
- | + | ||
- | + | #posts .post .post-title-1{ | |
- | + | font-size: 30px; | |
- | + | color: #1f1f1f; | |
- | + | } | |
+ | |||
+ | #posts .post .post-title-2{ | ||
+ | font-size: 16px; | ||
+ | color: #555555; | ||
+ | } | ||
+ | |||
+ | #posts .post .excerpt{ | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | |||
+ | #posts .post .link-button{ | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | /* BLOG PAGER ------------------------------------------------------------*/ | ||
+ | |||
+ | .blog-pager{ | ||
display: block; | display: block; | ||
- | width: | + | width: 835px; |
- | height: | + | height: 24px; |
- | margin: | + | margin-left: 90px; |
- | + | margin-top: 20px; | |
+ | margin-bottom: 20px; | ||
} | } | ||
- | + | ||
- | + | .blog-pager li{ | |
+ | height: 24px; | ||
} | } | ||
- | |||
- | + | .blog-pager li a{ | |
- | # | + | display: block; |
+ | font-size: 20px; | ||
+ | padding-top: 4px; | ||
+ | color: #1f1f1f; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat; | ||
+ | } | ||
+ | |||
+ | .blog-pager li:first-child{ | ||
+ | display: block; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .blog-pager li:last-child{ | ||
+ | display: block; | ||
float: right; | float: right; | ||
- | |||
- | |||
} | } | ||
- | + | .blog-pager li:first-child a{ | |
- | + | background-position: -4px -201px; | |
- | + | padding-left: 26px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .blog-pager li:last-child a{ | |
- | + | background-position: right -201px; | |
- | + | padding-right: 14px; | |
- | + | ||
} | } | ||
- | + | ||
- | + | /* PORTFOLIO PAGER ------------------------------------------------------------*/ | |
- | + | ||
+ | .portfolio-pager{ | ||
+ | margin-left: 30px; | ||
} | } | ||
- | # | + | |
- | width: | + | |
- | margin: | + | /* SIDEBAR ------------------------------------------------------------*/ |
+ | |||
+ | #sidebar{ | ||
+ | width: 230px; | ||
+ | float: left; | ||
+ | margin-top: 0px; | ||
+ | margin-left: 20px; | ||
} | } | ||
- | # | + | |
- | + | #sidebar a{ | |
+ | color: #1f1f1f; | ||
+ | text-decoration: none; | ||
} | } | ||
- | . | + | |
+ | #sidebar li h2{ | ||
+ | display: block; | ||
+ | font-size: 20px; | ||
+ | line-height: 1.5em; | ||
+ | color: #1f1f1f; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat -205px -30px; | ||
+ | height: 38px; | ||
+ | text-indent: 15px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #sidebar li.sidemenu{ | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #sidebar li.sidemenu ul li{ | ||
+ | display: block; | ||
+ | font-size: 14px; | ||
+ | font-weight: bold; | ||
+ | margin-bottom: 10px; | ||
+ | padding-bottom: 10px; | ||
+ | text-indent: 10px; | ||
+ | border-bottom: 1px solid #cccccc; | ||
+ | } | ||
+ | |||
+ | #sidebar li.sidemenu ul li:last-child{ | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | /* RECENT-POSTS ------------------------------------------------------------*/ | ||
+ | |||
+ | #sidebar li.recent-posts{ | ||
+ | } | ||
+ | |||
+ | #sidebar li.recent-posts li{ | ||
+ | display: block; | ||
overflow: hidden; | overflow: hidden; | ||
- | + | padding: 5px 0px; | |
- | + | margin: 5px 0px 5px 10px; | |
+ | border: none 0px; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | ||
- | # | + | #sidebar li.recent-posts img{ |
- | + | float: left; | |
- | + | margin-right: 10px; | |
- | + | padding: 1px; | |
+ | border: 1px solid #e2e6e7; | ||
+ | width: 48px; | ||
+ | height: 48px; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | #sidebar li.recent-posts div.recent-excerpt{ | |
- | + | display: block; | |
- | font-size: | + | font-size: 14px; |
- | + | line-height: 1.5em; | |
+ | width: 150px; | ||
+ | float: left; | ||
} | } | ||
- | . | + | |
- | color: # | + | ul#sidebar li.recent-posts div.recent-excerpt a{ |
+ | font-weight: bold; | ||
+ | font-size: 14px; | ||
+ | line-height: 1.5em; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* BLOG-SINGLE ------------------------------------------------------------*/ | ||
+ | |||
+ | #posts .post-single{ | ||
+ | width: 100%; | ||
+ | margin-bottom: 30px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #posts .post-single .post-content{ | ||
+ | width: 620px; | ||
+ | margin-left: 90px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | #posts .post-single .post-title{ | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | #posts .post-single .post-title-1{ | ||
+ | font-size: 30px; | ||
+ | color: #1f1f1f; | ||
+ | } | ||
+ | |||
+ | #posts .post-single .post-title-2{ | ||
font-size: 16px; | font-size: 16px; | ||
- | + | color: #555555; | |
- | + | ||
} | } | ||
- | . | + | |
- | height: | + | #posts .post-single{ |
- | + | line-height: 1.5em; | |
} | } | ||
- | + | ||
- | + | /* COMMENTS ------------------------------------------------------------*/ | |
- | + | ||
- | + | .comments-list{ | |
- | + | display: block; | |
- | + | margin-left: 90px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
- | + | .comments-header{ | |
+ | font-size: 30px; | ||
+ | line-height: 1.3em; | ||
+ | margin-left: 90px; | ||
+ | margin-bottom: 25px; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat -7px -227px; | ||
+ | text-indent: 45px; | ||
} | } | ||
- | . | + | |
- | + | .comments-list li{ | |
- | + | display: block; | |
- | + | margin-bottom: 0px; | |
- | + | padding: 10px 10px; | |
- | + | line-height: 1.5em; | |
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
+ | .comments-list .children li{ | ||
+ | margin-left:1.2em; | ||
+ | } | ||
+ | |||
+ | .comments-list li .comment-wrap{ | ||
+ | overflow: visible; | ||
+ | position: relative; | ||
+ | padding: 0px 0px 20px 0px; | ||
+ | } | ||
+ | |||
+ | .comments-list li a{ | ||
+ | color: #1f1f1f; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .comments-list li .comments-right{ | ||
+ | min-height: 80px; | ||
+ | overflow: hidden; | ||
+ | padding-left: 20px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .comments-list li img{ | ||
+ | display: block; | ||
float: left; | float: left; | ||
- | margin: | + | margin: 0px 12px 20px 0px; |
} | } | ||
- | . | + | |
+ | .comments-list .meta-date{ | ||
+ | display: block; | ||
float: right; | float: right; | ||
- | + | color: #999999; | |
+ | font-style: italic; | ||
} | } | ||
- | . | + | |
- | + | .comments-list li div.brief{ | |
- | + | font-size: 14px; | |
- | + | line-height: 1.5em; | |
} | } | ||
- | . | + | .comments-list .edit-comment a{ |
- | + | font-size: 14px; | |
- | + | color: #999999; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | /* LEAVE COMMENT -------------------------------------------------------*/ | |
- | + | ||
- | + | .leave-comment{ | |
- | + | margin-left: 90px; | |
} | } | ||
- | + | ||
- | + | /* FORMS ------------------------------------------------------------*/ | |
- | + | ||
+ | #contactForm, | ||
+ | #commentform, | ||
+ | #contactForm{ | ||
+ | margin-bottom: 18px; | ||
} | } | ||
- | + | ||
- | margin | + | #commentform p, |
- | + | #contactForm p{ | |
+ | margin-bottom: 0px; | ||
} | } | ||
- | / | + | #contactForm input, |
- | . | + | #contactForm textarea, |
+ | #commentform input, | ||
+ | #commentform textarea{ | ||
+ | color: #1f1f1f; | ||
+ | font-size: 14px; | ||
+ | padding: 4px 5px; | ||
+ | background: #d2d2d2 url(../img/bgs/strips-thin.png); | ||
+ | border: none transparent; | ||
+ | } | ||
+ | |||
+ | #contactForm input, | ||
+ | #contactForm textarea, | ||
+ | #commentform input, | ||
+ | #commentform textarea{ | ||
+ | width: 97%; | ||
+ | margin-bottom: 6px; | ||
+ | font-family: Tahoma, Arial; | ||
+ | } | ||
+ | |||
+ | #commentform input, | ||
+ | #commentform textarea{ | ||
+ | width: 97%; | ||
+ | } | ||
+ | |||
+ | #contactForm #submit, | ||
+ | #commentform input#submit{ | ||
+ | width: 70px; | ||
+ | height: 39px; | ||
+ | background: url(../img/yellow/sprites.png) no-repeat 0px -273px; | ||
+ | border: none; | ||
+ | margin-top: 0px; | ||
+ | } | ||
+ | |||
+ | #contactForm label, | ||
+ | #commentform label{ | ||
display: block; | display: block; | ||
+ | font-size: 14px; | ||
+ | line-height: 1.5em; | ||
+ | font-weight: light; | ||
+ | } | ||
+ | |||
+ | /* PORTFOLIO ------------------------------------------------------------*/ | ||
+ | |||
+ | .wrapper-portfolio{ | ||
+ | width: 520px; | ||
overflow: hidden; | overflow: hidden; | ||
- | margin: | + | margin-top: 20px; |
+ | margin-left: 30px; | ||
} | } | ||
- | . | + | |
- | + | .wrapper-portfolio .portfolio-item{ | |
+ | overflow: hidden; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .wrapper-portfolio .portfolio-feature{ | ||
float: left; | float: left; | ||
+ | width: 280; | ||
+ | overflow:hidden; | ||
} | } | ||
- | . | + | |
- | + | .wrapper-portfolio .portfolio-content{ | |
- | margin- | + | float: left; |
+ | width: 180px; | ||
+ | margin-left: 20px; | ||
} | } | ||
- | . | + | |
- | + | .wrapper-portfolio .portfolio-content .portfolio-title{ | |
+ | font-size: 30px; | ||
+ | color: #1f1f1f; | ||
} | } | ||
- | . | + | |
- | + | .wrapper-portfolio .portfolio-content .client-title{ | |
+ | font-size: 16px; | ||
+ | color: #555555; | ||
} | } | ||
- | . | + | |
- | + | .wrapper-portfolio .portfolio-content .excerpt{ | |
- | + | line-height: 1.5em; | |
- | + | } | |
+ | |||
+ | |||
+ | .wrapper-portfolio2{ | ||
+ | width: 520px; | ||
+ | overflow: hidden; | ||
+ | margin-top: 20px; | ||
+ | margin-left: 90px; | ||
+ | } | ||
+ | |||
+ | .wrapper-portfolio2 .portfolio-item{ | ||
+ | overflow: hidden; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .wrapper-portfolio2 .portfolio-feature{ | ||
float: left; | float: left; | ||
- | + | width: 280; | |
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | .wrapper-portfolio2 .portfolio-content{ | ||
float: left; | float: left; | ||
- | + | width: 180px; | |
+ | margin-left: 20px; | ||
+ | } | ||
+ | |||
+ | .wrapper-portfolio2 .portfolio-content .portfolio-title{ | ||
+ | font-size: 30px; | ||
+ | color: #1f1f1f; | ||
+ | } | ||
+ | |||
+ | .wrapper-portfolio2 .portfolio-content .client-title{ | ||
+ | font-size: 16px; | ||
+ | color: #555555; | ||
+ | } | ||
+ | |||
+ | .wrapper-portfolio2 .portfolio-content .excerpt{ | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | |||
+ | /* TWITTER READER ------------------------------------------------------------*/ | ||
+ | |||
+ | .twitter-reader{ | ||
width: 100%; | width: 100%; | ||
+ | margin-top: 18px; | ||
+ | padding-top: 18px; | ||
+ | border-top: 1px #ccc dashed; | ||
+ | padding-bottom: 18px; | ||
+ | color: #555555; | ||
+ | background: url(../img/twiiter-bird.png) no-repeat 30px 10px; | ||
+ | min-height: 60px; | ||
} | } | ||
- | . | + | |
- | + | #twitter-holder{ | |
+ | margin-left: 130px; | ||
+ | line-height: 1.5em; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | #twitter-holder .twitter-entry, | ||
+ | #twitter-holder .follow-me{ | ||
+ | |||
+ | } | ||
+ | |||
+ | .twitter-time{ | ||
+ | color: #ccc; | ||
+ | } | ||
+ | |||
+ | /*-- FOOTER ---------------------------------------------------------------*/ | ||
+ | |||
+ | #footer{ | ||
+ | position: relative; | ||
width: 100%; | width: 100%; | ||
- | + | font-size: 14px; | |
- | + | color: #ffffff; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
+ | #footer .torn-bottom{ | ||
+ | position: absolute; | ||
+ | height: 6px; | ||
+ | width: 100%; | ||
+ | top: 0px; | ||
+ | background: url(../img/borders/torn-bottom.png) repeat-x top; | ||
+ | border-top: 24px solid white; | ||
+ | z-index: -5; | ||
+ | } | ||
+ | |||
+ | #footer .follow-us{ | ||
display: block; | display: block; | ||
- | + | height: 45px; | |
- | + | overflow: hidden; | |
- | height: | + | z-index: 130; |
- | + | ||
- | + | ||
} | } | ||
- | + | ||
+ | #footer .follow-us li{ | ||
display: block; | display: block; | ||
float: left; | float: left; | ||
- | + | height: 100%; | |
- | height: | + | font-size: 26px; |
- | + | background: #fec709; | |
- | background: | + | |
} | } | ||
- | + | ||
- | background-position: | + | .icon{ |
+ | display: block; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: left top; | ||
+ | width: 32px; | ||
+ | margin-right: 5px; | ||
+ | margin-top: 7px; | ||
+ | height: 100%; | ||
+ | text-indent: -9000px; | ||
} | } | ||
- | + | ||
+ | #footer .follow-us li:first-child{ | ||
+ | font-size: 26px; | ||
+ | padding-left: 30px; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | |||
+ | #footer .follow-us li:first-child span{ | ||
display: block; | display: block; | ||
- | + | margin-top: 10px; | |
- | + | color: #1c1c1c; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | + | #footer .follow-us li:last-child{ | |
+ | background: url(../img/yellow/sprites.png) no-repeat -162px -32px; | ||
+ | width: 37px; | ||
+ | } | ||
- | + | .wrapper-footer{ | |
- | + | width: 1300px; | |
- | + | margin-left: 20px; | |
- | margin: | + | |
} | } | ||
- | . | + | |
- | + | /* FOOTER-COLS ------------------------------------------------------------*/ | |
- | + | ||
+ | #footer ul.footer-cols{ | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
} | } | ||
- | . | + | |
+ | #footer ul.footer-cols a{ | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | #footer ul.footer-cols li.col{ | ||
display: block; | display: block; | ||
- | + | width: 300px; | |
- | margin: | + | float: left; |
+ | margin-bottom: 20px; | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
} | } | ||
- | . | + | |
- | margin: | + | #footer ul.footer-cols li.col ul{} |
+ | |||
+ | #footer ul.footer-cols li.col ul li{ | ||
+ | margin-bottom: .1em; | ||
} | } | ||
- | + | #footer ul.footer-cols li.col ul li a{ | |
- | . | + | text-decoration: none; |
- | + | font-size: 14px; | |
- | + | line-height: 1.5em; | |
+ | font-weight: lighter; | ||
+ | color: #fff; | ||
} | } | ||
- | + | ||
- | + | #footer ul.footer-cols li.col h6{ | |
- | + | color: #fff; | |
- | + | text-decoration: none; | |
- | + | font-size: 26px; | |
- | . | + | margin: 20px 15px 0 0px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | #footer ul.footer-cols li.col ul li a:hover{ | |
- | + | text-decoration: underline; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | #footer ul.footer-cols li.col p{ | |
- | + | line-height: 1.5em; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | #footer ul.footer-cols li.col a{ | |
- | + | color: #fec709; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | /* | + | /* FOOTER-BOTTOM ------------------------------------------------------------*/ |
- | + | ||
- | + | #footer div.footer-bottom{ | |
- | + | height: 20px; | |
- | + | color: white; | |
- | . | + | padding-left: 10px; |
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #footer div.footer-bottom a{ | ||
+ | color: #7a7a7a; | ||
+ | } | ||
+ | |||
+ | #footer div.footer-bottom p{ | ||
+ | display: block; | ||
+ | font-size: 14px; | ||
+ | line-height: 1.5em; | ||
+ | color: #7a7a7a; | ||
+ | } |
Latest revision as of 16:18, 25 September 2012
/* Torn v.1.2
- /
/* IMPORTS ------------------------------------------------------------*/
@import url('reset.css');
@import url('social-icons.css');
/* HACKS ------------------------------------------------------------*/
.clear{ clear:both; height:1px; }
.inv{ display:none; }
/* prettyPhoto fix */ .pp_description, .currentTextHolder{ color: #606060; }
/* TOOLTIP ------------------------------------------------------------*/
.tooltip, .tooltip-right, .tooltip-bottom, .tooltip-left { display:none; font-size:12px; height:70px; width:160px; padding:25px; color: #ffffff; line-height: 1.3em; z-index: 600; }
.tooltip {background:transparent url(../img/tooltip.png);} .tooltip-right {background:transparent url(../img/tooltip-right.png);} .tooltip-bottom {background:transparent url(../img/tooltip-bottom.png);} .tooltip-left {background:transparent url(../img/tooltip-left.png);}
/* GENERAL ------------------------------------------------------------*/
html{ height: 100%; }
body { line-height: 1;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 100%; height: 100%; background: #1f1f1f url(../img/bgs/strips-bold.png); color: #1f1f1f; }
.wrapper-header{ width: 800px; position: absolute; top: 0px; left: 200px;
}
- header{
position: relative; width: 800px; height: 135px; font-size: 14px; z-index: 10; }
.torn-top{ position: absolute; height: 6px; width: 100%; top: 130px; background: url(../img/borders/torn-top.png) repeat-x bottom ; z-index: 130; }
- logo{
position: absolute; top: 20px; left: -5px; }
- main{
position: relative; width: 100%; min-height: 700px; font-size: 14px; background: white; padding-top: 22px; }
.wrapper{ width: 800px; margin-left: 20px; position: relative; overflow: hidden; }
.page-title-holder{ width: 100%; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px #ccc dashed; }
.page-title{ font-size: 40px; color: #1f1f1f; margin-left: 10px; }
.page-subtitle{ font-size: 26px; color: #555555; margin-left: 10px; }
.page-title-holder > .page-title,
.page-title-holder > .page-subtitle{
margin-left: 30px;
}
.page-title-holder .link-button{ margin-left: 30px; }
h1{ font-size: 40px;}
h2{ font-size: 36px;}
h3{ font-size: 30px;}
h4{ font-size: 26px;}
h5{ font-size: 20px;}
h6{ font-size: 16px;}
h7{ font-family:Mistral; font-size: 20px; text-transform: none; } h8{font-family:"Staccato222 BT"; font-size:25px; } h9{font-family:"Copperplate Gothic Light"; font-size:17px; font-weight:700; color:#FEC709; }
h1, h2, h3, h4, h5, h6{ margin-bottom: .0em; }
a{ text-decoration: none; color: #fec709; }
.headline, .custom, .title .big{ word-spacing: 0.2em; }
div.headline{ font-size: 32px; line-height: 1.5em; color: #fff; width: 960px; text-transform: uppercase; text-align: center; text-shadow: #000 1px 1px 1px; margin-bottom: 20px; }
.title{ display: block; overflow: hidden; color: #665d4e; height: 90px; width: 960px; margin: 0 auto 0px auto; background: url(../img/title-bg.png) no-repeat; color: #12262d; }
.sub-header{ font-size: 30px; }
.title span.big{ display: block; float: left; font-size: 24px; margin: 22px 0px 0px 25px; }
.title span.small{ display: block; float: left; font-size: 14px; margin-left: 15px; margin-top: 31px; }
a.more{ display: block; overflow: hidden; color: #fff; font-size: 14px; line-height: 1.3em; text-decoration: none; }
a.more:hover{ color: white; }
.separator{ border-top: 1px solid #e2e6e7; margin-bottom: 1.5em; }
.top-gap{ margin-top:20px; }
/* page-content--------------------------------------------------------*/
.page-content{ overflow: visible; width: 950px; margin: 10px 10px 20px 10px; line-height: 1.5em; }
.page-content p{ margin-bottom: 18px; }
/* page-introduction--------------------------------------------------------*/
.page-introduction{ overflow: visible; width: 950px; margin: 10px 10px 20px 10px; line-height: 1.5em; }
.page-introduction p{ margin-bottom: 18px; }
/* page-contact--------------------------------------------------------*/
.page-contact{ overflow: hidden; width: 960px; margin: 10px 10px 20px 10px; line-height: 1.5em; }
.page-contact p{ margin-bottom: 18px; }
/* COLUMNS LAYOUT----------------------------------------------------------*/
.one-half, .one-third, .two-third, .three-fourth, .one-fourth { float:left; margin-right:20px; position:relative; }
.one-half{width: 458px;}
.one-third{width: 300px;}
.one-fourth{width: 220px;}
.two-third{width: 620px;}
.three-fourth{width: 700px; }
.last { clear:right; margin-right:0 !important; }
/* LINK BUTTON ------------------------------------------------------------*/
.link-button{ display: table; height: 31px; padding-left: 5px; font-size: 20px; margin-top: 10px; color: #1f1f1f; background: url(../img/yellow/sprites.png) -40px -170px no-repeat; }
.link-button span{ display: block; height: 100% ; padding-top: 8px; padding-right: 10px; padding-left: 5px; background: url(../img/yellow/sprites.png) no-repeat right -132px; }
/* SEARCH ------------------------------------------------------------*/
.top-search{ position: absolute; left: 800px; top: 20px; }
form#searchform{ position: relative; width: 230px; height: 50px; }
form#searchform input#s{ color: #1f1f1f; font-size: 14px; width: 210px; height: 26px; margin: 0px 0px 5px 0px; padding: 0px 5px 0px 5px; border: 0; background: #d2d2d2 url(../img/bgs/strips-thin.png); }
form#searchform input#searchsubmit{
position: absolute;
top: 0px;
left: 220px;
width: 33px;
height: 31px;
border: 0px;
background: url(../img/yellow/sprites.png) no-repeat transparent -100px -92px;
}
form#searchform input#searchsubmit:hover{ background-position: -137px -92px; }
/* STYLED ------------------------------------------------------------*/
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 #cccccc; }
img.border{ border: 2px solid white; }
.shadow-img{ display: block; padding-bottom: 22px; background: url(../img/thumb-shadow.png) no-repeat bottom center ; }
.dropcap { display:block; float:left; font-size:40px; line-height:40px; margin:0 8px 0 0; }
.highlight { background:yellow; color:#111111; padding:1px 4px; }
.pullquote-right, .pullquote-left { border-left: #555555 2px solid; float:right; font-size:16px; line-height:1.5em; margin: 20px 0px 20px 20px; padding:0 0 0 20px; width:33%; font-style: italic; }
.pullquote-left { float:left; margin: 20px 20px 20px 0px; }
.pullquote-right{ border-left: none; border-right: #555555 2px solid; }
/* TABLE ------------------------------------------------------------*/
table, td, th { vertical-align:middle; }
table { border-collapse:separate; border-spacing:0; border-top:1px solid white; margin-bottom:28px; width:100%; text-align: left; }
th{ border-top:5px solid #555555; color: #ffffff; padding:10px; text-transform:uppercase; background-color: #1f1f1f; }
td{ padding:10px; }
td, th{ border-bottom: 1px solid #1f1f1f; }
/* INFO BOXES ------------------------------------------------------------*/
.info, .success, .warning, .error, .validation{ border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.info{ color: #00529B; background-color: #BDE5F8; background-image: url('../img/knobs-icons/Knob Info.png'); }
.success{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Valid Green.png'); }
.warning{ color: #9F6000; background-color: #FEEFB3; background-image: url('../img/knobs-icons/Knob Attention.png'); }
.error{ color: #D8000C; background-color: #FFBABA; background-image: url('../img/knobs-icons/Knob Cancel.png'); }
/* TOGGLE & ACCORDION ------------------------------------------------------------*/
h5.accordion-trigger, h5.toggle-trigger { padding: 0 0 0 20px; margin: 0 0 5px 0; height: 46px; line-height: 46px; width: 100%; float: left; border-bottom: 1px solid #cccccc; }
h5.accordion-trigger a, h5.toggle-trigger a { text-decoration: none; display: block; color: #1f1f1f; }
h5.accordion-trigger a:hover, h5.toggle-trigger a:hover { color: #cccccc; }
div.accordion-container, div.toggle-container { margin: 0 0 5px 0px; padding: 0; overflow: hidden; width: 95%; clear: both; }
div.accordion-container .block, div.toggle-container .block { padding: 10px; }
div.accordion-container .block , div.toggle-container .block { font-size: 14px; line-height: 1.5em; }
div.accordion-container .block p, div.toggle-container .block p{ margin-bottom: 1.5em; }
/*-- NAV ---------------------------------------------------------------*/
- nav{
display: block; position: absolute; right: 0px; top: 63px; height: 72px; }
- nav li{
display: block; float: left; height: 100%; margin-left: 4px; margin-right: 4px; z-index: 8; }
- nav>li>a{
color: #fec709; height: 47px; padding: 25px 8px 0px 8px; font-size: 20px; }
- nav li a:hover{ color: #FFFFFF; }
- nav li.current_page_item{
background: url(../img/yellow/sprites.png) no-repeat right -27px ; }
- nav li.current_page_item a{ color: #1f1f1f; }
/* sub nav */
- nav li ul{
padding:0px; background: #fec709; }
- nav>li>ul{
margin: 47px 0px 0px 0px; }
- nav li ul li{
padding: 0px; margin: 0px; border-bottom: 1px solid #fff; }
- nav li ul li:last-child{
border-bottom: none; }
- nav li ul li a{
padding: 10px; margin: 0px; font-size: 14px; color: #1f1f1f; }
- nav li ul li:hover{ background: #1f1f1f; }
- nav li ul li:hover a{ color: #fff; }
/* SLIDESHOW ------------------------------------------------------------*/
.wrapper-slideshow{ width: 975px; margin-left: 30px; overflow: hidden; }
- slideshow{
overflow: hidden; position: relative; margin-top: 15px; margin-bottom: 15px; width: 100%; z-index: 0; }
- slideshow ul#slides{
width: 970px; height: 345px; }
- slideshow-nav-holder{
display: block; position: absolute; overflow: hidden; height: 31px; bottom: 0px; right: 0px; z-index: 30; }
- slideshow-nav{
display: block; overflow: hidden; height: 31px; background: url(../img/yellow/sprites.png) -45px -132px; float: left; }
- slideshow-nav-holder .nav-left{
width: 13px; height: 31px; float: left; background: url(../img/yellow/sprites.png) -1px -132px; }
- slideshow-nav-holder .nav-right{
width: 13px; height: 31px; float: left; background: url(../img/yellow/sprites.png) -963px -132px; }
- slideshow-nav a {
display: block; float: left;
background: url(../img/yellow/sprites.png) -91px -52px; width: 14px; height: 15px; margin-top: 11px; text-indent: -9000px; margin-right: 3px; margin-left: 3px; }
- slideshow-nav a:hover{
background: url(../img/yellow/sprites.png) -91px -31px; }
- slideshow-nav a.activeSlide {
background: url(../img/yellow/sprites.png) -69px -31px; }
/* BLOCKS ------------------------------------------------------------*/
.blocks-holder{ display: block; overflow: hidden; margin-bottom: 15px; }
.blocks-holder li{ display: block; float: left; width: 460px; margin: 10px 10px; }
.blocks-holder .img-holder{ overflow: hidden; position: relative; }
.blocks-holder .img-holder .block-title{ display: block; position: absolute; bottom: 0px; left: 10px; width: 430px; padding: 10px 10px 0px 10px; font-size: 26px; background: white; }
.blocks-holder .block-text{ line-height: 1.5em; padding: 0px 20px 10px 20px; }
/* FILTER ---------------------------------------------------*/
- portfolio-filter{
display: block; overflow: hidden; width: 970px; height: 22px; padding-top: 3px; margin-left: 0px; margin-bottom: 8px; background: url(../img/yellow/sprites.png) no-repeat right top; }
- portfolio-filter li{
display: block; float: left; margin-right: 10px; font-size: 20px; }
- portfolio-filter li:first-child{
color: #FFF; padding-right: 10px; margin-left: 30px; border-right: 1px solid white; }
- portfolio-filter li a{
color: #1f1f1f; text-decoration: none; }
- portfolio-filter li a:hover{
color: #fff; }
/* GALLERY ------------------------------------------------------------*/
/* 3 cols default */ .gallery{ overflow: hidden; width: 100%; }
.gallery li{ display: block; position: relative; overflow: hidden; width: 300px; height: 200px; float: left; margin: 10px 10px; }
.gallery.two-cols li{ width: 458px; }
.gallery.three-cols li{ width: 300px; }
.gallery.four-cols li{ width: 220px; }
.gallery li span{ display: none; position: absolute; top: 0px; right: 0px; width: 44px; height: 44px; background: url(../img/yellow/sprites.png) no-repeat -0px -31px; }
.gallery li:hover span{ display: block; }
.gallery li em{ display: block; position: absolute; width: 280px; bottom: 0px; left: 10px; padding: 10px 10px 0px 10px; background: white; color: #1f1f1f; font-size: 20px; font-style: normal; }
.gallery.two-cols li em{ width: 428px; }
.gallery.three-cols li em{ width: 280px; }
.gallery.four-cols li em{ width: 190px; }
/* GALLERY PAGER ------------------------------------------------------------*/
.gallery-pager{ overflow: hidden; display: block; height: 16px; margin-left: 0px; margin-top: 18px; margin-bottom: 20px; }
.gallery-pager li{ display: block; width: 17px; height: 16px; float: left; background: url(../img/yellow/sprites.png) no-repeat; background-position: -90px -31px; margin-left: 5px; }
.gallery-pager li:hover, .gallery-pager li.active{ background-position: -69px -31px; }
.gallery-pager li a{ display: block; width: 100%; height: 100%; text-indent: -9000px; }
.gallery-pager li:first-child{ background-position: -47px -31px; }
.gallery-pager li:last-child{ background-position: -110px -31px; }
/* BLOG ------------------------------------------------------------*/
.wrapper-blog{ width: 960px; overflow: hidden; margin-top: 20px; }
- posts{
width: 710px; min-height: 650px; float: left; }
- posts .post{
width: 100%; margin-bottom: 30px; overflow: hidden; }
- posts .post .meta{
display: block; overflow: hidden; float: left; height: 88px; width: 80px; padding-left: 10px; color: #ffffff; background: url(../img/yellow/sprites.png) no-repeat -443px -30px; }
- posts .post .meta li{
display: block; }
- posts .post .meta .day{
font-size: 40px; margin-top: 5px; margin-bottom: -7px; }
- posts .post .meta .month-year{
font-size: 16px; margin-bottom: 7px; }
- posts .post .meta .comments{
font-size: 16px; text-indent: 22px; background: url(../img/comments-icon.png) no-repeat 0px 2px; }
- posts .post .post-content{
width: 620px; float: left; }
- posts .post .post-img{
display: block; position: relative; }
- posts .post .post-img img{
margin-bottom: 5px; }
- posts .post .post-title {
background: #ffffff; position: absolute; left: 10px; padding: 10px; width: 590px; }
- posts .post .post-title{}
- posts .post .post-title-1{
font-size: 30px; color: #1f1f1f; }
- posts .post .post-title-2{
font-size: 16px; color: #555555; }
- posts .post .excerpt{
line-height: 1.5em; }
- posts .post .link-button{
float: right; }
/* BLOG PAGER ------------------------------------------------------------*/
.blog-pager{ display: block; width: 835px; height: 24px; margin-left: 90px; margin-top: 20px; margin-bottom: 20px; }
.blog-pager li{ height: 24px; }
.blog-pager li a{ display: block; font-size: 20px; padding-top: 4px; color: #1f1f1f; height: 100%; width: 100%; background: url(../img/yellow/sprites.png) no-repeat; }
.blog-pager li:first-child{ display: block; float: left; }
.blog-pager li:last-child{ display: block; float: right; }
.blog-pager li:first-child a{ background-position: -4px -201px; padding-left: 26px; }
.blog-pager li:last-child a{ background-position: right -201px; padding-right: 14px; }
/* PORTFOLIO PAGER ------------------------------------------------------------*/
.portfolio-pager{ margin-left: 30px; }
/* SIDEBAR ------------------------------------------------------------*/
- sidebar{
width: 230px; float: left; margin-top: 0px; margin-left: 20px; }
- sidebar a{
color: #1f1f1f; text-decoration: none; }
- sidebar li h2{
display: block; font-size: 20px; line-height: 1.5em; color: #1f1f1f; background: url(../img/yellow/sprites.png) no-repeat -205px -30px; height: 38px; text-indent: 15px; width: 100%; }
- sidebar li.sidemenu{
margin-bottom: 20px; }
- sidebar li.sidemenu ul li{
display: block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding-bottom: 10px; text-indent: 10px; border-bottom: 1px solid #cccccc; }
- sidebar li.sidemenu ul li:last-child{
border: none; }
/* RECENT-POSTS ------------------------------------------------------------*/
- sidebar li.recent-posts{
}
- sidebar li.recent-posts li{
display: block; overflow: hidden; padding: 5px 0px; margin: 5px 0px 5px 10px; border: none 0px; }
- sidebar li.recent-posts img{
float: left; margin-right: 10px; padding: 1px; border: 1px solid #e2e6e7; width: 48px; height: 48px; }
- sidebar li.recent-posts div.recent-excerpt{
display: block; font-size: 14px; line-height: 1.5em; width: 150px; float: left; }
ul#sidebar li.recent-posts div.recent-excerpt a{ font-weight: bold; font-size: 14px; line-height: 1.5em; text-decoration: none; }
/* BLOG-SINGLE ------------------------------------------------------------*/
- posts .post-single{
width: 100%; margin-bottom: 30px; overflow: hidden; }
- posts .post-single .post-content{
width: 620px; margin-left: 90px; float: left; }
- posts .post-single .post-title{
margin-bottom: 10px; }
- posts .post-single .post-title-1{
font-size: 30px; color: #1f1f1f; }
- posts .post-single .post-title-2{
font-size: 16px; color: #555555; }
- posts .post-single{
line-height: 1.5em; }
/* COMMENTS ------------------------------------------------------------*/
.comments-list{ display: block; margin-left: 90px; }
.comments-header{ font-size: 30px; line-height: 1.3em; margin-left: 90px; margin-bottom: 25px; background: url(../img/yellow/sprites.png) no-repeat -7px -227px; text-indent: 45px; }
.comments-list li{ display: block; margin-bottom: 0px; padding: 10px 10px; line-height: 1.5em; }
.comments-list .children li{ margin-left:1.2em; }
.comments-list li .comment-wrap{ overflow: visible; position: relative; padding: 0px 0px 20px 0px; }
.comments-list li a{ color: #1f1f1f; text-decoration: none; }
.comments-list li .comments-right{ min-height: 80px; overflow: hidden; padding-left: 20px; position: relative; }
.comments-list li img{ display: block; float: left; margin: 0px 12px 20px 0px; }
.comments-list .meta-date{ display: block; float: right; color: #999999; font-style: italic; }
.comments-list li div.brief{ font-size: 14px; line-height: 1.5em; }
.comments-list .edit-comment a{ font-size: 14px; color: #999999; }
/* LEAVE COMMENT -------------------------------------------------------*/
.leave-comment{ margin-left: 90px; }
/* FORMS ------------------------------------------------------------*/
- contactForm,
- commentform,
- contactForm{
margin-bottom: 18px; }
- commentform p,
- contactForm p{
margin-bottom: 0px; }
- contactForm input,
- contactForm textarea,
- commentform input,
- commentform textarea{
color: #1f1f1f; font-size: 14px; padding: 4px 5px; background: #d2d2d2 url(../img/bgs/strips-thin.png); border: none transparent; }
- contactForm input,
- contactForm textarea,
- commentform input,
- commentform textarea{
width: 97%; margin-bottom: 6px; font-family: Tahoma, Arial; }
- commentform input,
- commentform textarea{
width: 97%; }
- contactForm #submit,
- commentform input#submit{
width: 70px; height: 39px; background: url(../img/yellow/sprites.png) no-repeat 0px -273px; border: none; margin-top: 0px; }
- contactForm label,
- commentform label{
display: block; font-size: 14px; line-height: 1.5em; font-weight: light; }
/* PORTFOLIO ------------------------------------------------------------*/
.wrapper-portfolio{ width: 520px; overflow: hidden; margin-top: 20px; margin-left: 30px; }
.wrapper-portfolio .portfolio-item{ overflow: hidden; margin-bottom: 20px; }
.wrapper-portfolio .portfolio-feature{ float: left; width: 280; overflow:hidden; }
.wrapper-portfolio .portfolio-content{ float: left; width: 180px; margin-left: 20px; }
.wrapper-portfolio .portfolio-content .portfolio-title{ font-size: 30px; color: #1f1f1f; }
.wrapper-portfolio .portfolio-content .client-title{ font-size: 16px; color: #555555; }
.wrapper-portfolio .portfolio-content .excerpt{ line-height: 1.5em; }
.wrapper-portfolio2{
width: 520px;
overflow: hidden;
margin-top: 20px;
margin-left: 90px;
}
.wrapper-portfolio2 .portfolio-item{ overflow: hidden; margin-bottom: 20px; }
.wrapper-portfolio2 .portfolio-feature{ float: left; width: 280; overflow:hidden; }
.wrapper-portfolio2 .portfolio-content{ float: left; width: 180px; margin-left: 20px; }
.wrapper-portfolio2 .portfolio-content .portfolio-title{ font-size: 30px; color: #1f1f1f; }
.wrapper-portfolio2 .portfolio-content .client-title{ font-size: 16px; color: #555555; }
.wrapper-portfolio2 .portfolio-content .excerpt{ line-height: 1.5em; }
/* TWITTER READER ------------------------------------------------------------*/
.twitter-reader{ width: 100%; margin-top: 18px; padding-top: 18px; border-top: 1px #ccc dashed; padding-bottom: 18px; color: #555555; background: url(../img/twiiter-bird.png) no-repeat 30px 10px; min-height: 60px; }
- twitter-holder{
margin-left: 130px; line-height: 1.5em; font-size: 18px; }
- twitter-holder .twitter-entry,
- twitter-holder .follow-me{
}
.twitter-time{ color: #ccc; }
/*-- FOOTER ---------------------------------------------------------------*/
- footer{
position: relative; width: 100%; font-size: 14px; color: #ffffff; }
- footer .torn-bottom{
position: absolute; height: 6px; width: 100%; top: 0px; background: url(../img/borders/torn-bottom.png) repeat-x top; border-top: 24px solid white; z-index: -5; }
- footer .follow-us{
display: block; height: 45px; overflow: hidden; z-index: 130; }
- footer .follow-us li{
display: block; float: left; height: 100%; font-size: 26px; background: #fec709; }
.icon{ display: block; background-repeat: no-repeat; background-position: left top; width: 32px; margin-right: 5px; margin-top: 7px; height: 100%; text-indent: -9000px; }
- footer .follow-us li:first-child{
font-size: 26px; padding-left: 30px; padding-right: 10px; }
- footer .follow-us li:first-child span{
display: block; margin-top: 10px; color: #1c1c1c; }
- footer .follow-us li:last-child{
background: url(../img/yellow/sprites.png) no-repeat -162px -32px; width: 37px; }
.wrapper-footer{ width: 1300px; margin-left: 20px; }
/* FOOTER-COLS ------------------------------------------------------------*/
- footer ul.footer-cols{
display: block; overflow: hidden; }
- footer ul.footer-cols a{
color: #FFF; }
- footer ul.footer-cols li.col{
display: block; width: 300px; float: left; margin-bottom: 20px; margin-right: 10px; margin-left: 10px; }
- footer ul.footer-cols li.col ul{}
- footer ul.footer-cols li.col ul li{
margin-bottom: .1em; }
- footer ul.footer-cols li.col ul li a{
text-decoration: none; font-size: 14px; line-height: 1.5em; font-weight: lighter; color: #fff; }
- footer ul.footer-cols li.col h6{
color: #fff; text-decoration: none; font-size: 26px; margin: 20px 15px 0 0px; }
- footer ul.footer-cols li.col ul li a:hover{
text-decoration: underline; }
- footer ul.footer-cols li.col p{
line-height: 1.5em; }
- footer ul.footer-cols li.col a{
color: #fec709; }
/* FOOTER-BOTTOM ------------------------------------------------------------*/
- footer div.footer-bottom{
height: 20px; color: white; padding-left: 10px; margin-bottom: 20px; }
- footer div.footer-bottom a{
color: #7a7a7a; }
- footer div.footer-bottom p{
display: block; font-size: 14px; line-height: 1.5em; color: #7a7a7a; }