/* 
Theme Name: Brandon Wong
Description: Brandon Wong theme
Author: Flosites
Author URI: http://flosites.com
Version: 1.0
*/
/* Reset styles
*******************************/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,ul,li,ol,
a,em,img,strong,fieldset,form,label {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    list-style: none;
}
:focus {outline: 0;}
img {vertical-align:middle; outline:0}
/* Body & forms
*******************************/
body{
    color:#6d6e71;
    text-align: left;
    background: #b8b8ba;
    font: 75% Arial, Helvetica, sans-serif;
}

input,
textarea {
    font-family: Arial, Helvetica, sans-serif;
}

/* Header elements
*******************************/
h2,
h3,
h4,
h5,
h6 {}

h2 {
    font-size:24px;
    text-transform: uppercase;
    padding-bottom: .5em;
}
h3 {}
h4 {}
h5 {
    font-size:1.25em;
}
h6 {
    font-size:1.13em;
}


/* Text elements
*******************************/
p               {margin: 0 0 1em 0; text-align: left; line-height:1.6;}
p.last          {margin-bottom:0;}
/*ul, ol          {margin: 0 0 1em 2em; text-align: left; line-height:1.6;}*/
strong      	{font-weight: bold;}
em          	{font-style: italic;}
ins             {text-decoration:none;}
del             {text-decoration:line-through;}

address         {font-style:normal; line-height:1.6;}

.alignleft {
    float:left;
}
.alignright {
    float:right;
}

/* Quotes
*******************************/
blockquote {}
blockquote:before {}
blockquote:after {}

/* Links
*******************************/
a:link,
a:visited,
a:hover,
a:active{
    color:#6d6e71;
    text-decoration: none;
}
a:visited {}
a:hover {}

#headerwrapper {
    background: url(images/headerwrapperbg.png) 50% 0 no-repeat;
    padding-top:44px;
}
#contentwrapper {
    background: url(images/contentwrapperbg.png) 50% 0 repeat-y;
}
#footerwrapper {
    background: url(images/footerwrapperbg.png) 50% 0 no-repeat;
}

#header,
#content,
#footer {
    margin:0 auto;
}

#header {
    width:980px;
    height:354px;
    background: url(images/headerbg.png) 0 0 no-repeat;
    position: relative;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #header {
        background: url(images/headerbg.png) 1px 0 no-repeat;
    }
}


#footer {
    width:980px;
    height:275px;
}


#flash {
    position:absolute;
    left:290px;
    top:-22px;
    width:400px;
    height:360px;
}
#logo {
    width:400px;
    height:320px;
    background:url(images/logo.png) 50% 22px no-repeat;
}

#nav {
    position: absolute;
    bottom:1px;
    left:119px;
}

#nav ul {}
#nav ul li {
    float:left;
    position: relative;
}
#nav ul li a.top {
    float:left;
    padding:7px 19px;
    margin-right: 38px;
}
#nav ul li.active a.top,
#nav ul li a.top:hover {
    background:#5c5d60;
}
#nav ul li a.top span {
    background-image: url(images/nav.png);
    background-repeat: no-repeat;
    text-indent: -9999px;
    float:left;
    height:11px;
}
#nav a.home span {
    width:36px;
    background-position:0 0;
}
#nav a.about span {
    width:42px;
    background-position:-37px 0;
}
#nav a.cats span {
    width:74px;
    background-position:-79px 0;
}
#nav a.links span {
    width:32px;
    background-position:-154px 0;
}
#nav a.contacts span {
    width:58px;
    background-position:-187px 0;
}
#nav a.subscribe span {
    width:61px;
    background-position:-245px 0;
}
#nav .active a.home span,
#nav a.home:hover span {
    background-position:0 -11px;
}
#nav .active a.about span,
#nav a.about:hover span {
    background-position:-37px -11px;
}
#nav .active a.cats span,
#nav a.cats:hover span {
    background-position:-79px -11px;
}
#nav .active a.links span,
#nav a.links:hover span {
    background-position:-154px -11px;
}
#nav .active a.contacts span,
#nav a.contacts:hover span {
    background-position:-187px -11px;
}
#nav .active a.subscribe span,
#nav a.subscribe:hover span {
    background-position:-245px -11px;
}


/*#nav ul li.active a,*/
#nav ul li a {
    color:#bfbfbf;
}
#nav ul li a:hover {
    color:#6d6e71;
}
#nav ul ul {
    display: none;
    position: absolute;
    overflow: hidden;
    width:113px;
    top:25px;
    left:0;
    background: #fff;
    z-index:9999;
    padding:0 0 12px 0;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
}
#nav ul li li {
    font:normal .93em Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    float:none;
    background: none;
    padding:12px 0 0 8px;
}
#nav ul li li a {
    
}

#content {
    width:900px;
    padding:53px 40px;
}


#container-contact {
    display: none;
    margin:0 auto;
    width:980px;
    height:223px;
    padding:50px 0 0 0;
    border-bottom:1px solid #c8c9ca;
    background: url(images/contactbg.gif) 0 0 no-repeat;
}
#container-about {
    display: none;
    margin:0 auto;
    width:940px;
    padding:18px 20px 0;
    border-bottom:1px solid #c8c9ca;
    background: #DFDFDF url(images/contactbg.gif) 0 0 no-repeat;
    color:#707070;
    font-family: "Century Gothic", "Helvetica Neue LT Std", Helvetica, Arial, sans-serif;
    overflow: hidden;
    zoom: 1;
}
#container-about img {
	width:290px;
	height: auto;
	margin-right: 20px;
}

#container-about .image {
	float: left;
}
#container-about .text {
	overflow: hidden;
}
#container-about .text p {
	line-height: 1.5;
}


.page,
.post {
    padding-bottom:4em;
}
.page h2,
.post h2 {
    width:410px;
    overflow:hidden;
}

.post .posted {
    padding-top: 7px;
    float:right;
    font-size:1.17em;
    text-transform: uppercase;
    color:#a3a3a3;
}
.post .posted a {
    color:#636467;
}
.post .story {}
.page img,
.post img {}

.post img {
    margin-bottom:1em;
}
.post p img {
    margin-bottom:0;
}


.share {
    overflow: hidden;
    padding-bottom:1.5em;
}
.share ul {
    float:left;
    overflow: hidden;
}
.share ul li {
    float:left;
}
.share .actions li {
    text-transform: uppercase;
    font-size:1.08em;
    line-height: 1.31em;
    padding-left:39px;
    background:url(images/share-delim.gif) 17px 2px no-repeat;
}
.share .actions a {
    color:#808080;
}
.share .actions a:hover,
.share .actions a.visible {
    color:#6d6e71;
}
.share .actions li.first {
    padding-left: 0;
    background: none;
}
.share .actions {
    margin-right:25px;
}
.share .buttons li a {
    text-indent: -9999px;
    float:left;
    width:17px;
    height:17px;
    margin-right: 6px;
    background-image: url(images/share.gif);
    background-repeat: no-repeat;
}
.share .gmail {
    background-position: 0 0;
}
.share .digg {
    background-position: -23px 0;
}
.share .flickr {
    background-position: -47px 0;
}
.share .linkedin {
    background-position: -72px 0;
}
.share .facebook {
    background-position: -96px 0;
}
.share .twitter {
    background-position: -120px 0;
}
.share .stumbleupon {
    background-position: -143px 0;
}
.share .rss {
    background-position: -168px 0;
}
.share .delicious {
    background-position: -192px 0;
}

.comments {
    overflow: hidden;
    display: none;
    margin-bottom: 27px;
}
.comments .list {
    height: 120px;
    overflow: hidden;
    color:#a3a3a3;
}
.comments ul {
    min-height: 60px;
    height: auto!important;
    height: 60px;
}
.comments ul li {
    padding-bottom: 1em;
}
.comments span {
    text-transform: uppercase;
}
.comments span a {
    color:#6d6e71;
    text-decoration: underline;
}

.comment-n-share {}
.comment-n-share .comment,
.comment-n-share .share {
    overflow: hidden;
    zoom:1;
    border:1px solid #d0d1d3;
    border-left:0;
    border-right: 0;
    padding:42px 40px;
    margin:0 -40px 1.5em;
    background: url(images/commentbg.gif) 0 0 no-repeat;
}

.comment-n-share .share {
	display: none;
}

.comment-n-share .inputs {
    float:left;
    width:348px;
    margin-right:10px;
}
.comment-n-share .area {
    width:456px;
    float:left;
}
.comment-n-share .say {
    padding-top: 21px;
    float:right;
}

form .inputs input,
form .area textarea {
    color:#6d6e71;
    padding:3px 4px 1px 4px;
    font-size:1.08em;
    text-transform: lowercase;
    line-height: 1;
    border:0;
}
.comment-n-share .inputs input {
    width:338px;
    background:url(images/comment-inputbg.gif) 0 0 no-repeat;
    margin-bottom:4px;
    height:20px;
}
.comment-n-share .area textarea {
    resize:none;
    width:448px;
    height:80px;
    background:url(images/comment-textareabg.gif) 0 0 no-repeat;
}





#contact-form .area {
    float:left;
}
#contact-form .area1 {
    margin-left:140px;
    width:340px;
}
#contact-form .area2 {
    margin-left:12px;
    width:303px;
}
#contact-form .area p {
    overflow: hidden;
    zoom:1;
    margin-bottom:0px;
}
#contact-form .area p label {
    color:#535353;
    text-transform: uppercase;
    font-size:1.08em;
    line-height: 1.3;
}
#contact-form .area1 p label {
    padding-top:1px;
    float:left;
    text-align: right;
    color:#535353;
    text-transform: uppercase;
    width:140px;
    clear:both;
    font-size:1.08em;
}
#contact-form .area input,
#contact-form .area textarea {
    font-size:12px;
}
#contact-form .area input {
    width:191px;
    background:url(images/contact-inputbg.gif) 0 0 no-repeat;
    margin-bottom:4px;
    height:18px;
    padding:1px 2px 0 2px;
    border:0;
}
#contact-form .area1 input {
    float:right;
}
#contact-form .area2 input {
    width:303px;
    background-image: url(images/contact-inputlongbg.gif);
}
#contact-form .area textarea {
    resize:none;
    width:303px;
    height:42px;
    background:url(images/contact-textareabg.gif) 0 0 no-repeat;
}
#contact-form .area2 label {
    display: block;
}
#contact-form .area2 .important {
    margin-bottom: 4px;
}
#contact-form .area2 .important label {
    padding-bottom: 12px;
}
#contact-form input.button,
#contact-form input.reset {
    border:0;
    cursor: pointer;
    height:28px;
    width:94px;
}
#contact-form input.button {
    background: url(images/contact-submit.gif);
}
#contact-form input.reset {
    background: url(images/contact-reset.gif);
}
p.error {
    text-align: center;
    color:#941b1b;
}


.about p {
    
}
.about img {
    margin-right:36px;
}

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #cccccc;
}
.jScrollPaneDrag {
	position: absolute;
	background: #919191;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

#footer {
    color:#6d6e71;
    position: relative;
}

#archives {
    text-transform: uppercase;
    font-size:1.08em;
    color:#a1a1a1;
    overflow: hidden;
    zoom:1;
    position: absolute;
    left:40px;
    top:100px;
}
#archives span.title {
    float:left;
    padding-right:68px;
}
#archives .years {
    float:left;
}
#archives .years li {
    float:left;
    margin-left: 30px;
}
#archives a {
    color:#6d6e71;
}

#pagination {
    height:47px;
    position: relative;
    font-size:1.17em;
    line-height: 1;
    text-transform: uppercase;
}
#wp_page_numbers {}
#pagination a {
    color:#bababa;
}
#pagination .active_page a {
    color:#6d6e71;
}
#pagination a.next,
#pagination a.prev {
    color:#6d6e71;
    height:14px;
    display: block;
    position: absolute;
    top:16px;
    padding-top:2px;
}

#pagination a.prev {
    left:40px;
    padding-left:20px;
    background: url(images/pagination-arrow-left.gif) 0 0 no-repeat;
}
#pagination a.next {
    right:40px;
    padding-right:20px;
    background: url(images/pagination-arrow-right.gif) 100% 0 no-repeat;
}

#pagination ul {
    padding-top:18px;
    text-align: center;
}
#pagination ul li {
    display: inline;
    padding:0 2px;
}
#pagination ul li.caption {
    padding-right:5px;
}




#copyright {
    position:absolute;
    bottom:64px;
    left:0;
}
#developed {
    position:absolute;
    bottom:64px;
    right:0;
}