/******************************************************************
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: 1.0
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:#000;
background:#fff url(images/bg-page.jpg) repeat-x;
line-height:130%;
}
body#home #mainWrapper {
background:url(images/bg-body.jpg) 0 0 repeat-x;
}
#mainWrapper {
background:url(images/bg-page.jpg) 0 0 repeat-x;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:focus {
outline:none;
}
p {
margin:0 0 1em;
}
h1, h2, h3 {
font-size:28px;
letter-spacing:-1px;
line-height:100%;
padding-bottom:15px;
}
h1 {
padding-top:10px;
}
h2 {
font-size:20px;
padding-top:10px;
font-weight:normal;
}
h3 {
font-size:16px;
padding-top:10px;
}
/* LAYOUT STRUCTURE
--------------------------------------------------*/
#wrapper {
margin:0 auto;
width:1128px;
}
#header {
height:264px;
position:relative;
z-index:99;
margin-bottom:15px;
}
#content {
padding-bottom:20px;
}
#colLeft1{
width:755px;
float:left;
}
#colLeft{
width:1128px;
float:left;
padding-left:3px;
}
/* page container for Portfolio */
#colFull{
padding-left:0px;
padding-top:15px;
width:925px;
}
#colRight {
float:left;
width:373px;
}
#colRight #inner {
padding:10px;
background:url(images/bk_colright.jpg);
}
#footer {
background:#000 url(images/bg-footer.jpg) 0 0 repeat-x;
margin:0;
color:#fff;
position:relative;
height:219px;
text-align:center;
}
#innerFooter {
width:1128px;
margin:0 auto;
padding:15px 0 0 0;
position:relative;
}
/* HEADER ELEMENTS
------------------------------------------*/
#site5top {
position:absolute;
top:17px;
right:8px;
}
#site5top a {
display:block;
width:197px;
height:22px;
text-indent:-9999px;
background:url(images/site5_top.png) 0 0 no-repeat;
}
/* -- logo --*/
#logo {
position:absolute;
top:20px;
left:5px;
color:#FFF;
text-align:center;
width:1128px;
}
#logo a img{
border:none;
vertical-align:middle;
margin-right:20px;
}
#logo span {
font-size:16px;
padding-top:15px;
}
/* -- search --*/
#searchTop {
position:absolute;
right:0;
top:49px;
height:59px;
width:255px;
background:url(images/bk_search.jpg) 0 0 no-repeat;
padding:16px 0 16px 15px;
}
/* -- main menu --*/
#topMenu {
width:1128px;
height:53px;
position:absolute;
top:210px;
left:0;
}
#topMenu ul.sf-menu {
padding-top:1px;
}
#topMenu ul.sf-menu li {
float:left;
width:140px;
text-align:center;
font-size:12px;
padding:14px 0;
}
#topMenu ul.sf-menu li a {
text-decoration:none;
text-transform:uppercase;
}
#topMenu ul.sf-menu li li a {
padding:0 12px;
}
#topMenu ul.sf-menu li a:hover {
text-shadow:none;
}
#topMenu ul.sf-menu li li {
padding:0;
padding-top:4px;
border:none;
}
#topMenu ul.sf-menu li ul.children, #topMenu ul.sf-menu li ul.sub-menu {
padding:0;
background:url(../images/green/bk_submenu.png) 0 -4px repeat-x;
}
#topMenu ul.sf-menu li ul.children li, #topMenu ul.sf-menu li ul.sub-menu li, #topMenu ul.sf-menu li.page_item ul li {
position:relative;
line-height:100%;
height:48px;
width:15em;
text-transform:none;
}
#topMenu ul.sf-menu li ul.children li a, #topMenu ul.sf-menu li ul.sub-menu li a, #topMenu ul.sf-menu li.page_item ul li a {
text-decoration: none;
display:block;
padding-top:7px;
line-height:100%;
width:8em;
border:none;
text-transform:none;
}
#topMenu ul.sf-menu li ul.children li ul.children a, #topMenu ul.sf-menu li ul.sub-menu li ul.sub-menu a {
text-decoration: none;
position:relative;
border:none;
}
#topMenu ul.sf-menu li ul.children, #topMenu ul.sf-menu li ul.sub-menu, #topMenu ul.sf-menu li.page_item ul
{
margin-top:22px;
}
#topMenu ul.sf-menu li ul.children ul.children, #topMenu ul.sf-menu li ul.sub-menu ul.sub-menu
{
margin:0 0 0 25px;
}
.rssTag {
position:absolute;
width:50px;
height:41px;
background:url(images/ico_rss.png) 0 0 no-repeat;
text-indent:-9999px;
right:10px;
top:108px;
z-index:9999;
}
/* CONTENT ELEMENTS
----------------------------------------------*/
#colFull h1 {
text-transform:capitalize;
position:relative;
}
#colFull h1 ul {
position:absolute;
right:15px;
top:20px;
}
#colFull h1 ul li {
float:left;
padding:0 10px;
border-left:1px solid #ccc;
line-height:100%;
font-size:12px;
}
#colFull h1 ul li a{
font-size:12px;
font-weight:normal;
color:#0093CA;
letter-spacing:normal;
}
#colFull h1 ul li a:hover {
text-decoration:underline;
}
#archive-title, .searchQuery {
padding:0 0 10px 0;
font-size:12px;
margin-bottom:5px;
background:url(images/bk_separattor_horiz.jpg) 0 100% repeat-x;
}
.alignleft {
float:left;
margin:3px 10px 5px 0;
}
.alignright {
float:right;
margin:5px 0 5px 10px;
}
#homeBoxes {
padding-top:15px;
background:url(images/shadow.png) left bottom no-repeat;
padding-bottom:40px;
}
#colLeft {
}
#homeBoxes .homeBox {
width:370px;
float:left;
padding-right:12px;
font-size:12px;
}
#homeBoxes .homeBox3 {
width:364px;
float:left;
padding-right:0;
font-size:12px;
}
#colLeft1 .homeBox5 {
width:730px;
float:left;
padding-right:20;
font-size:12px;
}
#colRight .homeBox6 {
width:355px;
float:left;
padding:0 5px 5px 5px;
font-size:12px;
border:dashed 3px #a1a1a1;
}
#colLeft1 .homeBox8 {
width:755px;
float:left;
padding-right:0;
font-size:12px;
}
#colLeft1 .homeBox11 {
margin-top:20px;
width:730px;
float:left;
padding-right:0;
font-size:12px;
padding-right:20px;
}
#colRight .homeBox9 {
width:373px;
float:right;
margin-top:30px;
}
#colRight .homeBox9 h2 {
font-size:25px;
color:#fff;
background:#d7d7d7;
width:358px;
padding:15px 0 15px 15px;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
}
#homeBoxes10{
float:right;
width:373px;
}
#homeBoxes10 .homeBox12 {
width:373px;
float:right;
margin-top:30px;
}
#homeBoxes10 .homeBox12 h2 {
font-size:25px;
color:#fff;
background:#77c0c7;
width:358px;
padding:15px 0 15px 15px;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
}
#colRight .homeBox13 h2 {
font-size:25px;
color:#fff;
background:#77c0c7;
width:358px;
padding:15px 0 15px 15px;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
}
#colRight .homeBox13 {
color:#252525;
font-size:12px;
float:left;
margin-top:30px;
}
#colRight .homeBox6 h2 {
font-size:21px;
color:#464646;
text-align:center;
font-weight:bold;
letter-spacing:0.5px;
padding-bottom:2px;
padding-top:10px;
}
#colRight .homeBox6 p {
font-size:17px;
color:#464646;
text-align:center;
float:right;
}
#wpcf7-f41-t1-o1 .wpcf7-submit{
background:url(images/submit.jpg) 0 0 no-repeat;
width:87px;
height:28px;
border:none;
text-indent:100px;
}
#wpcf7-f41-t1-o1 .wpcf7-text{
background:url(images/textbox.jpg) 0 0 no-repeat;
width:250px;
height:29px;
border:none;
margin-right:25px;
}
#colLeft1 .homeBox8 h3 {
font-size:25px;
color:#363636;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
}
#colLeft1 .homeBox11 h2 {
font-size:25px;
color:#363636;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
}
#colLeft1 .homeBox11 span {
font-size:16px;
color:#555;
letter-spacing:1px;
}
#wpcf7-f46-t2-o1{
margin-left:100px;
margin-top:50px;
}
#wpcf7-f46-t2-o1 .wpcf7-submit{
background:url(images/submit.jpg) 0 0 no-repeat;
width:87px;
height:28px;
border:none;
text-indent:100px;
}
#wpcf7-f46-t2-o1 .wpcf7-text{
background:url(images/textbox.jpg) 0 0 no-repeat;
width:250px;
height:29px;
border:none;
margin-right:66px;
color:#555;
font-size:14px;
padding-left:10px;
margin-bottom:10px;
}
#wpcf7-f46-t2-o1 .wpcf7-textarea{
background:url(images/textarea.jpg) 0 0 no-repeat;
width:570px;
height:212px;
border:none;
color:#555;
font-size:14px;
padding-left:10px;
}
#homeBoxes .last{
margin-right:0;
}
#homeBoxes .homeBox h2 {
padding:20px 0 15px 0;
font-size:25px;
color:#fff;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
}
#homeBoxes .homeBox3 h2 {
padding:20px 0 15px 10px;
font-size:25px;
color:#fff;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
}
#colLeft1 .homeBox5 .homeBox11{
}
#colLeft1 .homeBox5 h2 {
font-size:40px;
color:#363636;
letter-spacing:1px;
font-family:"Times New Roman", Times, serif;
padding-top:0;
}
#colLeft1 .homeBox5 p {
font-size:17px;
color:#363636;
font-family:Arial, Helvetica, sans-serif;
line-height:22px;
}
#homeBoxes .homeBox p {
font-size:14px;
color:#363636;
border-right:solid 1px #b7b7b7;
padding-top:15px;
padding-right:10px;
height:210px;
}
#homeBoxes .homeBox ul li {
font-size:14px;
color:#363636;
padding-top:15px;
list-style-image:url(http://crazywebs.net/bob/wp-content/themes/bob/images/bulleted.png);
margin-left:20px;
}
#homeBoxes .homeBox ul {
margin-bottom:15px;
}
#homeBoxes .homeBox3 p {
font-size:14px;
color:#363636;
border-left:solid 1px #b7b7b7;
padding-top:15px;
padding-left:10px;
height:210px;
}
.more-link {
display:block;
height:30px;
padding-top:2px;
clear:both;
float:right;
}
.more-link1 {
display:block;
height:30px;
padding-top:5px;
clear:both;
float:right;
}
.more-link2 {
display:block;
height:30px;
padding-top:65px;
clear:both;
float:right;
}
.more-link:hover {
text-decoration:none;
}
.blogPost {
background:url(images/bk_separattor_horiz.jpg) 0 100% repeat-x;
padding-bottom:5px;
margin-bottom:10px;
}
.blogPost .meta {
background:url(images/bk_meta.jpg) 1px 0 repeat-x;
height:34px;
font-size:11px;
line-height:34px;
padding-left:48px;
position:relative;
margin-bottom:20px;
text-shadow:#efefef 1px 1px;
}
.blogPost .meta img {
vertical-align:middle;
margin-right:3px;
}
.blogPost .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;
}
.blogPost .meta .date strong {
font-size:20px;
}
#colLeft .blogPost p img {
margin:0 10px 10px 0;
border:8px solid #fff;
}
/* share icons */
#colLeft .social {
padding:10px 0;
background:url(images/bk_separattor_horiz.jpg) 0 100% repeat-x;
margin-bottom:10px;
}
#colLeft .social a img {
padding:0;
border:none;
background:none;
vertical-align:middle;
}
#colLeft .social strong {
padding-right:10px;
}
#colLeft ul {
list-style:disc;
list-style-position:inside;
}
/* COL RIGHT
-------------------------------------------*/
#colRight h2{
text-transform:uppercase;
font-size:15px;
padding:0;
margin:0;
padding-bottom:5px;
font-weight:bold;
}
#colRight ul {
padding-bottom:15px;
}
#colRight ul li {
border-bottom:1px solid #D1D1D1;
border-top:1px solid #fff;
padding:7px 0 7px 12px;
}
/* FOOTER ELEMENTS
--------------------------------------------*/
.textwidget {
padding-top:10px;
}
#footer .footerBox {
width:276px;
float:left;
margin:0 20px;
background:url(images/bk_dotted_thick.png) 0 0 repeat-x;
font-size:12px;
color:#515151;
}
#footer .footerBox {
background:none;
}
#footer .footerBox h2 {
padding-bottom:10px;
}
#footer .last{
margin-right:0;
}
#footer .footerBox ul li {
padding:7px 0;
padding-left:12px;
}
#footer .footerBox ul li a {
text-decoration:none;
}
#footer .footerBox ul#social li {
padding:10px 0;
padding-left:40px;
line-height:110%;
}
#footer .footerBox ul#social li a{
font-size:11px;
}
#footer .footerBox ul#social li.twitter {
background:url(images/ico_twitter.png) 0 50% no-repeat;
}
#footer .footerBox ul#social li.facebook {
background:url(images/ico_facebook.png) 0 50% no-repeat;
}
#footer .footerBox ul#social li.flickr {
background:url(images/ico_flickr.png) 0 50% no-repeat;
}
#footer .footerBox ul#social li.linkedin {
background:url(images/ico_linkedin.png) 0 50% no-repeat;
}
#copy {
clear:both;
padding:70px 0 40px;
font-size:22px;
color:#fff;
}
#copy span {
color:#77c0c7;
font-weight:bold;
margin-left:30px;
}
#copy1 {
clear:both;
padding:20px 0 10px 20px;
font-size:14px;
color:#898989;
}
#footer #footerMenu ul {
padding-left:255px;
}
#footer #footerMenu ul li{
float:left;
padding:0 20px;
line-height:100%;
}
#footer #footerMenu ul li a{
color:#fff;
font-size:18px;
}
#footer #footerMenu ul li a:hover{
color:#77c0c7;
text-decoration:none;
}
#site5bottom {
position:absolute;
right:0;
bottom:10px;
text-align: right;
}
/* HOME SLIDER-----------------------------------------------*/
#slider {
padding:7px 0;
height:552px;
}
.panel .right {
padding:10px;
float:left;
width:252px;
border:1px solid #ccc;
background:#fff;
}
.panel .right .text {
padding:10px;
font-size:14px;
background:url(images/bk_slider_text.jpg) 100% 0 no-repeat;
height:317px;
}
.panel .right .text .featured {
font-size:11px;
}
.panel .right .text .featured img {
margin-right:5px;
}
.panel .right .text p {
display:block;
background:url(images/bk_dotted.png) 0 0 repeat-x;
margin:0;
padding-top:10px;
}
.panel .right .text h1, .panel .text h1 a {
font-size:22px;
font-weight:normal;
margin-bottom:0;
line-height:110%;
padding:8px 0;
color:#333;
}
.panel .image {
float:left;
padding:10px;
border:1px solid #ccc;
background:#fff;
margin-right:13px;
}
/* CAROUSEL---------------------------------------------*/
.stepcarousel{
float:left;
position: relative; /*leave this value alone*/
overflow: hidden; /*leave this value alone*/
width: 100%; /*Width of Carousel Viewer itself*/
height: 359px; /*Height should enough to fit largest content's height*/;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left:0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 910px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
position:relative;
}
/*COMMENTS
---------------------------------------------*/
#colLeft h2.comments {
padding-bottom:20px;
background:url(images/bk_separattor_horiz.jpg) 0 100% repeat-x;
}
#colLeft ul.commentlist {
list-style-type:none;
background:url(images/bk_separattor_horiz.jpg) 0 100% repeat-x;
padding-bottom:20px;
margin-bottom:15px;
}
#colLeft ul.commentlist li {
margin-top:15px;
}
#colLeft ul.commentlist li .text {
position:relative;
padding:12px;
background:#fff;
border:1px solid #D1D1D1;
}
#colLeft ul.commentlist li .text .topLeft {
position:absolute;
top:-1px;
left:-1px;
width:12px;
height:12px;
background:url(images/bk_comment_top_left.jpg) 0 0 no-repeat;
}
#colLeft ul.commentlist li .text .topRight {
position:absolute;
top:-1px;
right:-1px;
width:12px;
height:12px;
background:url(images/bk_comment_top_right.jpg) 0 0 no-repeat;
}
#colLeft ul.commentlist li .text .bottomRight {
position:absolute;
bottom:-1px;
right:-1px;
width:12px;
height:12px;
background:url(images/bk_comment_bottom_right.jpg) 0 0 no-repeat;
}
#colLeft ul.commentlist li .text .bottomLeft {
position:absolute;
bottom:-1px;
left:-1px;
width:12px;
height:12px;
background:url(images/bk_comment_bottom_left.jpg) 0 0 no-repeat;
}
#colLeft ul.commentlist li .text .bubble {
position:absolute;
top:-9px;
left:16px;
width:16px;
height:10px;
background:url(images/bk_bubble.png) 0 0 no-repeat;
}
#colLeft ul.commentlist .commentmetadata span {
font-size:12px;
}
#colLeft ul.commentlist li .avatar {
border:5px solid #FFF;
padding:1px;
background:#fff;
float:left;
margin-right:5px;
margin-bottom:5px;
}
#colLeft ul.commentlist li em {
font-size:12px;
padding-top:5px;
}
#colLeft ul.commentlist li ul.children {
padding-left:35px;
}
#colLeft ul.commentlist li .reply {
font-size:12px;
}
#colLeft h2.postComment {
background:url(images/ico_arrow_post.png) 3px 50% no-repeat;
padding-left:28px;
}
/* FORMS
-------------------------------------------*/
#searchform input {
border:none;
background:#000;
padding:6px 4px 7px;
color:#999;
width:165px;
float:left;
}
#searchform input#searchsubmit {
width:72px;
height:30px;
border:none;
background:url(images/but_search.jpg) 0 0 no-repeat;
cursor:pointer;
padding:0 0 0 4px;
text-align:left;
color:#ccc;
font-size:11px;
}
/* post comment */
#commentform p {
margin:0;
}
#commentform label {
display:block;
padding:5px 0 2px;
}
#commentform input, #commentform textarea {
border:1px solid #fff;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
padding:7px;
font-family:Arial, Helvetica, sans-serif;
width:300px;
font-size:12px;
}
#commentform textarea {
width:600px;
}
#commentform input#submit{
border:none;
width:80px;
height:34px;
margin-top:15px;
background:url(images/but_send.png) 0 0 no-repeat;
color:#fff;
}
/* contact */
#contact label {
display:block;
padding:8px 0 2px;
}
#contact input, #contact textarea {
border:1px solid #fff;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
padding:5px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#666;
width:300px;
}
#contact textarea {
width:500px;
}
#contact button.submitbutton {
border:none;
width:80px;
height:34px;
margin-top:20px;
background:url(images/but_send.png) 0 0 no-repeat;
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('images/ok.png') no-repeat left;
padding-left:20px;
clear: both;
}
.error {
color: #333;
background: #FCE2D4 url('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;
}