/*
Theme Name: Webfolio
Theme URI: http://www.s5themes.com/theme/webfolio/
Description: Webfolio - Check Webfolio Documentation in case you need directions or get support from Forum.
Author: Site5.com
Author URI: http://gk.site5.com/t/536
Version: 2.0.2
License: GPL
License URI: http://www.gnu.org/copyleft/gpl.html
*/
/* MAIN STYLES
-------------------------------------------*/
* { margin: 0; padding: 0; }
body,html {
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#333;
background:#EFEFEF url(library/images/bk_body.jpg) repeat-x;
}
ul {
list-style:none;
}
ul, ol {
margin: 0.5em 0;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:focus {
outline:none;
}
p {
margin:0 0 1em;
}
h1, h2, h3 {
font-size:28px;
line-height:100%;
padding-bottom:15px;
}
h2 {
font-size:20px;
padding-top:10px;
font-weight:normal;
}
h3 {
font-size:16px;
padding-top:10px;
}
/* LAYOUT STRUCTURE
--------------------------------------------------*/
#wrapper {
margin:0 auto;
width:960px;
}
header {
height:195px;
position:relative;
z-index:99;
padding:0 8px;
background:url(library/images/bk_header.jpg) 100% 0 no-repeat;
}
#content {
padding:15px 0 50px;
}
section{
width:655px;
float:left;
}
/* page container for Portfolio */
section.colFull{
width:960px;
}
aside {
padding:8px;
float:left;
width:256px;
border:1px solid #ccc;
background:#f9f9f9;
margin-left:27px;
margin-top:15px;
font-size:12px;
border-radius:6px;
}
aside #inner {
padding:10px;
background:url(library/images/bk_colright.jpg);
}
footer {
/*background:#000 url(library/images/bk_footer.jpg) 0 0 repeat-x;*/
background:#000;
margin:0;
color:#333;
position:relative;
font-size:12px;
padding-bottom:20px;
}
#innerFooter {
width:960px;
margin:0 auto;
padding:25px 0 35px;
position:relative;
}
/* HEADER ELEMENTS
------------------------------------------*/
#site5top {
position:absolute;
top:17px;
right:8px;
}
#site5top a {
display:block;
width:197px;
height:22px;
text-indent:-9999px;
background:url(library/images/site5_top.png) 0 0 no-repeat;
}
/* -- logo --*/
#logo {
position:absolute;
top:36px;
left:5px;
color:#FFF;
}
#logo a img{
border:none;
vertical-align:middle;
margin-right:20px;
}
#logo a {
font-size:40px;
font-weight:bold;
color:#ddd;
}
#logo h1 {
margin:0;
padding:0;
font-weight:bold;
}
#logo a:hover {
text-decoration: none;
}
#logo span {
font-size:11px;
padding-top:8px;
text-transform: uppercase;
color:#888;
display:block;
}
/* -- search --*/
#searchTop {
position:absolute;
right:0;
top:49px;
font-weight: bold;
color: #fff;
font-size: 25px;
}
/* -- main menu --*/
nav {
width:960px;
height:46px;
position:absolute;
top:125px;
left:0;
-webkit-box-shadow: 0 6px 6px -6px #999;
-moz-box-shadow: 0 6px 6px -6px #999;
box-shadow: 0 6px 6px -6px #999;
}
nav ul.sf-menu {
padding-top:14px;
padding-left:3px;
}
nav ul.sf-menu li {
float:left;
padding:0 15px;
font-size:12px;
}
nav ul.sf-menu li a {
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
padding:4px 0;
}
nav ul.sf-menu li a:hover {
text-shadow:none;
}
nav ul.sf-menu li li {
padding:0;
border:none;
}
nav ul.sf-menu li li a {
font-weight:normal;
padding:4px 12px;
}
nav ul.sf-menu li ul.children, nav ul.sf-menu li ul.sub-menu {
padding:5px 0;
display:block;
border-radius:0 0 6px 6px;
box-shadow: 0 6px 6px -6px #999;
}
nav ul.sf-menu li ul.children li, nav ul.sf-menu li ul.sub-menu li, nav ul.sf-menu li.page_item ul li {
position:relative;
line-height:100%;
text-transform:none;
}
nav ul.sf-menu li ul.children li a, nav ul.sf-menu li ul.sub-menu li a, nav ul.sf-menu li.page_item ul li a {
text-decoration: none;
display:block;
padding-top:7px;
line-height:100%;
border:none;
text-transform:none;
}
nav ul.sf-menu li ul.children li ul.children a, nav ul.sf-menu li ul.sub-menu li ul.sub-menu a {
text-decoration: none;
position:relative;
border:none;
}
nav ul.sf-menu li ul.children, nav ul.sf-menu li ul.sub-menu, nav ul.sf-menu li.page_item ul
{
margin-top:-4px;
}
nav ul.sf-menu li ul.children ul.children, nav ul.sf-menu li ul.sub-menu ul.sub-menu
{
margin:0 0 0 25px;
}
#socialIcons {
position:absolute;
right:0;
top:133px;
margin:0.5em 0;
}
#socialIcons li {
float:left;
padding:0 10px;
}
#socialIcons li a {
display:block;
text-indent: -9999px;
width:24px;
height:19px;
}
#socialIcons li a:hover {
background-position:0 -19px;
}
#socialIcons .twitter {
background:url(library/images/ico_twitter.png) 0 0 no-repeat;
}
#socialIcons .facebook {
background:url(library/images/ico_facebook.png) 0 0 no-repeat;
}
#socialIcons .flickr {
background:url(library/images/ico_flickr.png) 0 0 no-repeat;
}
#socialIcons .linkedin {
background:url(library/images/ico_linkedin.png) 0 0 no-repeat;
}
#socialIcons .vimeo {
background:url(library/images/ico_vimeo.png) 0 0 no-repeat;
}
#socialIcons .googleplus {
background:url(library/images/ico_google.png) 0 0 no-repeat;
}
#socialIcons .rss {
background:url(library/images/ico_rss.png) 0 0 no-repeat;
}
/* CONTENT ELEMENTS
----------------------------------------------*/
section h1 {
padding-bottom:25px;
}
.project-pagination{
float:right;
margin-top:10px;
}
.project-pagination a {
font-family:"Georgia",Arial,Verdana;
font-size:14px;
color:#d7d7d7;
font-style:italic;
margin:0px 5px 0 0;
}
.project-pagination a:hover{color:#9dcedf;}
ul#portfolio-items-one-third {
width: 100%;
min-height: 300px;
overflow: hidden;
list-style: none;
}
ul#portfolio-items-one-third li { width:307px;min-height:340px; float: left; overflow: hidden;}
ul#portfolio-items-one-third li .portfolio-item{ float:left; background:#f8f9f9;width:307px;height:auto;padding:0;}
ul#portfolio-items-one-third li .item-content{background:#615951;float:left;width:317px;text-align:center;padding:0px 0 15px 0;height:auto; }
#portfolio-items-one-third .description{padding-top:15px; }
ul#portfolio-items-one-third li .item-content:hover{ background:#9dcedf;}
ul#portfolio-items-one-third li .item-content p{margin:0;padding:0;font-weight:800;color:#FFF;}
ul#portfolio-items-one-third li .item-content p a{margin:0;padding:0;font-weight:800;color:#FFF;}
ul#portfolio-items-one-third li .item-content span{font-style:italic;color:#FFF;}
ul#portfolio-items-one-third li img{ width:100%;height:auto;padding:0;margin:0; }
.portfolio-container{}
.portfolio-items {
width: 960px;
margin: 0;
}
.portfolio-items:after {
content: "";
display: block;
height: 0;
overflow: hidden;
clear: both;
}
.portfolio-items li {
width: 307px;
margin-right:19px;
margin-bottom:10px;
display:inline-block;
vertical-align: top;
*zoom:1;
*display:inline;
overflow:hidden;
}
.portfolio-items li:nth-child(3n) {
margin-right:0;
}
.portfolio-items-not-filterable {
width: 960px;
margin: 0;
}
.portfolio-items-not-filterable:after {
content: "";
display: block;
height: 0;
overflow: hidden;
clear: both;
}
.portfolio-items-not-filterable li {
width: 310px;
margin: 0 20px 20px 0;
float: left;
overflow: hidden;
}
.three-fourth .portfolio-container {
width:auto;
}
.boxgrid{
width: 298px;
height: 250px;
margin:6px 9px 6px 0;
float:left;
border:4px solid #FFF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
color:#999;
line-height:120%;
padding: 0 10px 5px;
margin:0;
}
.boxgrid p a.title {
font-size:14px;
color:#CED535;
}
.boxcaption{
font-size:11px;
float: left;
width: 290px;
padding: 0 8px;
}
.boxcaption p {
margin: 0 0 0.5em;
}
.pp_social .facebook {
width: 90px !important;
}
.captionfull .boxcaption {
top: 140px;
left: 0;
}
.caption .boxcaption {
top: 140px;
left: 0;
}
.filterable {
float: right;
list-style: none;
margin-top: -45px;
position: relative;
}
.filterable li {
float:left;
padding:0 3px;
line-height:100%;
}
.filterable li a{
color:#fff;
letter-spacing:normal;
text-transform: capitalize;
display:block;
padding:6px 12px;
border-radius: 4px;
background:#333;
}
.filterable li a:hover {
text-decoration: none;
}
.portfolioimg {
float: left;
clear: both;
width: 100%;
margin: 0 0 10px 0;
text-align: center;
}
#archive-title, .searchQuery {
padding:0 0 10px 0;
font-size:12px;
margin-bottom:20px;
background:url(library/images/bk_separattor_horiz.jpg) 0 100% repeat-x;
}
.alignleft {
float:left;
margin:5px 10px 5px 0;
}
.alignright {
float:right;
margin:5px 0 5px 10px;
}
#homeBoxes {
padding-top:15px;
}
#homeBoxes .homeBox {
width:292px;
float:left;
margin-right:40px;
}
#homeBoxes .homeBox:nth-child(3n) {
margin-right:0;
}
#homeBoxes .last{
margin-right:0;
}
#homeBoxes .homeBox h2 {
padding:0 0 25px;
}
.more-link {
display:block;
width:92px;
height:30px;
line-height:30px;
font-size:12px;
clear:both;
text-align: center;
text-transform: uppercase;
}
.more-link:hover {
text-decoration:none;
}
article {
background:url(library/images/bk_separattor_horiz.jpg) 0 100% repeat-x;
padding-bottom:10px;
margin-bottom:20px;
}
article .meta {
height:34px;
font-size:11px;
line-height:34px;
padding-left:48px;
position:relative;
margin:0 0 20px;
text-shadow:#efefef 1px 1px;
color:#999;
}
article .meta img {
vertical-align:middle;
margin-right:3px;
}
article .meta .date{
position:absolute;
left:1px;
top:-3px;
width:39px;
height:44px;
text-align:center;
text-transform:uppercase;
padding-right:1px;
line-height:155%;
text-shadow:none;
}
article .meta .date strong {
font-size:20px;
}
section article p img {
margin:0 10px 10px 0;
border:8px solid #fff;
}
/* share icons */
section .social {
padding:10px 0;
background:url(library/images/bk_separattor_horiz.jpg) 0 100% repeat-x;
margin-bottom:10px;
}
section .social a img {
padding:0;
border:none;
background:none;
vertical-align:middle;
}
section .social strong {
padding-right:10px;
}
section ul {
list-style:disc;
list-style-position:inside;
}
/* COL RIGHT
-------------------------------------------*/
aside h3{
text-transform:uppercase;
font-size:15px;
padding:0;
margin-bottom:10px;
padding-bottom:10px;
font-weight:bold;
border-bottom:2px solid #fff;
}
aside ul {
padding-bottom:5px;
margin-bottom:0;
}
aside ul li {
border-bottom:1px dotted #D1D1D1;
padding:7px 0 7px 12px;
}
aside .sidebar_widget {
margin-bottom:20px;
}
/* FOOTER ELEMENTS
--------------------------------------------*/
.textwidget {
padding-top:10px;
}
footer .footerBox {
width:292px;
float:left;
margin-right:40px;
background:url(library/images/bk_dotted_thick.png) 0 0 repeat-x;
}
footer .footerBox:last-child {
margin-right:0;
}
footer .footerBox {
background:none;
}
footer .footerBox h3 {
padding-bottom:15px;
margin-bottom:15px;
color:#ccc;
border-bottom:1px solid #292929;
}
footer .last{
margin-right:0;
}
footer .footerBox ul li {
padding:7px 0;
padding-left:12px;
}
footer .footerBox ul li a {
text-decoration:none;
}
#copy {
clear:both;
padding:20px 0 10px;
}
footer #footerMenu ul li{
float:left;
padding:0 12px;
border-left:1px solid #292929;
line-height:100%;
}
#site5bottom {
position:absolute;
right:0;
bottom:30px;
text-align: right;
}
/* PAGINATION */
#pagination { list-style: none; margin-top:10px; }
#pagination li { display: inline }
#pagination span,
#pagination a {
display: block;
float: left;
padding: 4px 10px;
margin-right: 7px;
border: 1px solid #e1e1e1;
-webkit-box-shadow: inset 0 0 10px #f5f5f5;
-moz-box-shadow: inset 0 0 10px #f5f5f5;
box-shadow: inset 0 0 10px #f5f5f5;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #333;
}
#pagination .current { background-color: #fefefe }
#pagination .current:hover { border: 1pt solid #c2c2c2 }
/* HOME SLIDER
-----------------------------------------------*/
#slider{
padding:0;
height:370px;
overflow: hidden;
margin-bottom:25px;
}
#slider_container {
margin-bottom:15px;
}
/*COMMENTS
---------------------------------------------*/
section h2.comments {
padding-bottom:20px;
background:url(library/images/bk_separattor_horiz.jpg) 0 100% repeat-x;
}
section ul.commentlist {
list-style-type:none;
background:url(library/images/bk_separattor_horiz.jpg) 0 100% repeat-x;
padding-bottom:20px;
margin-bottom:15px;
}
section ul.commentlist li {
margin-top:15px;
}
section ul.commentlist li .text {
position:relative;
padding:12px;
background:#fff;
border:1px solid #D1D1D1;
}
section ul.commentlist li .text .topLeft {
position:absolute;
top:-1px;
left:-1px;
width:12px;
height:12px;
background:url(library/images/bk_comment_top_left.jpg) 0 0 no-repeat;
}
section ul.commentlist li .text .topRight {
position:absolute;
top:-1px;
right:-1px;
width:12px;
height:12px;
background:url(library/images/bk_comment_top_right.jpg) 0 0 no-repeat;
}
section ul.commentlist li .text .bottomRight {
position:absolute;
bottom:-1px;
right:-1px;
width:12px;
height:12px;
background:url(library/images/bk_comment_bottom_right.jpg) 0 0 no-repeat;
}
section ul.commentlist li .text .bottomLeft {
position:absolute;
bottom:-1px;
left:-1px;
width:12px;
height:12px;
background:url(library/images/bk_comment_bottom_left.jpg) 0 0 no-repeat;
}
section ul.commentlist li .text .bubble {
position:absolute;
top:-9px;
left:16px;
width:16px;
height:10px;
background:url(library/images/bk_bubble.png) 0 0 no-repeat;
}
section ul.commentlist .commentmetadata span {
font-size:12px;
}
section ul.commentlist li .avatar {
border:5px solid #FFF;
padding:1px;
background:#fff;
float:left;
margin-right:5px;
margin-bottom:5px;
}
section ul.commentlist li em {
font-size:12px;
padding-top:5px;
}
section ul.commentlist li ul.children {
padding-left:35px;
}
section ul.commentlist li .reply {
font-size:12px;
}
section h2.postComment {
background:url(library/images/ico_arrow_post.png) 3px 50% no-repeat;
padding-left:28px;
}
/* FORMS
-------------------------------------------*/
#searchform input{
border:none;
border-radius:4px;
box-shadow:1px 1px 1px #AAAAAA inset;
padding: 9px 12px;
width: 220px;
background:#f3f3f3 url(library/images/ico_search.png) 96% 50% no-repeat;
font-family:'Georgia','Times New Roman', serif;
font-style:italic;
font-size:12px;
padding-right:30px;
color:#666;
}
/* post comment */
#commentform p {
margin:0;
}
#commentform label {
display:block;
padding:5px 0 2px;
}
#commentform input, #commentform textarea {
font-family:Arial, Helvetica, sans-serif;
width:300px;
font-size:12px;
border:none;
border-radius:4px;
box-shadow:1px 1px 1px #ccc inset;
padding: 9px 12px;
}
#commentform textarea {
width:600px;
}
#commentform input#submit{
border:none;
width:100px;
height:34px;
margin-top:15px;
border:1px solid #77DDFF;
border-radius: 6px;
background:#00AAEB;
background:url(../images/blue/bk_topmenu.png) 100% 0 no-repeat,
-moz-linear-gradient(top, #00c1fa 0%, #0094dd 100%); /* FF3.6+ */
background:url(../images/blue/bk_topmenu.png) 100% 0 no-repeat,
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#00c1fa), color-stop(100%,#0094dd)); /* Chrome,Safari4+ */
background:url(../images/blue/bk_topmenu.png) 100% 0 no-repeat,
-webkit-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Chrome10+,Safari5.1+ */
background:url(../images/blue/bk_topmenu.png) 100% 0 no-repeat,
-o-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Opera 11.10+ */
background:url(../images/blue/bk_topmenu.png) 100% 0 no-repeat,
-ms-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* IE10+ */
background:url(../images/blue/bk_topmenu.png) 100% 0 no-repeat,
linear-gradient(to bottom, #00c1fa 0%,#0094dd 100%); /* W3C */
background:url(../images/blue/bk_topmenu.png) 100% 0 no-repeat,
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c1fa', endColorstr='#0094dd',GradientType=0 ); /* IE6-9 */
color:#fff;
-webkit-box-shadow: 0 6px 6px -6px #999;
-moz-box-shadow: 0 6px 6px -6px #999;
box-shadow: 0 6px 6px -6px #999;
color:#fff;
}
/* Contact Page */
#contact-map {
float: left;
width: 625px;
border: 4px #fff solid;
height: 350px;
margin: 0 0 15px 0;
}
#contact-map iframe {
border: 0;
}
#contact-form {
width: 60%;
float: left;
margin: 0 30px 0 0;
}
#contact-data {
float: left;
width: 35%;
margin: 28px 0 0 0;
}
#contact-data p {
display:block;
overflow:hidden;
margin:0 0 15px 0;
}
#contact-data .contact-data-field {
float: left;
width: 35%;
font-weight: bold;
}
#contact-data .contact-data-info {
float: left;
width: 65%;
}
/* contact */
#contactForm label {
display:block;
padding:8px 0 2px;
}
#contactForm input, #contactForm textarea {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#666;
width:90%;
border:none;
border-radius:4px;
box-shadow:1px 1px 1px #ccc inset;
padding: 9px 12px;
}
#contactForm button.submitbutton {
width:100px;
height:34px;
margin-top:20px;
border-radius: 6px;
color:#fff;
-webkit-box-shadow: 0 6px 6px -6px #999;
-moz-box-shadow: 0 6px 6px -6px #999;
box-shadow: 0 6px 6px -6px #999;
color:#FFF;
}
.errormsg, .successmsg{
background:#FEF4F1;
border:1px solid #F7A68A;
color:#DA4310;
padding:10px;
}
.successmsg {
background:#F5FAF1;
border:1px solid #C2E1AA;
color:#8FA943;
}
/* CLEARING
---------------------------------------------------*/
.clearfix:after {
content: ".";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clear {
clear: both;
}
.noclear {
clear: none;
}
.thanks {
background: #F2F3F6;
background: url('library/images/ok.png') no-repeat left 1px;
padding-left:20px;
clear: both;
margin-top: 30px;
}
.error {
color: #333;
background: #FCE2D4 url('library/images/error.png') no-repeat 5px 50%;
margin-top: 5px;
display:block;
clear: both;
padding:7px;
padding-left:30px;
border-radius:6px;
font-size:11px;
border: 1px solid #fbc2c4;
width:270px;
}