/*  
Theme Name: Rocky Folio
Theme URI: http://webdesign.simnorcomputing.com
Description: A portfolio/blog wordpress template for designers
Version: 1.0
Author: Simon North, Simnor Web Design
Author URI: http://webdesign.simnorcomputing.com
*/

body {
background:#3d3d3d;
text-align:center;
font-family:Arial, 'Sans Serif';
font-size:14px;
color:#777777;
}

h1, h2, h3, h4, h5, p, ul, ol, blockquote, q {
margin:0 0 20px 0;
}

.alignleft {
float:left;
display:block;
margin:0 20px 20px 0;
}

.alignright {
float:right;
display:block;
margin:0 0 20px 20px;
text-align:right;
}

h1 {
font-size:40px;
font-weight:bold;
}

h2 {
font-size:30px;
font-weight:bold;
}

h3 {
font-size:20px;
font-weight:bold;
}

h4 {
font-size:16px;
font-weight:bold;
}

h5 {
font-size:14px;
font-weight:bold;
}

p, ul, ol {
line-height:24px;
}

small {
font-size:11px;
}

blockquote {
background:#eee;
border:2px solid #ddd;
padding:20px 20px 0 20px;
overflow:hidden;
}

.clear {
clear:both;
}

a {
color:#FFF;
text-decoration:underline;
}

a:hover {
text-decoration:none;
}

.navigation a, a.button, .reply a {
background:url(./images/linkOverlay.png) repeat-x bottom #9a2222;
padding:0 10px;
height:30px;
line-height:30px;
font-size:12px;
color:#FFF;
display:block;
text-decoration:none;
float:left;
text-transform:uppercase;
}
/* ADD THIS */
.add-this-btn {
padding:20px 0px 0px 0px;
clear:both;
display:block;
}

/* STRUCTURE */
#page {
background:url(./images/back.gif) repeat-y right top;
width:980px;
display:table;
float:right;
text-align:left;
}


/* Header */
#top {
clear:both;
height:100px;
}

.header {
float:left;
display:block;
}

.header h1 a {
float:left;
display:block;
font-size:30px;
color:#FFFFFF;
background:url(./images/linkOverlay.png) repeat-x bottom left;
height:55px;
line-height:55px;
margin:0px;
padding:0 30px 0 30px;
color:#FFFFFF;
text-decoration:none;
font-weight:normal;
text-transform: uppercase;
}

ul#nav {
display:block;
float:right;
height:44px;
padding:0 20px 0 0;
}

ul#nav li {
padding:0 0 0 10px;
display:block;
float:left;
height:44px;
position:relative;
}

ul#nav li a {
display:block;
float:left;
color:#fff;
font-size:14px;
line-height:44px;
height:44px;
padding:0 15px;
text-decoration:none;
text-transform:uppercase;
}

ul#nav li ul li a {
text-transform:none;
}

ul#nav li img {
display:block;
margin-top:10px;
}

ul#nav li a:hover, ul#nav li.current_page_item a, ul#nav li.current-cat a, ul#nav li.current-cat ul li a:hover {
background:url(./images/linkOverlay.png) repeat-x bottom left;
}

ul#nav li.current-cat ul li a {
background:none;
}

ul#nav li ul {
position:absolute;
top:42px;
left:10px;
width:250px;
display:none;
z-index:1000;
}

ul#nav li ul ul {
position:absolute;
top:0px;
left:250px;
}

ul#nav li ul li {
width:250px;
clear:both;
display:block;
padding:0px;
}

ul#nav li ul li a {
display:block;
line-height:20px;
padding:10px 15px;
overflow: hidden;
width:220px;
height:auto;
}

ul#nav li.current_page_item ul li a {
background:none;
}

ul#nav li.current_page_item ul li a:hover {
background:url(./images/linkOverlay.png) repeat-x bottom left;
}

/* Banner */
#banner {
clear:both;
overflow:hidden;
padding:0 40px 20px 90px;
}

#banner h1 {
font-size:60px;
margin:0 0 5px 0;
color:#FFFFFF;
text-transform:uppercase;
}

#banner h1 span {
color:#555555;
}

#banner h1.single {
text-transform:none;
}

#banner p {
font-size:30px;
line-height:38px;
color:#767676;
}

/* Featured Work */
#featuredWork {
clear:both;
overflow:hidden;
display:block;
position:relative;
width:980px;
}

#featuredWork .inside {
margin:33px 0 0 0;
width:100%;
background:url(./images/containerLeft.jpg) repeat-y #FFF;
border:2px solid #fff;
overflow:hidden;
}

#featuredWork .tab {
width:48px;
float:left;
display:block;
}

#featuredWork .content {
float:left;
padding:40px;
width:370px;
overflow:hidden;
}

#featuredWork .screenshot {
background:url(./images/screenshotBack.jpg) top left no-repeat;
overflow:hidden;
width:480px;
height:700px;
display:block;
position:absolute;
top:0px;
right:20px;
}

#featuredWork .screenshot img {
margin:20px 20px 0 20px;
}

#featuredWork .sticker {
position:absolute;
top:-1px;
right:-1px;
}


/* Main Area */
#mainarea {
clear:both;
display:block;
margin:20px 0 0 0;
background:url(./images/containerLeft.jpg) repeat-y #FFF;
border:2px solid #fff;
overflow:hidden;
width:976px;
}

#mainarea .tab {
width:48px;
float:left;
display:block;
}

#mainarea .content {
float:right;
display:block;
margin:40px;
width:840px;
overflow:hidden;
}




/* Sub footer */
#subfooter {
overflow:hidden;
padding:60px 40px 40px 90px;
clear:both;
display:block;
color:#888888;
}

#subfooter a {
color:#FFF;
}


/* Subfooter / Archive Posts */

ul.posts {
width:840px;
}

.content ul.posts {
margin:0px;
padding:0px;
}

ul.posts li {
float:left;
display:block;
width:180px;
margin:0 40px 40px 0;
}

.fix {
clear:both;
display:block;
}

ul.posts li.last {
float:right;
margin:0 0 40px 0px;
}

ul.posts li .thumbnail {
position:relative;
overflow:hidden;
height:150px;
margin:0 0 10px 0;
}

ul.posts li .thumbnail img {
top:0px;
left:0px;
position:absolute;
height:150px;
width:auto;
}

ul.posts li.long .thumbnail img {
width:400px;
height:auto;
}

ul.posts li h3 {
font-size:16px;
margin:0 0 10px 0;
}

ul.posts li h3 a {
text-decoration:none;
}

ul.posts li h3 a:hover {
text-decoration:underline;
}

ul.posts li p {
font-size:12px;
}

ul.posts li.long {
float:left;
width:400px;
margin:0 0px 40px 0;
}

ul.posts li.longLast {
float:right;
margin:0 0 40px 0;
}



/* Footer */
#footer {
clear:both;
margin:0 40px 0px 80px;
padding:20px 0;
display:block;
border-top:1px solid #555;
overflow:hidden;
}

#footer p {
margin:0px;
font-size:12px;
line-height:12px;
color:#CCC;
text-align:center;
text-transform:uppercase;
}

#footer p span {
font-size:9px;
letter-spacing:1px;
color:#999;
}

#footer p span a {
color:#999;
text-decoration:none;
}

#footer p span a:hover {
color:#CCC;
text-decoration:underline;
}

#footer .left {
float:left;
display:block;
padding:0 0 0 70px;
}

#footer .right {
float:right;
display:block;
}




/* Portfolio */
#banner.portfolio h1 {
margin:0px;
}

ul.cats li {
float:left;
display:block;
padding:0 30px 0 0;
}

ul.cats li a {
color:#555;
text-decoration:none;
font-size:16px;
text-transform:uppercase;
}

ul.cats li a:hover, ul.cats li.current-cat a, ul.cats li.current_page_item a {
color:#FFF;
}

ul.portfolioLinks {
clear:both;
overflow:hidden;
display:block;
padding:40px 0 0 0;
width:850px;
}

ul.portfolioLinks li {
float:left;
display:block;
padding:0 0px 20px 0;
width:270px;
line-height:14px;
}

ul.portfolioLinks li a {
display:inline;
text-decoration:none;
font-size:14px;
font-weight:bold;
text-transform:uppercase;
color:#999;
}

ul.portfolioLinks li a span {
font-size:11px;
font-weight:normal;
color:#555;
}

ul.portfolioLinks li.active a, ul.portfolioLinks li a:hover {
color:#FFF;
}

ul.portfolioLinks li.active a span, ul.portfolioLinks li a:hover span {
color:#CCC;
}

#portfolioItem {
clear:both;
overflow:hidden;
position:relative;
width:980px;
margin-top:1px;
}

#portfolioItem .inside {
margin:33px 0 0 0;
padding-top:6px;
width:100%;
background:url(./images/containerLeft.jpg) repeat-y #FFF;
border:2px solid #fff;
overflow:hidden;
}

#portfolioItem .tab {
width:48px;
float:left;
display:block;
}

#portfolioItem .content {
float:left;
display:block;
margin:40px;
width:380px;
overflow:hidden;
}

#portfolioItem .screenshot {
background:url(./images/screenshotBack.jpg) top right no-repeat transparent;
overflow:hidden;
width:480px;
height:700px;
display:block;
position:absolute;
top:0px;
right:20px;
}

#portfolioItem .screenshot .images {
margin:20px 20px 0 20px;
position:relative;
overflow: hidden;
display:block;
height:570px;
width:440px;
}

#portfolioItem .screenshot .images img {
position:absolute;
top:0px;
left:0px;
display: none;
}

#portfolioItem .screenshot .images img.screenshot1 {
display: block;
}

#portfolioItem .screenshot .screenshotLinks {
top:30px;
right:30px;
position:absolute;
}

#portfolioItem .screenshot .screenshotLinks p {
margin-bottom:0px;
}

#portfolioItem .screenshot .screenshotLinks a {
padding:3px 6px;
line-height:14px;
margin:0 0 0 3px;
display:block;
float:left;
text-decoration:none;
}



/* Comments */
#comments {
overflow:hidden;
padding:80px 40px 40px 90px;
clear:both;
display:block;
color:#888888;
}

ol.commentslist {
margin:0 0 60px 0;
}

ol.commentslist li {
margin:0 0 20px 0px;
background:#444;
color:#999;
padding:20px 20px 0px 20px;
display:block;
}

ol.commentslist li .comment-author {
margin:0 20px 20px 0;
float:left;
display:block;
height:100%;
}

ol.commentslist li .comment-author img {
border:3px solid #555;
}

ol.commentslist li .comment-author cite {
display:block;
text-align:right;
font-style:normal;
}

ol.commentslist li .comment-author span {
display:none;
}

ol.commentslist li .reply {
padding: 0 0 20px 0;
overflow:hidden;
display:block;
}

ol.commentslist li .reply a {
float:right;
}

ol.commentslist li ul.children {
overflow:hidden;
clear:both;
}

ol.commentslist li ul li {
margin:0 0 20px 20px;
background:#555;
color:#ccc;
padding:20px;
}

ol.commentslist li ul li ul li {
background:#666;
color:#ccc;
}

.commentform {
padding:20px 0 0 0;
}

.commentform p {
display:block;
clear:both;
}

.commentform p label {
display:block;
width:250px;
padding-left:3px;
}

.commentform p input, .commentform p textarea {
padding:5px;
font-size:14px;
border:2px solid #444;
width:300px;
}

.commentform p textarea {
width:400px;
height:200px;
}

input#submit {
border:none;
background:url(./images/linkOverlay.png) repeat-x bottom #9a2222;
padding:0 10px;
height:30px;
line-height:30px;
font-size:12px;
color:#FFF;
display:block;
text-decoration:none;
letter-spacing: 1px;
float:left;
width:auto;
}


/* Blog */
.post {
margin:0 0 60px 0;
overflow:hidden;
display:block;
}

.posttitle {
padding:0 0 10px 0;
}

.posttitle h3 {
margin:0 0 5px 0;
line-height:28px;
font-size:24px;
}

.posttitle h3 a {
text-decoration:none;
}

.post .thumbnail {
position:relative;
overflow:hidden;
height:180px;
width:180px;
float:left;
display:block;
margin:5px 20px 20px 0;
}

.post .thumbnail img {
top:0px;
left:0px;
position:absolute;
}

.post p.buttons {
margin-top:-10px;
}

#banner p.postmeta {
font-size:16px;
text-transform:uppercase;
font-weight:bold;
}

.navigation {
padding:20px 40px 10px 90px;
overflow:hidden;
display:block;
}



/* POST STYLING */
.content ul {
list-style:disc outside;
margin:0 0 20px 25px;
}

.content ol {
list-style:decimal outside;
margin:0 0 20px 25px;
}

.content p {
margin:0 0 30px 0;
line-height:28px;
}

.content h1, .content h2, .content h3, .content h4, .content h5 {
color: #555;
}


/* COLOUR OPTIONS */
h1, h2, h3, h4, h5, ul.cats, a.button, input#submit {
font-family:Rockwell, Arial;
font-weight:normal;
}

.content a {
color:#9a2222;
}

.posttitle h3 a:hover, .content a:hover {
color:#b23838;
}

.navigation a, a.button, input#submit, .header h1 a, #portfolioItem .screenshot .screenshotLinks a, ul#nav li a:hover, ul#nav li.current_page_item a, ul#nav li.active a, ul#nav li ul {
background-color:#9a2222;
color:#FFF;
}

.navigation a:hover, a.button:hover, input#submit:hover, .header h1 a:hover, #portfolioItem .screenshot .screenshotLinks a:hover, #portfolioItem .screenshot .screenshotLinks a.active {
background-color:#b23838;
color:#FFF;
}