/* 
project: Zone Website 
author: dominic da Costa
*/


/* colors ///////////////////////////////// **/

.white { background-color: #fff; }
.pink { background-color: #ff0092; }
.contentpanel { height: 380px; overflow: hidden; margin-bottom: 10px; }
.lightgrey { background-color: #707070; }
.grey { background-color: #535353; }

/* default styles ///////////////////////////////// **/
html { background: #ededed url(../images/bgk_frame.png) repeat-y top center; }

body { padding: 0; margin: 0; font: 17px Arial; color: #535353; }
#body { width: 1052px; margin: 0 auto; height: 100%; }

a { color: #ff0092; display: inline-block; text-decoration: none; }

a:hover { text-decoration: underline; }

a.title { color: #707070; background: #FFF; }

h1 { font: 22px Georgia; padding: 0; color: #000; margin: 0 0 10px 0; line-height: 1.3em; /*letter-spacing:-1px;*/ }

h1.pink { background: none; color: #260859 !important; }

h1 a { color: #000; }

h2, h3, h4 { padding: 0; font: 22px Georgia; color: #333; margin: 15px 0 10px 0; /*letter-spacing:-1px;*/ line-height: 1.3em; font-weight: normal; }
h2 a, h3 a, h4 a { text-decoration: none; color: #333; }
h5 { font-family:Georgia, Times New Roman, Serif; font-size:17px; color:#260859; font-style:italic; border-bottom:solid 2px #9384ac; padding-bottom:2px; margin-bottom:10px; display:block; }
h5.blue { color:#00b6ef; border-bottom:solid 2px #80dbf7;}

p { font-size: 12px; line-height: 1.6em; font-family: Arial,helvetica,sans-serif; }

em{font-style:italic;}

strong { color: #260859; }

ul { margin: 0; padding: 0; list-style: none; }

form { margin: 0; }

input { font: 17px Arial; }

h1.inline { display: inline; }
h2.inline { color: #808080 !important; display: inline; }

div.padded { padding-left:20px; }

/** Image replacement ///////////////////////////////// **/
.img-replace { position: relative; }
.img-replace span, .img-replace input { position: absolute; left: -3000px; }

/* layout  ///////////////////////////////// **/

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child + html .group { zoom: 1; }
/* IE7 */

div#navbar { color: #707070; margin-bottom: 55px; overflow: hidden; }

div#navbar ul { list-style: none; position: relative; list-style: none; display: block; border-bottom: 2px solid #c0c0c0; float: left; margin-top: 5px; }

div#navbar ul li { display: block; /*border-bottom:solid 2px #c0c0c0;*/ margin: 5px 0 0 0; padding-right: 2em; float: left; }

div#navbar ul li a { font-family: arial,helvetica,sans-serif; font-size: 12px; color: #000000; /*border-bottom:solid 2px #c0c0c0;*/ padding-bottom: 3px; top: 2px; }

div#navbar ul li a:hover { text-decoration: none; }

div#navbar ul li a.active { font-weight: bold; color: #8e9092; }

div#navbar #magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #260859; font-size: 1px; }

/*--------------------------------------------------------------------------------------------------------------------*/

div#header { margin: 0 0 45px 0; padding-top: 20px; }

div#header #logo { height: 70px; width: 188px; }

.subheader { clear: both; margin: 3px 0 10px 0; padding: 8px; background: #f4f4f4; color: #808080; border-bottom: 1px solid #dfdfdf; }


div#clients ul li { border: 1px solid #dfdfdf; width: 140px; height: 140px; margin-bottom: 20px; }

/*div#content .content p{font-size:16px;font-family:Arial;}*/
div.images { margin-bottom: 30px; }
div#panels { margin: 30px 0 0 0; }
/*div#post p{font-size:15px;padding-bottom:15px;}*/
div#post p { padding-bottom: 15px; }
div#post li { padding-bottom: 15px; margin-left:15px; font-size: 12px; list-style-type:disc; color:#707070; line-height: 1.6em; }
div#post img { display: block; margin: 15px 0 25px 0; }


/* general ///////////////////////////////// **/
.float-left, .float_left { float: left; overflow: hidden; }
.float-right { float: right; overflow: hidden; }
.border-bottom { border-bottom: 1px solid #808080; padding-bottom: 10px; margin-bottom: 10px; }
.border-right { border-right: 1px solid #808080; padding-right: 9px; }
.border-left { border-left: 1px solid #808080; padding-left: 9px; }
.whitespace { overflow: hidden; }
.align-right { text-align: right; }
.align-left { text-align: left; }


/** Results ///////////////////////////////// **/
div#results .date { font-size: 11px; color: #4d4d4d; }
div#results h2 { font-size: 38px; margin: 5px 0 10px 0; }



/** Search ///////////////////////////////// **/
#search { float: right; width: 170px; margin: 10px 5px 0 5px; position: relative; font-size: 13px; }

#search input.text { height: 18px; line-height: 18px; vertical-align: middle; width: 126px; border: none; background: #dfdfdf; color: #535353; padding: 2px 5px 0 5px; font-size: 13px; }
#search input.button { height: 20px; line-height: 18px; vertical-align: middle; width: auto; border: none; width: 10px; }
#search .hide { display: none; }
#search .go { width: 30px; height: 20px; line-height: 20px; border: none; background: #666666 no-repeat; color: #fff; text-align: center; vertical-align: middle; text-transform: uppercase; font-size: 11px; font-family: Georgia,serif; }

#searchterms { margin-bottom: 30px; }


/* content ///////////////////////////////// **/
.content { margin: 0px 0px; }
.content p { color: #707070; }
.content p a { color: #ff0092; }
.content h4 { text-transform: capitalize; }
.content h4 a { color: #ff0092; margin: 5px 10px; }
.content img.thumb { width: 300px; height: 203; margin: 5px 0 20px 0; }
.content.border-bottom { border-bottom: 1px dashed #b6b6b6; padding-bottom: 5px; margin-bottom: 10px; }

/* sidebar ///////////////////////////////// **/
.sidebar ul { margin: 5px 0px; }
.sidebar ul li { margin: 5px 0px; }
.sidebar ul li.border-bottom { border-top: 1px solid #efefef; padding-top: 10px; margin-top: 10px; border-bottom: none; }
#sidebar, #sidebar p { font-family: georgia,arial,sans-serif; font-size: 12px; line-height: 2.0em; }
#sidebar a { color: #8E9092; }
#sidebar a:hover { color: #E20076; }


/* footer ///////////////////////////////// **/
div#footer { color: #59595B !important; margin: 0 0 50px 0; padding: 10px 0 0 0; font-size: 12px; border-top: 1px solid #808080; }

div#footer h2 { line-height: 1.8em; color: #535353; margin-bottom: 10px; }
div#footer strong { color: #260859; font-weight: bold; font-family: Georgia,Arial,helvetica,sans-serif; }
div#footer .legal { color: #9A989E; font-size: 10px; }

#footer {
    overflow:hidden;
}
#footer div {
    float:left;
    width:275px;
}
#footer div.wide {
    width:380px;
}
#footer div.wide div {
    float:left;
    width:190px;
}
#footer h5 {
    border-bottom:none;
    color:#260859;
    font-style:normal;
}
#footer h6 {
    color:#999;
    font-family:Georgia, Times New Roman, Serif;
}

/** Archive  ///////////////////////////////// **/
#archive { font-family: georgia,arial,sans-serif; font-size: 12px; line-height: 2.0em; }
#archive ul li a { font-family: arial,sans-serif; }
#archive a { color: #8E9092; }
#archive a:hover { color: #E20076; }
#archive .AspNet-TreeView-Selected a { background-color: #efefef; }
#archive .AspNet-TreeView-ParentSelected a { background: none; }


/* Paging ///////////////////////////////// **/
.paging { width: 100%; padding: 1px 0; clear: both; overflow: hidden; font-size: 13px; margin: 20px 0; font-size: 12px; }
.paging ul li.prev { float: left; }
.paging ul li.next { float: right; }
.paging ul { list-style: none; width: 100%; }
.paging ul li { float: left; padding: 0px 0px; margin: 0px 5px; }
.paging ul li a.disabled { color: #dfdfdf; text-decoration: none; cursor: default; }
.paging ul li a.disabled:hover { color: #dfdfdf; text-decoration: none; cursor: default; }
.paging ul li a { color: #ff0092; }


/** Twitter  ///////////////////////////////// **/
.twitter { text-align: left; }
.twitter-link { margin: 25px 0 0 0; text-align: right; }
.twitter ul { }
.twitter li { float: left; padding: 8px 2px; border-bottom: 1px dotted #b9b1a9; width: 100%; margin: 0 10px 0 0; }
.twitter li.last { border-bottom: 0; }
.twitter li a { font-size: 85%; text-decoration: none; color: #ff0092; }
.twitter li a:hover { color: #535353; }

/** Show Hide Field Labels  ///////////////////////////////// **/
label.overlabel { color: #999; position: absolute; font-family: Arial,helvetica,sans-serif; width: 0px; height: 0px; overflow: hidden; }
label.overlabel-apply { position: absolute; font-family: Arial,helvetica,sans-serif; top: 2px; left: 5px; z-index: 1; color: #999; }

/** Panels ///////////////////////////////// **/
#panels a.main-link:hover { text-decoration: none; }
#panels a.main-link span { display: block; font-size: 22px; font-family: Georgia,Serif; padding: 10px 0; color: #000; }
#panels a.main-link:hover span { color: #ff0092; padding-top: 8px; }
#panels a.main-link:hover img { border-bottom: solid 2px #ff0092 !important; }
#home #panels ul li { padding-right:20px; }
#home #panels ul li:nth-child(2n) { padding-right:0px; }
#home #panels ul li.no_padding { padding-right:0px; }


/** Panel ///////////////////////////////// **/
.panel { background-color: transparent; display:inline-block; float:left; margin: 0 10px 20px 10px;cursor:pointer}
.panel.collapse{width:140px; height:140px!important;overflow:hidden;  }
.panel.expand-1, .panel.expand-2{float: left;margin-right:10px; min-height:300px; }
.panel.expand-3,.panel.expand-4{float: right;margin-right:70px; min-height:300px;}

/* profile ///////////////////////////////// **/
div.profile { margin: 20px 0; }
div.profile h2 { margin-bottom: 0px; }
div.profile h2, h3 { margin-top: 0px; }
div.profile img{padding:0 10px 5px 0; background-color:#ffffff;}
div.profile .header {overflow: hidden; }
div.profile .copy {border-top: solid 1px #808080; padding-top:10px; }

/* home ///////////////////////////////// **/
#home .grid_12 .grid_4 {
    margin:0;
}
#home .grid_8 .grid_4 {
    margin:0;
}
#home .grid_12 h2 {
    padding-right:30px;
}
#home .grid_12 ul {
    margin-top:40px;
}
/* blog home ///////////////////////////////// **/
div.blog-home div.border-bottom {
    border-bottom:dotted 1px #999;
    padding-bottom:10px;
}
div.blog-home div.content h2 a {
    color:#000;
    font-size:17px;
    line-height:130%;
}
div.blog-home div.content p {
    color:#4c4c4c;
    font-size:13px;
    width:250px;
}
div.blog-home div.content a {
    font-size:12px;
}
div.blog-home div.content p a {
    color:#ff0092;
    font-family:Arial,helvetica,sans-serif;
    font-size:13px;
    font-style:normal;
}
div.blog-home div.content p.date {
    color:#999;
    font-family:Arial,helvetica,sans-serif;
    font-size:11px;
}

/* social ///////////////////////////////// **/
div.social {
    clear:both;
    float:right;
    margin-bottom:40px;
    overflow:hidden;
    width:280px;
}
#twitter_update_list li {
    border-bottom:dotted 1px #999;
    font-size:12px;
    margin-bottom:10px;
    padding:0 10px 8px 0;
}
#twitter_update_list li a {
    color:#999;
    display:block;
    font-size:12px !important;
    padding-top:8px;
}
#twitter_update_list li span {
    color:#666666;
}
#twitter_update_list li span a {
    color:#ff0092;
    padding-top:0px;
}
#flickr a {
    height:90px;
    margin-right:4px;
    width:90px;
}
#flickr a.last {
    margin-right:0;
}
#flickr img {
    width:90px;
    margin:0 auto;
}