/*---------------------------------------
Designer/Coder: Danny Halarewich
Email: Danny@halarewich.com

Thanks for looking under my hood to get a better glimpse. Peak around a little
and let your imagination build something great!
----------------------------------------*/


body {
	font: normal small "trebuchet ms", verdana, sans-serif;
	color: #777;
	background: #fff url(./i/bg.jpg) 0 98px repeat-x;
	margin: 0;
	padding: 0;
}
* html body {
  font-size: x-small; /* for IE5/Win */
  f\ont-size: small; /* for other IE versions */
}
#container {
	position: relative;
	width: 100%;
}
#navcontainer {
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 122px;
}
h1#branding {
    display: block;
    width: 351px;
    height: 122px;
	float: left;
	margin: 0;
}
h1#branding a {
    display: block;
    width: 351px;
    height: 122px;
	float: left;
    background: #fff url(./i/branding_bg.jpg) top left no-repeat;
}
#navigation {
	position: absolute;
	top: 104px;
	right: 0;
	height: 122px;
	width: auto;
}
#header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 259px;
	background: transparent url(./i/banner_bg.jpg) top left no-repeat;
}
    #header p {margin: 0; padding: 0;} /*Fixes spacing in Opera */
	
#wrapper {
    float: left;
	width: 100%;
	max-width: 1200px;
	background: transparent url(./i/wrapper_bg.gif) top right repeat-y;
	margin: 0;
	padding: 0 0 40px 0;
}
#content_wrapper {
	float: left;
	width: 100%;
}
#bottomcontent {
	float: left;
	width: 100%;
	min-width: 500px;
	margin-right: -370px;
}
#workingon {
		margin-right: 370px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Coda Slider (Testimonials)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; background: #fff; overflow: scroll}
.csw .loading {}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	float: left;
	width: 350px;
	height: auto;
	padding-left: 20px;
	overflow: hidden;
}

.slider-wrap h3 {color: #E75F61}
#content_wrapper .slider-wrap blockquote p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 20px;
	color: #888;
}


	noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
	noscript a { color: #a00; text-decoration: underline }
	noscript ol { margin-left: 25px; }
	
	
	.stripViewer .panelContainer .panel ul {
		text-align: left;
		margin: 0 15px 0 30px;
	}
	


	.stripViewer { /* This is the viewing window */
		position: relative;
		overflow: hidden; 
		width: 350px; /* Also specified in  .stripViewer .panelContainer .panel  below */
		background: #fff;
	}
	
	.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
		position: relative;
		left: 0; top: 0;
		width: 100%;
		list-style-type: none;
		padding-bottom: 10px;
		/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
	}
	
	.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
		float: left;
		width: 350px; /* Also specified in  .stripViewer  above */
	}
	
	
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	display: none;
}

.stripNavL {float: left;}
.stripNavR {float: right; text-align: right;}
.stripNavL, .stripNavR { /* The left and right arrows */
	display: block;
	width: 100px;
}

.stripNavL a, .stripNavR a {
	display: block;
	width: 100px;
	font-weight: bold;
}

.stripNavL a:hover, .stripNavR a:hover {color: #72A825; background-color: transparent;}
.stripNavL a:active, .stripNavR a:active {outline: none;}

#content {
	margin: 0 207px 0 0;
	padding: 0 30px;
}
#sidebar {
	float: right;
	width: 187px;
	background: transparent url(./i/sidebar_bg.jpg) top left no-repeat;
	margin-left: -100%;
	padding: 0 10px;
}
#footer {
	clear: both;
	width: 100%;
	height: 28px;
	background: #F3F3F3 url(./i/footer_bg.gif) top left repeat-x;
	margin: 0;
	padding: 12px 0 0 0;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Typography
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

h2, h3 {
    letter-spacing: -.05em;
    margin: 10px 0 0 0;
}
h2 {
	color: #72A825;
	font: bold 220% 'trebuchet ms',verdana, sans-serif;
}
h3 {
    color: #5D6FB1;
    font: bold 180% 'trebuchet ms',verdana, sans-serif;
}
    #sidebar h3 {
    	color: #D1C142;
    	font: bold 220%/100% 'trebuchet ms',verdana, sans-serif;
		margin: 20px 0 0 0;
    }

h4 {
    color: #5D6FB1;
    font: bold 100% 'trebuchet ms',verdana, sans-serif;
}

#content p {font-size: 110%;}
    p#intro {font-size: 120%; margin:0 0 20px 0;}
    #footer p {
        display: inline;
    	font-size: 90%;
    	color: #B3B3B3;
    	margin: 0;
    	padding-left: 30px;
    }

a {color: #333;}
a:hover {
    color: #fff;
    background-color: #E75F61;
    text-decoration: none;
}
a:active, a:focus {outline: none;}

a img {
	display: block;
	border: none;
}
a:hover img {
	background-color: none;
	margin: 0;
	padding: 0;
}

acronym, abbr {
    cursor: help;
    border-bottom: 1px dashed #777;
}

#content_wrapper blockquote {
	background: transparent url(i/quote_left.gif) 0 0 no-repeat;
	margin: 0;
}
#content_wrapper blockquote p {
	font: italic 110%/140% 'trebuchet ms',verdana, sans-serif;
	color: #555;
	background: transparent url(i/quote_right.gif) right bottom no-repeat;
}

.pink {color: #E75F61;}

#sidebar {color: #827B2B;}

#sidebar ul {
    list-style-type: none;
    margin: 15px 0;
    padding: 0;
}
    #sidebar ul li {
        background: transparent url(./i/bullet_yellow.gif) 0 2px no-repeat;
        padding-left: 15px;
        margin: 0;
    }

ul.checklist, #content ul {
    font-size: 110%;
    line-height: 180%;
}
#content ul {
	list-style-image: url(./i/star.gif);
	line-height: 120%;
}
#content ul li {
	margin-bottom: 10px;
}
#content ul.checklist {
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding-left: 10px;
}
    #content ul.checklist li {
        background: #fff url(./i/tick.gif) 0 50% no-repeat;
        padding-left: 25px;
    }

#b_about blockquote {
	float: right;
	width: 300px;
	margin: 0 20px;
}

#b_about blockquote.nofloat {
	float: none;
	width: auto;
	margin: 0 20px;
}

#b_about blockquote p {
	font-family:  Georgia, "Times New Roman", Times, serif;
	font-size: 140%;
	color: #888;
	margin-left: 40px;
}
#b_about blockquote p strong {
	font: bold 60% 'trebuchet ms',verdana, sans-serif;;
	color: #777;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Main Navigation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#navigation ul {
	position: relative;
	top:0;
	right:0;
	height: 17px;
	width: 397px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navigation ul li {
	float: left;
	margin: 0;
	padding: 0;
}
#navigation ul li a {
	display: block;
	height: 17px;
	margin: 0 10px;
	padding: 0;
}

#navigation ul li#n_home a {
	width: 42px;
	background: transparent url(./i/n/n_home.gif) top left no-repeat;
}
#navigation ul li#n_about a {
	width: 43px;
	background: transparent url(./i/n/n_about.gif) top left no-repeat;
}
#navigation ul li#n_portfolio a {
	width: 60px;
	background: transparent url(./i/n/n_portfolio.gif) top left no-repeat;
}
#navigation ul li#n_services a {
	width: 58px;
	background: transparent url(./i/n/n_services.gif) top left no-repeat;
}
#navigation ul li#n_work a {
	width: 94px;
	background: transparent url(./i/n/n_work.gif) top left no-repeat;
}

#navigation ul li#n_home a:hover,
#navigation ul li#n_about a:hover,
#navigation ul li#n_services a:hover,
#navigation ul li#n_portfolio a:hover,
#navigation ul li#n_work a:hover {background-position: bottom left;}

#b_index #navigation ul li#n_home a,
#b_about #navigation ul li#n_about a,
#b_services #navigation ul li#n_services a,
#b_portfolio #navigation ul li#n_portfolio a,
#b_work #navigation ul li#n_work a {background-position: 0 -18px;}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Footer Navigation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#footer ul {
    display: inline;
    list-style-type: none;
    margin-left: 30px;
    padding: 0;
}
    #footer ul li {
        display: inline;
    }
        

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    "Portfolio" Section
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.foliowrap {
    float: left;
    width: 100%;
    margin: 0 0 40px 0;
}

div.folioitem {
    float: left;
    width: 100px;
    height: 150px;
    text-align: center;
    margin: 20px 10px;
    padding: 0;
    overflow: hidden; /*Fixes IE's float drop glitch */
}

div.folioitem a img {border: none; margin: 0; padding: 0;}
div.folioitem a {
    height: 100px;
    width: 100px;
    margin: 0;
    padding: 0;
}
div.folioitem a:hover {background: none;}


/* ----Reflection images for portfolio items---- */

div.folioitem#bahmboologo {background: transparent url(./i/portfolio/bahmboologo_reflect.jpg) 0 100px no-repeat;}
div.folioitem#bcc {background: transparent url(./i/portfolio/bcc_reflect.jpg) 0 100px no-repeat;}
div.folioitem#capecod {background: transparent url(./i/portfolio/capecod_reflect.jpg) 0 100px no-repeat;}
div.folioitem#browserquirks {background: transparent url(./i/portfolio/browserquirks_reflect.jpg) 0 100px no-repeat;}
div.folioitem#netprofitdesign {background: transparent url(./i/portfolio/netprofitdesign_reflect.jpg) 0 100px no-repeat;}
div.folioitem#rouxhomes {background: transparent url(./i/portfolio/rouxhomes_reflect.jpg) 0 100px no-repeat;}
div.folioitem#signaturemortgage {background: transparent url(./i/portfolio/signaturemortgage_reflect.jpg) 0 100px no-repeat;}
div.folioitem#crisisid {background: transparent url(./i/portfolio/crisisid_reflect.jpg) 0 100px no-repeat;}
div.folioitem#liquidglass {background: transparent url(./i/portfolio/bcccard_reflect.jpg) 0 100px no-repeat;}
div.folioitem#fitbrains {background: transparent url(./i/portfolio/fitbrains_reflect.jpg) 0 100px no-repeat;}
div.folioitem#bcccard{background: transparent url(./i/portfolio/bcccard_reflect.jpg) 0 100px no-repeat;}
div.folioitem#digitalabby {background: transparent url(./i/portfolio/digitalabby_reflect.jpg) 0 100px no-repeat;}
div.folioitem#simonfox {background: transparent url(./i/portfolio/simonfox_reflect.jpg) 0 100px no-repeat;}
div.folioitem#limewheelcard {background: transparent url(./i/portfolio/limewheelcard_reflect.jpg) 0 100px no-repeat;}
div.folioitem#camwood {background: transparent url(./i/portfolio/camwood_reflect.jpg) 0 100px no-repeat;}
div.folioitem#camwoodcard {background: transparent url(./i/portfolio/camwoodcard_reflect.jpg) 0 100px no-repeat;}
div.folioitem#cl{background: transparent url(./i/portfolio/cl_reflect.jpg) 0 100px no-repeat;}
div.folioitem#coastal {background: transparent url(./i/portfolio/coastal_reflect.jpg) 0 100px no-repeat;}
div.folioitem#missionchamber {background: transparent url(./i/portfolio/missionchamber_reflect.jpg) 0 100px no-repeat;}
div.folioitem#bullquest {background: transparent url(./i/portfolio/bullquest_reflect.jpg) 0 100px no-repeat;}
div.folioitem#atcreadback {background: transparent url(./i/portfolio/atcreadback_reflect.jpg) 0 100px no-repeat;}
div.folioitem#oursubdashboard {background: transparent url(./i/portfolio/oursubdashboard_reflect.jpg) 0 100px no-repeat;}
div.folioitem#oursubaddress {background: transparent url(./i/portfolio/oursubaddress_reflect.jpg) 0 100px no-repeat;}
div.folioitem#ufcw {background: transparent url(./i/portfolio/ufcw_reflect.jpg) 0 100px no-repeat;}
div.folioitem#wikispaces {background: transparent url(./i/portfolio/wikispaces_reflect.jpg) 0 100px no-repeat;}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Contact Form
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div#contactwrapper {
    width: 100%;
    margin: 40px 0 0 0;
}

fieldset {
    padding: 5%;
}

fieldset legend {
    color: #5D6FB1;
    font: bold 180% 'trebuchet ms',verdana, sans-serif;
}

form dl dd input, form dl dd textarea {
    width: 75%;
}

form input:focus, form dl dd textarea:focus {
    border: 2px solid #28507B;
}

input.formbutton {
    height: auto;
    width: 75%;
    background-color: #28507B;
    border: 2px solid #5D6FB1;
    color: #fff;
    font: bold 100% 'trebuchet ms',verdana, sans-serif;
    padding: 5px;
}

    input.formbutton:active {
        border: 2px solid #28507B;
        background-color: #5D6FB1;
    }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Misc. Items
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/*Add elements that need image replacement here */
#navigation ul li a,
#header,
#header p,
h1#branding a, h1#branding {
    letter-spacing: -99999em;
    text-indent: -99999em;
    overflow: hidden;
 }


dl {font-size: 110%;}
dl dt {
    color: #555;
    font-weight: bold;
}
dl dd { margin: 0 0 20px 0 ;}