/*
---------------------------------------------------------------------------------
	subvert.ca
	global screen styles
	updated: January 2 2010
---------------------------------------------------------------------------------
*/

/* ==== general ==== */

body { background: url("http://subvert.ca/images/layout/bg.jpg") no-repeat center top #000000; color: #efefef; }
#wrapper { font-family: Arial, Helvetica, sans-serif; font-weight: 300; position: relative; }

a { text-decoration: none; color: #ae5e35; }
a:hover { text-decoration: underline }

h4 { margin-bottom: 8px }
p.lead { font-size: 22px; line-height: 28px }

strong { font-weight: bold }
em { font-style: italic }

img.wborder { margin: 0 1em 1em 0; padding: 10px; background: #fff; border: 1px solid #bfbfbf; }
img.wborder-right { margin: 0 0 1em 1em; float: right; display: inline; padding: 10px; background: #fff; border: 1px solid #bfbfbf; }
img.pdf { float: right; display: inline; margin-left: 10px; }

#sidebar { margin: 50px 0 0 0; background: url("http://subvert.ca/images/layout/sidebar-bg.png"); padding: 20px 20px 80px 20px; }
#sidebar h2 { font-size: 24px; line-height: 26px; letter-spacing: -0.65px; font-weight: 500; margin-bottom: 6px; }
#sidebar p { color: #ccc; font-size: 14px; line-height: 20px; }

/* ==== header ==== */

#page-title { background: url("http://subvert.ca/images/layout/h1-bg-bar.png") no-repeat; height: 113px; margin: 10px 0; }
#page-title h1 { padding: 20px 40px; font-size: 32px; letter-spacing: -0.5px; }
#page-title h1 a { color: white; text-decoration: none; }
#page-title h1 span { font-weight: 300; }
#page-title img#pt-arrow { margin: 0 0 -8px 0; position: relative; }

#page-title #backlinks { color: #a0bcd5; margin: 40px 40px 0 0; text-align: right; }
#page-title #backlinks span { padding: 0 6px; }
#page-title #backlinks a { font-size: 11px; font-weight: bold; color: #a0bcd5; }

#logo {  }
#logo h1, #logo h2, #logo a { text-indent: -9999px; }
#logo h1, #logo h2 { position: absolute; left: -9999px; }
#logo a { display: block; height: 95px; width: 170px; position: relative; background: url("http://subvert.ca/images/layout/logo-simple.png") no-repeat; }
#logo a:hover { background-position: bottom; }

#page-content { background: white; color: #333; border-top: 10px solid #cab694; padding: 40px; font-size: 16px; line-height: 22px; }
#page-content h2 { font-size: 28px; letter-spacing: -0.35px; padding: 0 1em 0 0; line-height: 30px; }
#page-content h3 { font-size: 18px; font-weight: bold; }

/* ==== featured-work callout ==== */

#featured-work { margin-top: 50px; }
#featured-work h3 { font-size: 36px; font-weight: 300; line-height: 38px; }
#featured-work #fw-blurb { margin: 0 0 0 40px; }

/* ==== homepage ==== */

#home-pull { background: url("http://subvert.ca/images/layout/home-pull-bg.png") repeat-x; height: 124px; width: 100%; position: absolute; top: 490px; left: 0; z-index: -1; }

#what-we-do h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.75px; margin-bottom: 40px; }
#what-we-do p { font-size: 22px; line-height: 30px; letter-spacing: -0.5px; margin-bottom: 40px; color: #c4cbd1; }
#what-we-do p strong { font-weight: bold; }
#what-we-do p span { color: #d8d2ad; font-weight: bold; }
#what-we-do a { color: #d8d2ad; }

#callout h3, #callout h4 { text-indent: -9999px; position: absolute; }

#callout-nav { margin: 0; padding: 0; height: 0; position: absolute; right: 20px; top: 150px; font-size: 11px; z-index: 9999;  }
#callout-nav a { padding: 0 4px; background: #222; margin: 0 4px; }
#callout-nav a.activeSlide { color: white; }
#callout-nav a:hover { text-decoration: none; }

#callout { float: left; margin: 30px 0 0 0;; padding: 0; background: url("http://subvert.ca/images/layout/callout-bg.png") no-repeat; height: 345px; width: 940px; }
#callout .mkt-item { margin-top: 14px; }

#what-featured { margin-top: 50px }

#featured { background: #0f1820; width: 519px; float: right; padding: 0 0 10px 0; position: relative; } 
#featured h3, #featured h4 { padding: 0 20px;  } 
#featured h3 { font-size: 28px; font-weight: bold; letter-spacing: -0.75px; line-height: 28px; margin: 8px 0 6px 0;  } 
#featured h3 a { color: #d8d2ad; } 
#featured h4 { color: #b4c4d2; font-size: 13px; font-weight: 300; line-height: 13px; }
#featured a#view-all { position: absolute; right: 20px; bottom: 40px; font-weight: 500; }

a#how-we-help { width: 245px; height: 38px; display: block; background: url("http://subvert.ca/images/layout/help-button.png") no-repeat; text-indent: -9999px; }
a:hover#how-we-help { background-position: bottom; }

/* ==== coda viewer css ==== */

/* hardcoded widths */
.stripViewer { position: relative; overflow: hidden; margin: auto; width: 560px; height: 560px; clear: both; background: none; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; width: 100%; list-style-type: none; }
.stripViewer .panelContainer .panel { float:left; height: 100%; position: relative;	width: 560px; }
/* hide auto created js stuff */
.csw, 
.csw .loading,
.stripNav,
.stripNavR,
.stripNavL { display: none; }

/* ==== company page ==== */

.list-float { margin-top: 20px; list-style:none;}
.list-float li { display: inline; margin: 0; width: 130px; height: 30px; }

/* ==== contact page ==== */

body.contact #sidebar h3 { margin: 0; }
body.contact #sidebar p { margin: 20px 0 1em 0; }

#contact-form tr:hover { background: #deeaf8; }
#contact-form td { padding: 8px; vertical-align: top; }
#contact-form label { width: 130px; display: block; }
#contact-form input, #contact-form textarea { padding: 2px; font-size: 16px; }

.notice { background: #deeaf8; padding: 2px 5px; }

/* ==== blog ==== */

#blog .post { margin: 0 0 2.5em 0; }
#blog .post p img { padding: 10px; background: #fff; border: 1px solid #bfbfbf; }
#blog .post h2 { font-size: 24px; line-height: 28px; margin-bottom: 12px; }
#blog .post h2 a { color: #ae5e35; }
#blog .post p { margin-bottom: 12px; line-height: 28px; }
#blog .post span.post-meta { color: #455966; font-size: 13px; margin-bottom: 10px; line-height: 24px; border-top: 1px dotted #ccc; display: block; }
#blog .post span.post-meta a { color: #455966; font-weight: normal; text-decoration: underline; }
#blog .post span.post-meta a:hover { text-decoration: none; }
#blog .post ul { font-size: 16px; line-height: 26px; }

#comment-form tr:hover { background: #deeaf8; }
#comment-form td { padding: 8px; vertical-align: top; }
#comment-form label { width: 130px; display: block; }
#comment-form input, #comment-form textarea { padding: 2px; font-size: 16px; }

#sidebar #blog-search { margin: 10px 0 30px 0;}
#sidebar input#search { font-size: 18px; padding: 2px; width: 115px; font-family: "Helvetica Neue", arial; color: #666; display: inline; float: left; }
#sidebar #go { margin: 0 0 0 8px; display: inline; float: left; }
#sidebar .blog-links h2 { font-size: 24px; margin: 0;}
#sidebar .blog-links a { font-size: 14px; line-height: 20px; padding: 10px 0; display: block; border-bottom: 1px solid #5d3622; color: white; }
#sidebar #archived-posts { margin-top: 25px; }
#sidebar #archived-posts.blog-links a { display: inline; border-bottom: none; color: white; }
#sidebar #next-previous { float: left; margin: 0; padding: 0; font-size: 12px; }
#sidebar #next-previous li { float: left; }
#subscribe { margin-top: 7px; }
#subscribe-page { padding-top: 10px; }

/* ==== work ==== */

body.work #page { background: url("http://subvert.ca/images/layout/work-bg.png") no-repeat 10px 0; padding-top: 50px; }
body.work #page #sidebar { background: none; margin-top: 0; margin-left: 10px; }

.work-item { width: 200px; float: left; display: block; background: #0f1820; margin: 0 10px 30px 0; padding: 10px; }
.work-item:hover { background: #253544; }
.work-item h3 a { margin-top: 10px; font-size: 16px; font-weight: bold; line-height: 20px; color: #a0bcd5; text-decoration: none; }

.third { margin-right: 0; }

/* ==== work detail ==== */

#view-panel { margin-top: -40px; float: left; width: 400px; height: 200px; background: #0f1820; display: none; }

	#view-panel .work-item { width: 150px; float: left; display: block; background: #0f1820; margin: 0 10px 10px 0; padding: 10px; }
	#view-panel .work-item:hover { background: #253544; }
	#view-panel .work-item h3 a { margin-top: 10px; font-size: 16px; font-weight: bold; line-height: 20px; color: #a0bcd5; text-decoration: none; }

#work-detail { margin-top: -40px; background: url("http://subvert.ca/images/layout/work-detail-shadow-bg.png") no-repeat 50px 0px; }
#work-info { margin-top: 40px; background: #000; padding: 40px; font-size: 16px; line-height: 24px; }
#work-info .meta { color: #a0bcd5; font-size: 14px; line-height: 20px; }

#screenshot { margin-top: -25px; position: relative; }
#screenshot img { margin: 47px 0 0 0; }
#screenshot #arrow-left { position: absolute; left: 0; top: 200px; }
#screenshot #arrow-right { position: absolute; right: 0; top: 200px; }

/* ==== footer ==== */

#footer { background: #0b0b0b; color: #515151; margin: 50px 0 0 0; }
#footer #footer-wrap { padding: 30px 0 0 0; }
#footer a { color: #ccc; }
#footer span { padding: 0 6px; }
#footer #logo-copy img { float: left; display: inline; margin: -3px 30px 0 30px; }

/* ==== staff, static image ==== */

    #staff { 
       width: 500px;
        }
        
        #staff h4 span {
            display: block;
            font-size: 90%;
            font-weight: normal;
            }
        
        #leftside {
            float: left;
            width: 240px;
            height: 250px; 
           padding: 0 0 20px 0;
            text-align: right;
            }
            
        #rightside {
            float: right;
            width: 230px;
            height: 250px; 
            padding: 0 0 20px 0;
            }

/* ==== staff wall slider ==== */

.slidergallery {
	margin-bottom: 30px;
	overflow: hidden;
	position: relative;
	width: 500px;
	height: 400px;
	}

.slidergallery ul {
	position: absolute;
	list-style: none;
	overflow: none;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	}

.slidergallery ul li {
	display: inline;
	}

.slider {
	width: 368px;
	height: 18px;
	margin-top: 370px;
	margin-left: 65px;
	padding: 1px;
	position: relative;
	background: url("http://subvert.ca/images/layout/slider-browser-scrollabr.png") no-repeat;
	}

.handle {
	position: absolute;
	cursor: move;
	top: 0;
	z-index: 100;
	background: url("http://subvert.ca/images/layout/slider-browser-button.png") no-repeat;
	width: 50px;
	height: 20px;
	}

	.slider span {
		color: #666;
		font-size: 80%;
		cursor: pointer;
		position: absolute;
		z-index: 110;
		top: 3px;
		}

		.slider .slider-lbl1 {
			left: 50px;
	   }
	
/* This is for the geeky code coloring! */
pre {
	border: 1px solid #BFBFBF;
        padding: 10px;
        width: 610px;
        overflow-x: scroll;
	font-size: 12px;
        line-height: 14px;
}

.coloredcode .cmt 	{ color: #00D502; }
.coloredcode .cmtg 	{ color: #666; }
.coloredcode .st 		{ color: #f00; }
.coloredcode .kwdt 	{ color: #666; }
.coloredcode .kwd 	{ color: #00f; }
.coloredcode .attr 	{ color: #f00; }
.coloredcode .attrv 	{ color: #00f; }
.coloredcode .ec 		{ color: #00f; }
.coloredcode .tag 	{ color: #800000; }
.coloredcode .dir    { color: #000; background: #FEFF22; }
.coloredcode .gen    { color: #09c; }
.coloredcode .sel    { color: #800000; }
.coloredcode .val    { color: #00f; }
.coloredcode .unit 	{ color: #800000; }
.coloredcode .sqlcmt { color: #008080; }
.coloredcode .sqlkwd { color: #00f; }
.coloredcode .sqlkwd2 { color: #f0f; }
.coloredcode .sqlkwd3 { color: #999; }
.coloredcode .sqlkwd4 { color: #800000; }
.coloredcode .num 	{ color: #00f; }
.coloredcode .sqlst  { color: #008000;}
.coloredcode b      { font-weight: normal; color: #008080; }