/*  
Theme Name: Foreground Portfolio
Theme URI: http://foreground.tw/
Description: Portfolio Theme based off SimpleBlog Theme
Version: 1.0
Author: santin
Author URI: http://www.san-tin.com
*/

@import url(reset.css);

/* Include Reset File */

body {
background:#e7e7e2 url(images/bg.jpg) top center;
font-family: Helvetica,'Lucida Grande',Verdana,'Bitstream Vera Sans',Arial,sans-serif;
font-size:13px;
line-height:22px;
color:#696767;
}

body,html {
margin:0;
padding:0;
}

a:link,a:visited,a:active {
color:#90603c;
text-decoration:none;
}

a:hover {
color:#000;
}

.clear {
clear:both;
}

textarea,input {
color:#7b7d6f;
}

strong {
font-weight:700;
}

p img {
padding:0;
max-width:100%;
}

img.centered,img.aligncenter {
display:block;
margin:0 auto;
border:1px solid silver;
overflow:hidden;
padding:4px;
}

img.alignright {
padding:4px;
margin:2px 0 2px 7px;
display:inline;
border:1px solid silver;
}

img.alignleft {
padding:4px;
margin:2px 7px 2px 0;
display:inline;
border:1px solid silver;
}

.alignright {
float:right;
}

.alignleft {
float:left;
}

acronym,abbr,span.caps {
cursor:help;
}

acronym,abbr {
border-bottom:1px dashed #999;
}

.center {
text-align:center;
}

.hidden {
display:none;
}

.aligncenter,div.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

.wp-caption {
border:1px solid #ddd;
text-align:center;
background-color:#f3f3f3;
padding-top:4px;
margin:10px;
}

.wp-caption img {
margin:0;
padding:0;
border:0 none;
}

.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
padding:0 4px 5px;
margin:0;
}

#wrapper {
width:1000px;
margin:0 auto;
position: relative;
background:url(images/container.jpg) repeat-y 50% 0;
}

#header {
/*margin-bottom:20px;
padding:0 10px;
width:940px;*/
height: 200px;
width: 1000px;
background: url(images/header.jpg) no-repeat 50% 0;
display:block;
}

#header #logo a {
display: block;
width: 600px;
height: 150px;
position: absolute;
top: 0;
left: 200px;
text-indent: -5000px;
}

#header #pagenav {
/*float:right;*/
}

#header #pagenav ul,#header #pagenav li {
/*margin:0;
padding:0;*/
}

/* Superfish - Menu Styles */
.sf-menu,.sf-menu * {
margin:0;
padding:0;
list-style:none;
}

#nav {
width: 650px;
height: 40px;
position: absolute;
top: 160px;
left: 175px;
background: url(images/tabs.jpg) no-repeat 50% 0;
}

#nav li {
display: inline;
}

#nav li a {
display: block;
width: 130px;
height: 40px;
float: left;
text-indent: -5000px;
}
#nav .page-item-359 a { /* home */
background-image: url(images/tabs_01.jpg);
background-position: 0 100%;
}
#nav .page-item-195 a { /* about */
background-image: url(images/tabs_02.jpg);
background-position: 0 100%;
}
#nav .page-item-361 a { /* blog */
background-image: url(images/tabs_03.jpg);
background-position: 0 100%;
}
#nav .page-item-133 a { /* portfolio */
background-image: url(images/tabs_04.jpg);
background-position: 0 100%;
}
#nav .page-item-196 a { /* guestbook */
background-image: url(images/tabs_05.jpg);
background-position: 0 100%;
}

#nav .current_page_item a, #nav li a:hover {
background-position: 0 0;
}

.sf-sub-indicator {
padding:0;
margin:0;
}

#main {
clear:both;
overflow:hidden;
width: 1000px;
background: url(images/container-footer.jpg) no-repeat 50% 100%;
}

#main .container {
/*background-color:#ffffff;
border:1px solid #d2d2cf;*/
padding:30px 50px;
overflow:hidden;
min-height: 500px;
background: url(images/container-top.jpg) no-repeat 50% 0;
}

#slider {
width:900px;
height:250px;
position:relative;
overflow:hidden;
margin-bottom:20px;
}

#slider #sliderContent {
width:900px;
position:absolute;
top:0;
margin-left:0;
}

#slider .sliderImage {
float:left;
position:relative;
display:none;
}

#slider .sliderImage .bottom {
position:absolute;
font-size:12px;
padding:20px 30px;
width:840px;
background-color:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
color:#fff;
display:none;
}
#slider .sliderImage .bottom .info {
height: 50px;
line-height: 2em;
overflow: hidden;
}

#slider .sliderImage h3 {
font-size:18px;
margin:0;
padding:0;
line-height:24px;
color:#fff;
}

#slider .top {
top:0;
left:0;
}

#slider .bottom {
bottom:0;
left:0;
}

#slider .left {
top:0;
left:0;
width:110px!important;
height:280px;
}

#slider .right {
right:0;
bottom:0;
width:90px!important;
height:290px;
}

#main .container .slogan {
margin-bottom:20px;
padding:10px 0 30px;
border-bottom:1px solid #e3e3e3;
}

#main .container .slogan .qbutton {
float:right;
line-height:50px;
margin-left:5px;
}

#main .container .slogan .qbutton a:link,#main .container .slogan .qbutton a:visited,#main .container .slogan .qbutton a:active {
font-size:18px;
padding:10px;
background:#5c96b0 url(images/qbutton_bg.png) top left repeat-x;
border:1px solid #bdbdbd;
color:#fff;
}

#main .container .slogan .qbutton a:hover {
background:#88c2dc url(images/qbutton_hover_bg.png) top left repeat-x;
}

#main .container .slogan h2 {
font-size:28px;
color:#4a85a0;
}

#main .container .home_widgets {
overflow:hidden;
font-size:12px;
line-height:22px;
color:#8b8c8c;
}

#main .container .home_widgets .widget {
margin-left:30px;
width:280px;
float:left;
}

#main .container .home_widgets .widget h3 {
padding:20px 0 5px;
margin-bottom:5px;
font-size:18px;
color:#555;
font-family: Helvetica;
font-weight: bold;
border-bottom:1px solid #aaa;
}

#main .container .home_widgets .widget p {
margin-bottom:15px;
}

#main .container .home_widgets .widget ul {
}

#main .container .home_widgets .widget ul li {
padding-bottom:5px;
padding-left:20px;
background:url(images/icon_bullet.png) 0 5px no-repeat;
}

#main .container .portfolio {
}

#main .container .portfolio .title {
padding-bottom:10px;
border-bottom:1px solid #e3e3e3;
color:#818181;
}

#main .container .portfolio .title h2 {
color:#5c96b0;
font-size:30px;
}

#main .container .portfolio .portfnav {
font-size:11px;
color:#929292;
padding:10px 20px;
border-bottom:1px solid #e3e3e3;
overflow:hidden;
}

#main .container .portfolio .portfnav ul {
overflow:hidden;
}

#main .container .portfolio .portfnav ul li {
display:inline;
margin-right:5px;
}

#main .container .portfolio .portfnav ul li a {
padding:5px 10px!important;
padding:0 10px;
}
.portfnav li span {
display: block;
width: 860px;
margin: 10px 0;
}


#main .container .portfolio .portfnav ul li.active a,#main .container .portfolio .portfnav ul li a:hover {
background:#fff;
color:#4c4c4c;
}

#main .container .portfolio #folio {
overflow:hidden;
margin-top:30px;
}

#main .container .portfolio #folio .item {
width:400px;
float:left;
height: 280px;
overflow: hidden;
margin-bottom:40px;
padding:0 25px;
}

#main .container .portfolio #folio .item img {
border:1px solid #ddd;
background:#fff;
padding:5px 4px;
margin-bottom:10px;
}

#main .container .portfolio #folio .item h2 {
font-size:18px;
margin-bottom:10px;
}

#main .container .portfolio #folio .item p {
font-size:12px;
color:#8a8a8a;
}

#main .container .content {
line-height:24px;
color:#7e7e7e;
width:600px;
float:right;
}

#main .container .content .title {
font-size:18px;
color:#555;
margin-bottom:15px;
font-weight: bolder;
}

#main .container .content p {
margin-bottom:20px;
}

#main .container .content h1,#main .container .content h2,#main .container .content h3,#main .container .content h4 {
color:#697e87;
margin-bottom:15px;
}

#main .container .content h1 {
font-size:30px;
}

#main .container .content h2 {
font-size:24px;
}

#main .container .content h3 {
font-size:18px;
}

#main .container .content h4 {
font-size:14px;
}

#main .container .content ul {
margin:10px 0 10px 20px;
}

#main .container .content ul li {
padding-bottom:5px;
padding-left:20px;
background:url(images/icon_bullet.png) 0 5px no-repeat;
}

#main .container .content ol {
list-style:decimal;
margin:10px 0 10px 50px;
}

#main .container .content ol li {
padding-bottom:5px;
}

#main .container .content blockquote {
border:1px #c0c09b solid;
background:#f0f0e5 url(images/quote.png) 10px 15px no-repeat;
padding:20px;
padding-left:65px;
font-style:italic;
margin:20px 0;
}

#main .container .content a {
text-decoration:underline;
}

#main .container .content form {
margin:20px 40px;
}

#main .container .content form label {
display:block;
margin-bottom:5px;
}

#main .container .content form input,#main .container .content form textarea,#main .container .content form select {
background-color:#e7e7e2;
border:1px solid #ccccba;
padding:5px;
color:#333;
}

#main .container .content .blogpost {
margin-bottom:20px;
overflow:hidden;
border-bottom: 1px solid #ccc;
padding: 20px 30px 40px;
background: #fff;
position: relative;
width: 540px;
overflow: hidden;
}

#main .container .content .blogpost .comments {
float:left;
margin-right:10px;
margin-top:2px;
background:url(images/commentcount.png) top left no-repeat;
font-weight:600;
font-size:13px;
width:35px;
height:33px;
text-align:center;
padding-top:5px;
color: #fff;
}

#main .container .content .blogpost .comments a {
color:#fff;
text-decoration:none;
}

#main .container .content .blogpost h2.title {
margin:0;
padding:0;
margin-left:45px;
}

#main .container .content .blogpost h2 a {
text-decoration:none;
}

#main .container .content .blogpost .meta {
font-size:10px;
margin-left:45px;
color: #aaa;
}

#main .container .content .blogpost .entry {
clear:both;
overflow:hidden;
margin-top:15px;
border-top: 1px solid #ccc;
padding: 15px 0 0;
}

#main .container .content .entry a.more-link {
display: block;
position: absolute;
width: 590px;
height: 20px;
background: #C5B6A8;
color: #fff;
bottom: 17px;
text-align: center;
right: 0;
font-size: 13px;
padding: 2px 5px;
text-decoration: none;
border-top: 1px solid #C5B6A8;
border-bottom: 1px solid #C5B6A8;
}

#main .container .content .entry a.more-link:hover {
background: #d7ccc1;
color: #555;
}

#main .container .content .social {
overflow:hidden;
border-top:1px solid #e3e3e3;
border-bottom:1px solid #e3e3e3;
padding:20px 0;
margin-bottom:20px;
}

#main .container .content .social a {
text-decoration:none;
}

#main .container .content .social h3 {
margin:0;
padding:0;
color:#518c9b;
}

#main .container .content .social p {
font-size:12px;
margin-bottom:10px;
}

#main .container .content .social ul {
font-size:12px;
margin:0;
margin-bottom:0!important;
margin-bottom:1px;
padding:0;
}

#main .container .content .social ul li {
display:inline;
margin-right:10px;
background-position:0 0;
background-repeat:no-repeat;
}

#main .container .content .social ul li.designfloat {
background-image:url(images/fav/designfloat.png);
}

#main .container .content .social ul li.delicious {
background-image:url(images/fav/delicious.png);
}

#main .container .content .social ul li.digg {
background-image:url(images/fav/digg.png);
}

#main .container .content .social ul li.stumbleupon {
background-image:url(images/fav/stumbleupon.png);
}

#main .container .content .social ul li.reddit {
background-image:url(images/fav/reddit.png);
}

#main .container .content .social ul li.technorati {
background-image:url(images/fav/technorati.png);
}

#comments {
font-size:18px;
margin:0;
clear: both;
font-weight: bold;
}

#main .container .content ol.commentlist {
margin:20px 0 0;
clear:both;
overflow:hidden;
list-style:none;
}

#main .container .content ol.commentlist li {
margin:10px 0;
line-height:18px;
padding:10px;
list-style: none;
}

#main .container .content ol.commentlist li .comment-author {
}

#main .container .content ol.commentlist li .comment-author .fn {
color:#000;
}

.comment-author .avatar {
float:right;
border:1px solid #ddd;
background:#ededed;
padding:3px;
}

.comment-meta {
font-size:10px;
}

ol.commentlist li .comment-meta a {
color:#a7a7a7;
text-decoration:none;
}

ol.commentlist li p {
line-height:22px;
margin-top:5px;
}

#main .container .content ol.commentlist li .reply {
}

ol.commentlist li .reply a {
background:#77afbe;
color:#fff;
text-decoration:none;
padding:5px 10px;
}

ol.commentlist li .reply a:hover {
background:#000;
color:#fff;
}

ol.commentlist li.odd {
border:1px solid #c5b6a8;
background:#d7ccc1;
color: #555;
}

ol.commentlist li.even {
border:1px solid #fff;
background:#f1f1f1;
}
ol.commentlist li {
padding: 10px;
margin: 20px 0 0;
}

#comment-form {
margin-top:20px;
}

#main .container .content #comment-form #respond {
}

#comment-form #respond h3 {
font-size:18px;
font-weight: bold;
}

#comment-form #respond #commentform {
margin:0;
}

#comment-form #respond #commentform label {
margin-left:10px;
display:inline;
}

#comment-form #respond #commentform label small {
font-size:10px;
color:#a0a0a0;
}

#comment-form #respond #commentform textarea,
#comment-form #respond #commentform input {
margin-bottom:10px;
padding:5px;
margin:0 10px 10px 0;
background:#f8f8f5;
border-left:1px solid #d1cec6;
border-top:1px solid #d1cec6;
border-right:1px solid #edede8;
border-bottom:1px solid #edede8;
}

#comment-form #respond #commentform input {
width:400px;
}

#comment-form #respond #commentform textarea {
width:560px;
}

#comment-form #respond #commentform input#commentSubmit {
width:100px;
padding:5px;
background:#a6cfda;
border:1px solid #78b0bf;
color:#fff;
font-weight:700;
cursor:pointer;
}

.navigation {
clear:both;
font-size:11px;
overflow:hidden;
display: none;
}

#main .container .content .navigation .alignleft,#main .container .content .navigation .alignright,#main .container .content .comment-nav .alignright,#main .container .content .comment-nav .alignleft {
width:49%;
overflow:hidden;
padding:10px 0;
}

#main .container .content .navigation .alignright,#main .container .content .comment-nav .alignright {
text-align:right;
}

#main .container .content .navigation a,#main .container .content .comment-nav a {
background:#eee;
border:1px solid #d0d0c9;
padding:10px;
text-decoration:none;
}

#main .container .content .navigation a:hover,#main .container .content .comment-nav a:hover {
border:1px solid #c2c2c2;
color:#6d6d6d;
}

#main .container .fullwidth {
width:900px;
}

#main .container .fullwidth .thumblarge {
margin-bottom:20px;
}

#main .container .sidebar {
width:250px;
float:left;
}

#main .container .sidebar .widget {
margin-bottom:50px;
font-size: 12px;
}

#main .container .sidebar .widget h3 {
padding:0 0 5px;
padding-top:0;
margin-bottom:5px;
font-size:21px;
color:#747474;
font-family: Helvetica;
font-weight: bold;
border-bottom:1px solid #ccc;
}

#main .container .sidebar .widget h3 img {
display:none;
}

#main .container .sidebar .widget ul {
}

#main .container .sidebar .widget ul li {
padding-bottom:5px;
padding-left:20px;
background:url(images/icon_bullet.png) 0 5px no-repeat;
}

#main .container .sidebar .widget_rssfeed {
font-size:16px;
}

#main .container .sidebar .widget_rssfeed ul li.rss {
background:url(images/rssfeed.png) 0 0 no-repeat;
padding:6px 0 10px 38px;
}

#main .container .sidebar .widget_rssfeed ul li.email {
background:url(images/mail.png) 0 0 no-repeat;
padding:6px 0 10px 38px;
}

#main .container .sidebar .widget_rssfeed ul li.twitter {
background:url(images/twitter.png) 0 0 no-repeat;
padding:6px 0 10px 38px;
}

#main .container .sidebar .widget_search {
}

#main .container .sidebar .widget_search form {
}

#main .container .sidebar .widget_search form div {
background:#fff;
border:1px solid #cbcbc9;
padding:5px;
}

#main .container .sidebar .widget_search form div input {
border:0;
background:#fff;
color:#666;
padding:5px;
}

#main .container .sidebar .widget_search form div input#keyword {
width:160px;
}

#main .container .sidebar .widget_search form div input#searchsubmit {
cursor:pointer;
color:#616161;
border-left:1px solid #cbcbc9;
width: 61px;
height: 24px;
font-size: 11px;
}

#footer {
font-size:13px;
padding:70px 20px 20px;
clear:both;
overflow:hidden;
color: #eee;
}
#footer a {
color: #fff;
}
#footer .copyright {
font-size: 9px;
line-height: 1.5em;
}
#footer strong {
font-size: 13px;
}

#footer .footernav,#footer .copyright {
float:left;
width:49%;
display:inline;
}

#footer .footernav ul {
overflow:hidden;
}

#footer .footernav ul li {
float:left;
padding:0 10px;
border-right:1px solid #bebea7;
}

#footer .footernav ul li a:link,#footer .footernav ul li a:visited,#footer .footernav ul li a:active {
}

#footer .footernav ul li a:hover {
color:#fff;
}

#footer .copyright {
text-align:right;
}

/* Calender styles */
#wp-calendar {
width:100%;
margin-bottom:15px;
clear:both;
padding:0;
}

#wp-calendar caption {
padding:10px;
text-align:center;
}

#wp-calendar th,#wp-calendar td {
text-align:center;
background:#E7E7E7;
color:#9E9E9E;
padding:5px;
}

#wp-calendar td {
background:transparent;
}

#wp-calendar td,table#wp-calendar th {
padding:3px 0;
}

/* WP-PageNavi Styles */
.wp-pagenavi {
clear:both;
font-size:12px;
padding:20px 10px 0;
text-align:right;
text-transform:uppercase;
border-top:1px solid #e3e3e3;
}

.wp-pagenavi a,.wp-pagenavi a:link {
padding:2px 4px;
margin:2px;
text-decoration:none;
color:#87b5ca;
background-color:#FFF;
}

.wp-pagenavi a:visited {
padding:2px 4px;
margin:2px;
text-decoration:none;
color:#87b5ca;
}

.wp-pagenavi a:hover {
color:#000;
}

.wp-pagenavi a:active {
padding:2px 4px;
margin:2px;
text-decoration:none;
color:#87b5ca;
}

.wp-pagenavi span.pages {
color:#737373;
float:left;
}

.wp-pagenavi span.current {
padding:2px 4px;
margin:2px;
font-weight:700;
color:#303030;
}

.wp-pagenavi span.extend {
padding:2px 4px;
margin:2px;
color:#000;
}



/* wp_page_numbers */
#wp_page_numbers {
clear: both;
font-size: 11px;
}

#wp_page_numbers ul {
margin: 50px 0 0;
text-align: center;
border-bottom: 1px solid #c5b6a8;
border-top: 1px solid #c5b6a8;
}

#wp_page_numbers ul li {
display: inline;
}

#wp_page_numbers li a {
padding: 5px 7px;
margin: 0 0 0 5px;
}
#wp_page_numbers li.active_page a, #wp_page_numbers li a:hover {
background: #c5b6a8;
border: 0;
font-weight: bold;
color: #fff;
}