/*
Theme Name:CarbonGraffiti 2010 v2
Theme URI:http://www.carbongraffiti.com
Description:CarbonGraffiti.com
Author:Jon Aizlewood
Author URI:http://carbongraffiti.com

*/

/* TOC
1.  Reset
2.  Global Elements
3.  Links
4.  Typography
5.  Layout
6.  Homepage
7.  Services page
8.  Work pages
9.  Articles + affiliated
10. About page
11. Contact page
12. Footer
13. Miscellaneous
14. Media queries/responsive

*/

/******************* CSS Reset (by Eric Meyer)*******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent}
body{line-height:1}
ol, ul{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none}
/* remember to define focus styles! */
:focus{outline:0}
/* remember to highlight inserts somehow! */
ins{text-decoration:none}
del{text-decoration:line-through}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse; border-spacing:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }


/******************* Global Elements ****************/
body { background:url(images/speckle.gif) #fefefe; background-attachment: fixed; color:#444; text-shadow: rgba(0,0,0,.01) 0 0 1px;}
html>body{ font: 13.5px/1.8 "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;}
/*html>body {font: 14px/1.8 "Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size-adjust:0.488; font-weight:200; font-style:normal;}*/


/******************* Links **************************/
a:link, a:active, a:visited { color:#548AA9; font-weight:bold; text-decoration:none;}
a:hover { color:#F5104B; padding-bottom:0px; border-bottom:0px solid #eee; background:#f9f9f9;}

a.shopwindow { color:#548AA9; font-weight:normal;}
a.shopwindow:hover { color:#EB0050; background:none; border:0px;}

a.cta { font-weight:normal; font-weight:bold; padding:3px 6px 3px 0px; border-bottom: 1px solid #ddd;}
a.cta:hover {  border-bottom: 1px solid #ccc;}

a.ctashopwindow { font-weight:normal; font-weight:bold; padding:3px 6px 3px 0px; color: #eee; border-bottom: 2px solid #eee;}
a.ctashopwindow:hover { background: none; color:#EB0050; border-bottom: 1px solid #ccc;}

a.ctabig { font-weight:normal; font-weight:bold; padding:3px 6px; background-color:#eee; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-bottom: 1px solid #ddd;}
a.ctabig:hover {  border-bottom: 1px solid #ccc;}

a.more-link { margin-top:15px; clear:both; float:right; background:#EFEFEF !important; font-weight:bold; padding:3px 6px;-moz-border-radius:3px; -webkit-border-radius:3px;}
a:hover.more-link { border:0px; -moz-border-radius:3px; -webkit-border-radius:3px;}
a.archives { font-weight: normal; color: #999; padding-left: 10px;}
a.work-templates { border: none; padding: 0 0 0 40px;}


/******************* Typography *********************/
h1{ font-size:38px; font-weight: bold; line-height:44px; margin-bottom:22px;}
h2{ font-size:28px; border-bottom:1px dotted #ddd; padding-bottom: 5px; margin: 0 0px 26px 5px; letter-spacing:-0.02em; clear: both; line-height: 32px; font-weight: bold;}
h3 { font-size:22px; color: #04365B; border-bottom:1px dotted #ddd; margin: 0 5px 26px 0px; padding:10px; letter-spacing: -0.04em; line-height: 26px; font-weight: bold; clear: both;}
h3.metainfo { font-size:20px; font-style:italic; border-bottom:1px solid #999; font-weight:normal; padding-bottom:10px;}
h4{ font-size:16px; margin: 0 5px 26px 5px; font-weight: normal; clear: both;}
h5{ font-size:14px; clear: both;}
h6 { font-size:10px;}

/*** Nevis Font Face ***/
@font-face { font-family: 'nevisBold'; src: url('fonts/nevis-webfont.eot'); src: local('☺'), url('fonts/nevis-webfont.woff') format('woff'), url('fonts/nevis-webfont.ttf') format('truetype'), url('fonts/nevis-webfont.svg#webfontrdfluN71') format('svg'); font-weight: normal; font-style: normal;}

p { margin: 0 5px 26px 5px; padding-right: 15px; text-align: justify;}
ul, li { list-style-type: none !important;}
/*li:nth-child(2n+2) { color: #111; background: #e1e1e1; text-shadow: rgba(255,255,255,0.9) 0 0 1px;}*/
ul, ol { margin-left:10px;}
ul li{ list-style-type:disc; margin-left:10px; margin-bottom:10px; padding-right: 15px;}
ul li li { list-style-type:square; margin-left:20px;}
ul li li li { list-style-type:circle; margin-left:30px;}
ol li { list-style-type:decimal; margin-left:10px;}
ol li li { list-style-type:lower-alpha; margin-left:20px;}
ol li li li { list-style-type:lower-roman; margin-left:30px;}
span { font-family: Baskerville, Georgia, Times, "Times New Roman", cursive, serif; font-weight: normal; font-style:italic; letter-spacing:0.02em; color: #999; font-variant: normal; text-transform:capitalize;}
span.list { font-weight:bold; font-family: Helvetica, Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: -0.04em; font-style: normal; color:#0A335D;}
span.light { font-family: 'nevisBold', Helvetica Neue, Helvetica, Arial, sans-serif; letter-spacing: -0.04em; font-style: normal;text-transform: uppercase; text-shadow: none}
span.skills { font-family: arial; color: #666; position: relative; top: -2px; font-style: normal; font-weight: normal; font-size: 10px; margin-left: 4px; padding: 3px 4px 3px 4px; background: #eee; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: #999 0 1px 1px;}
.quote {}
img {max-width: 100%;}
acronym, abbr{ border-bottom:1px dotted #999; cursor:help;}
p.big { font-size:150%;}
p.emphasis { font-size: 130%; letter-spacing: -0.03em; font-style: italic; font-family: georgia; line-height: 1.5;}
p q { font-style:italic; font-family:Georgia, "Times New Roman", Times, serif;}
p sub { font-size:9px; vertical-align:sub;}
p sup { font-size:9px; vertical-align:super;}
p var { font-weight:bold;}
p.nocomments { font-family:Georgia, "Times New Roman", Times, serif; letter-spacing:0.5em; word-spacing:1em; font-style:italic;}
dl, dt, dd { font-size:90%;}
ins {font-family:"Courier New", Courier, monospace; letter-spacing:-0.03em; font-style:italic;}
p object { margin-left:30px;}
.anchor { padding-top: 60px;}
.right { float: right; margin-right: -35px;}


/******************* Layout *************************/


/*-----------Columns/Grid--------------*/
#wrapper {width:100%; }
#page {width: 93.75%; margin:0 auto; clear: both;  max-width: 1280px !important;}
#contentfull { margin-top: 7.5%;}
#contentfullhome { margin-top: 1.5%;}

.first{margin-left:1% !important;}
.cols { margin: 0px 0 0 2px; text-shadow: #fff 0px 1px 0px;} /* main column container class */
.col {float:left;display:inline;width:48%;margin-left:3%; margin-top:4px; position:relative; 
/* 2 equal width columns layout - default */}	
.cols3 .col{width:30%;margin-left:4%; position:relative;} /* 3 equal width columns layout */
.cols4 .col{width:22%;margin-left:3%;} /* 4 equal width columns layout */
.cols6 .col{ width:14.2%; margin-left:2.6%;} /* 6 equal width columns layout */


/*-----------Column Options--------------*/
/* left short + right long */
.left1 {margin-left:1% !important; width:20%; text-align:right;}
.al { text-align:left;}
.left1 li {list-style-type:none !important; margin:0px 0px !important;}
.right3 { margin-left:7%; width:71%; /*-moz-column-count: 2; -moz-column-gap: 1.5em; -webkit-column-count: 2; -webkit-column-gap: 1.5em;*/} 
.hardright3 { margin-left:26%; width:73%;} 
/*left long + right short */
.left3 {margin-left:1% !important; width:69%; border-right: 1px dotted #ddd;} 
.right1 {margin-left:6%; width:23%; margin-top: 10px;}
/*left long home + right short home */
.left3long {margin-left:1% !important; width:66%; } 
.right1long {margin-left:3.2%; width:27%; margin-top: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px; }
/*left4 + right2 */
.left4 {margin-left:1% !important; width:31.4%;}
.right2 {margin-left:2%; width:64.8%; min-height:400px;}
/*left2 + right4 */
.left2 {margin-left:1% !important; width:64.5%; min-height:400px; border-right: 1px dotted #ddd;}
.right4 {margin-left:0%; width:34%;}
/*left2 + right4 SMALL*/
.left2sm {margin-left:1% !important; width:64.8%;}
.right4sm {margin-left:2%; width:31.3%;}

.bigger { font-size:15px}
.col1, .col2, .col3{float:left;display:inline;}
.nocol { margin-top: 51px; border-top: 1px dotted #ddd;}


/*-----------Main Nav--------------*/
h1.headernav{ font-size:16px; text-indent:-1000em; overflow:hidden;}
#navwrap { width:100%; margin:0 auto; background: #0A335D; border-bottom: 1px solid #000; -moz-box-shadow:rgba(0,0,0,0.3) 0px 3px 5px; -webkit-box-shadow:rgba(0,0,0,0.3) 0px 3px 5px; position: fixed; z-index: 99;}
ul#nav { width: 76%; max-width: 1280px !important; height: auto;  margin: 0 auto; letter-spacing: 0; }
ul#nav li#logo { width:16%; height:37px;  margin-right: 23%; z-index: 999; }
ul#nav li#logo a { display:block; width:141px; height:51px; background:url(images/logo-sm.png) 0 0 no-repeat; padding: 0; border: none !important;}
ul#nav li#logo a:hover {border:0px; background-position:0px -51px;}
ul#nav li {float:left; margin:0 1%; width: 10%; padding: 0px; font-size: 100%; text-align: center;}
ul#nav li span { display: block; margin-top: -5px; font-size: 9px; font-style: normal; font-family: inherit; text-align: center; text-shadow: #000 0 1px 0; color: #ddd;}
ul#nav li#active a {color:#fff; background: url(images/nav-hi.png) bottom center no-repeat;}
ul#nav li#active a span { color: #fff; text-shadow: #000 0 1px 0;}
ul#nav li a { color:#ddd; padding: 5px; display: block; text-shadow: #000 0px 1px 1px; border: 1px dotted #0A335D; border-width: 0 1px 0 1px;}
ul#nav li a:active { margin-top:0px;}
ul#nav li a:hover { background: url(images/nav-hi.png) bottom center no-repeat; color:#fff; padding: 5px; border: 1px dotted #1c4c7c; border-width: 0 1px 0 1px; -webkit-transition: color .3s linear;}

a.ctashopwindow { -webkit-transition: color .2s linear; }

#headwrappersmall { width:100%; height:0px; overflow: hidden; background:url(images/dark-speckle4.gif) top center repeat-x #025792; border-bottom: 1px solid #fff;}
#headersmall {width:960px; height:80px; margin:0 auto; color:#fff; text-align:left; /*background: url(images/mainheader_glow.png) top center no-repeat;*/}
#sidebar {width:28%; margin-left:70%}


/*--------------Homepage header ----------*/
#headwrapper {  width:100%; max-width: 1920px; padding-top: 60px; background:url(images/dark-speckle4.gif) top left repeat #025792; overflow: hidden; position: relative; z-index: 0; border-bottom: 1px solid #000;}
#headerbig { width: 100%; background: url(images/mainheader_glow.png) bottom center no-repeat; position: relative; z-index: 0;} 
#homewindow { width: 100%; margin:0 auto; color:#fff; }
#centered { width: 100%; min-height: 240px; margin: 0 auto; padding: 10px; text-align: center;}

h1.shopwindow {font-size:3.5em; line-height:1.8; margin:1.5% 10%; font-family: 'nevisBold', Helvetica Neue, Helvetica, Arial, sans-serif; letter-spacing:-0.04em; color:#fff; text-transform: uppercase; text-shadow: #000 0px 2px 4px; text-shadow: rgba(0,0,0,0.4) 0px 2px 4px; position: relative; z-index: 5;}

h2.shopwindow { font-size:24px; color: #fff; margin-top:10px !important; font-variant: normal; font-weight:normal; border:0px; line-height:190%; text-shadow:#111 0px 1px 4px; position: relative; z-index: 4;}
h2.shopwindow span { font-size: 30px; font-family: Baskerville, Georgia, Times, "Times New Roman", cursive, serif; font-weight: normal; font-style:italic; letter-spacing:0.02em; color: #ddd; font-variant: normal;}

#homewindow .venn1 { background: #051933; background: rgba(5,25,51,0.3); border: 1px solid #fff; border: 1px solid rgba(255,255,255,0.3);  border-radius: 600px; -moz-border-radius: 600px; -webkit-border-radius: 600px; position: absolute; top: 55%; left: 45%; width: 450px; height: 450px; z-index: 3;}
#homewindow .venn2 {background: #051933; background: rgba(5,25,51,0.5); border: 1px solid #fff; border: 1px solid rgba(255,255,255,0.5); -moz-border-radius: 600px; -webkit-border-radius: 600px; position: absolute; top: 55%; right: 45%; width: 450px; height: 450px; z-index: 3;}

a.homecta { letter-spacing: -0.05em; background-color:rgba(5,21,42,0.4) !important;  color:#fff; padding:5px 11px 8px 11px; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;-moz-box-shadow: inset #000 0px 1px 0px; -webkit-box-shadow: inset #000 0px 1px 0px; white-space:nowrap;}
a.homecta:hover { color:#EB0050; -moz-border-radius:5px; -webkit-border-radius:5px;-moz-box-shadow: inset #000 0px 1px 0px; -webkit-box-shadow: inset #000 0px 1px 0px;}

a.homecta { -webkit-transition: background .6s linear; }
a.homecta:hover { -webkit-transition: color .3s linear;}

/******************* Homepage ***********************/
.homebutton h3, .homebutton p { padding: 10px;}
.homebutton a { display: block; background: #efefef; text-align: center; border-bottom: 1px solid #ccc; -moz-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 2px;}
.homebutton a:hover { background: #e9e9e9; border-bottom: 1px solid #ccc;}

blockquote.home { float:left; clear: none; position:relative; color:#3c657c; padding:10px 0px 5px 0px; margin: 0px 0px 40px 20px; width: 87%; font-style: italic; font-size:110%; line-height:150%; background: url(images/quote-light.gif) top left no-repeat #ebebeb; background: url(images/quote-light.gif) top left no-repeat rgba(235, 235, 235, 0.5) !important; border:3px solid #ddd !important; text-align:left;-moz-border-radius:4px; -webkit-border-radius:4px; border: 1px solid #ddd}
blockquote.home p { padding:0 10px 0 20px;}
cite.home{padding: 0 0 0 0; font-size:11px; position:absolute; bottom:-10px; right:10px;}
cite.home a { font-weight:normal; background:#dedede; text-transform:capitalize; font-style:normal; padding:5px 10px;-moz-border-radius:3px; -webkit-border-radius:3px;}
 
.homeintro {letter-spacing: -0.03em; padding-right: 25px; margin: 0 0 10px 0px;}
p.homeintro { padding-top: 3px !important;}

ul.svcs { float:left; width: 93.75%; margin:3px 0px 3px 10px !important;}
ul.svcs li { font-size: 13px; font-size: 100%; list-style-type: none !important; border-bottom: 1px solid #ddd; padding: 0 8px 10px 5px !important; margin: 0 0 19px 10px !important; list-style-type: none; line-height: 2;}	
ul.svcs li span { padding: 4px 6px; font-style: normal; color: #666; font-family: inherit; font-size: 13px; background: #e8f6ff; text-transform: inherit;}
ul.svcs li span strong { color: #333;}

ul.servicelistsm li.home { width: 26.5%; font-size: 100%; margin: 0px 0px 0px 15px; padding: 5px 5px 5px 25px; font-style: normal; background: url(images/tick_small.png) 2% 55% no-repeat;}

#display-home { clear: both; margin: 0; margin-top: 50px; width: 100%;}
#display-home h3 { position: absolute; top: -46px; left: 0px; width: 97.5%}

#viewport{ float: right; max-width: 100%; height: 300px; overflow:hidden; }
#viewport ul {position: relative; padding: 0; height: 300px;}
#viewport li { float: left; margin: 0; padding: 0; border-right: 1px dotted #ddd; list-style-type: none !important; text-align: center;}
#viewport li h4 { color: #999; font-weight: bold; margin-top: 10px; padding: 0 10px}
#viewport li img { margin: 20px 50px 10px 50px; padding: 0; border: 1px solid #ddd; background: url(images/boxpatternbg.gif); }
#viewport li a img {border: 1px solid #ddd;}
#viewport li a:hover img {border: 1px solid #999;}
.cover { position: absolute; top: 0; right: 0; width: 100px; height: 300px; background: url(images/cover.png) 100% 1px no-repeat; z-index: 98;}

.paging-home {position: absolute; top: -40px; right: 30px;}
.paging-home a { font-weight: bold; font-size: 160%; padding: 0 5px; cursor: pointer;}

.availability a { display: block; text-align: center; margin:5px 0 0 60px; width: 549px; padding: 5px 0; background: #ececec; border: 1px solid #ddd; text-shadow: none; color: #777; -moz-border-radius: 4px; -webkit-border-radius: 4px; word-spacing: 0.2em;}
.availability a:hover { background: #eee;}



/******************* Services page ******************/
h3.light { color: #999;}
.moustache { margin-top: -10px; background:url(images/venn-services.gif) center no-repeat; height:300px;}
.moustache .first { width: 40%; float: left;}
.moustache .right { width: 40%; float: right;}
.moustache .first h2, .moustache .first p { padding: 0; padding-left: 20px; margin-right: 30px; text-align: right;}
.moustache .right h2, .moustache .right p { padding: 0; padding-right: 20px; margin-left: 30px; text-align: left;}

h2.designtitle {background: url(images/svcs-designtitle.gif) top left no-repeat; text-align: left; padding-left: 70px;}
h2.mktgtitle { background: url(images/svcs-mktgtitle.gif) top right no-repeat; text-align: right; padding-right: 70px;}
h2.processtitle { margin-bottom: 46px;}
h4.additional{margin-left: 20px;}

.svcsleft p.intro, .svcsright p.intro, .svcslast p.intro { font-size: 110%; font-weight: bold; margin-top: 20px; padding-bottom: 20px; padding-right: 60px; border-bottom: 1px dotted #ccc;}
.svcsright p.intro { padding-right: 20px; padding-left: 40px !important;}

.svcsleft { clear: both; margin: 2% 0 2% 2%; float: left; width:95%; }
.svcslast { clear: both; margin: 2%; float: left; width:95%;}
.svcsleft .inner, 
.svcslast .inner { width: 60%; float: left; border-right: 1px dotted #ddd;}

img.svcs { margin: 0 5px 10px 5px !important;}

.additional { width: 35%; margin-top: 0; float: right; }
.additional ul li { border-bottom: 1px dotted #ddd; font-size: 100%; color: #666;}
.additional_alt { width: 33.5%; margin-top: 1.5%; float: left;}
.additional_alt ul li { direction: rtl; padding-right: 0; border-bottom: 1px dotted #ddd; font-size: 100%; color: #666;}

.svcsright { clear: both; margin: 2%; text-align: right; float: right; width:95%;}
.svcsright .inner { width: 60%; float: right; border-left: 1px dotted #ddd;}
.svcsright .inner p { padding-left: 15px;}

.svcsbreakdown { margin-bottom: 26px; margin-left: 2px; font-family: inherit; clear: both; height: 100%; width: 93.75%;  overflow: hidden;}
.svcsbreakdown.alt {}
.svcsbreakdown h4 { padding: 10px 20px;}
.svcsbreakdown h4 a { font-weight: normal;}
ul.servicelist li { list-style-type:none !important; text-align: justify; float:left; width:20.5%; min-height:150px; margin:0 10px 20px 20px; padding:20px 0; border-bottom:5px solid #eee;}
ul.servicelist li:hover { cursor:default; border-bottom:5px solid #ddd;}

ul.servicelist li h3 { color: #999; border-bottom: 5px solid #ddd; }
ul.servicelistsm { margin-left: 15px; }
ul.servicelistsm li { list-style-type:none !important; background: url(images/tick_small.png) 0% 65% no-repeat; float:left; width:21%; height:auto; margin:-10px 10px 26px 10px; padding:0 0 0 15px; border-bottom: 1px dotted #ddd; }

.righted { text-align:right;}
#process1 { width:100%; height:600px;}
#process1 img.processleft { border: none; padding: 2px; float: left;}
#process1 img.processright { border: none; padding: 2px; float: right;}

		.breadcrumb { 
			list-style: none !important; 
			overflow: hidden; 
			font: 14px Helvetica, Arial, Sans-Serif;
			height: 5emm
			
		}
		.breadcrumb li { 
			float: left;
			margin: 0;
			padding: 0;
			line-height: 2.3em;
			padding-left: .75em;
			width: 15em;
		}
		.breadcrumb li a {
			color: white;
			text-decoration: none; 
			padding:1em;
			display: block;
			text-shadow: none;
			background:url(images/crumbs.gif) no-repeat right center;		
		}


		.breadcrumb li:nth-child(2) a       { background:  url(images/crumbs.gif) no-repeat right center      #94284F; }
		.breadcrumb li:nth-child(2) a:after { border-left-color: #94284F; }
		.breadcrumb li:nth-child(3) a       { background:  url(images/crumbs.gif) no-repeat right center      #C92852; }
		.breadcrumb li:nth-child(3) a:after { border-left-color: #C92852; }
		.breadcrumb li:nth-child(4) a       { background:  url(images/crumbs.gif) no-repeat right center      #282846; }
		.breadcrumb li:nth-child(4) a:after { border-left-color: #282846; }
		.breadcrumb li:nth-child(5) a       { background:  url(images/crumbs.gif) no-repeat right center      #FE2857; }
		.breadcrumb li:nth-child(5) a:after { border-left-color: #FE2857; }

		.breadcrumb li a:hover { background: #0A335D; }
		.breadcrumb li a:hover:after { border-left-color: #0A335D !important; }

#service-cycle { background: url(images/circle-diagram.gif) center no-repeat; width: 95%; position: relative}
#service-cycle div { display: block; float: left; padding: 5px; font-family: georgia; font-style: italic; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(images/tipsy.gif); background-position: right center; }
#service-cycle div:hover { color: #fff; opacity: 1; filter: alpha(opacity=100);  cursor: pointer;}
#service-cycle .process-inner { padding: 10px 15px; background-color: black; color: white; text-shadow: none; max-width: 220px; text-align: center; -moz-border-radius:3px; -webkit-border-radius:3px;}

.collective { clear:both; margin:30px auto; background:#f9f9f9; border:1px solid #efefef; text-align:right; padding:10px;}
.collective h4 {padding-right:10px;}


/******************* Work pages *********************/
.client_thumb { background:#efefef; width:211px; height:100px;}
h4.work { margin-bottom: 5px; border-bottom: 1px solid #ccc;}
h4.work a { margin-bottom:0px; border:none; font-weight: bold;}
#detailslist ul li {list-style-image: url(images/work/checkmark.gif); list-style-type:disc; padding-left: 0px; margin-left:40px;}
.worktimeline { height: 100%; clear: both;}
.worktimeline h4, .worktimeline p {text-align: left; clear: both;}
.worktimeline img { margin-left: 0 !important; padding: 0 !important;}
#portfolio p { margin-bottom: 32px;}

p#jumpnav {margin-top: -10px; padding: 5px 0; font-size: 100%; text-align: left; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #eee; padding: 5px 15px; font-weight: bold;}
p#jumpnav a { font-weight: bold; padding: 4px; color: #999; font-size: 90%;}
p#jumpnav a:hover { background: none; color: #0A335D;}

#display { margin-top: 14px;}
.main_view { width:700px;height:675px; background: url(images/ajax-loader.gif) center no-repeat; float:right; padding:0; margin:0; margin-right: 5%; position: relative;}
.window { width:700px;height:675px;  overflow:hidden;position:relative; -moz-box-shadow:#999 0px 1px 2px; -webkit-box-shadow:#999 0px 1px 2px;}
.image_reel {position:absolute;top:55px;left:0;}
.image_reel a { position:relative;float:left;cursor:pointer;}
.image_reel img {float:left;}
.image_reel a span { width:700px;height:600px;width:float:left;background:#111; position:absolute;z-index:10;top:0;left: 0;}

.browser-top { background: url(images/browser-top.gif) top center no-repeat; position: absolute; top: 0; left: 0; width: 700px; height: 55px; z-index: 98; position: relative;}
.browser-top span { position: absolute; top: 28px; left: 165px; font-style: normal; font-family: arial; color: #000; font-size: 10px;}
.browser-bottom { background: url(images/browser-bottom.gif) top center no-repeat; position: absolute; bottom: 0; left: 0; width: 700px; height: 20px; z-index: 98;}

.paging { position: absolute; top:-68px;right:20px;display: none; width:178px; z-index:98;text-align:right;line-height:50px;}
.paging a { ; margin: 0px; text-decoration: none; color: #ddd; font-size: 3em; line-height: 1;}
.paging a.active {  font-weight: bold; color: #0075b1; border: none; }
.paging a:hover { font-weight: bold; color: #F5104B; border:none; background: none;}

.details { margin-top: 29px; min-height: 700px;}
.details h3 { color: #666; font-weight: bold; letter-spacing: -0.03em;}
.details span.small { font-style: normal; font-family: inherit; font-size: 45%;}
.details span.small a { font-weight: normal; background: #fffff0; padding: 3px; border: 1px dotted #eee;}
.details p { font-size: 13px; margin-left: 20px;}

.legend {overflow: hidden; padding: 10px 0; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.legend p { margin: 5px 15px 0px 15px; clear: both; border-top: 1px dotted #ddd; color: #fff; text-shadow: #000 0 1px 0;}
.legend p.noborder {border-top: none;}

.legend ul { clear:both; margin: 0 0 0 10px;}
.legend li { background:#fff; width:11%; height:5%; margin:3px 6px; margin-bottom: 14px; float:left; display:inline; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: #000 0px 1px 2px; -webkit-box-shadow: #000 0px 1px 2px;}
.legend li a { display:block; text-decoration:none; text-shadow: none; width:39px; height:15px;}
.legend li a:hover { background:#F5104B; -moz-border-radius: 2px; -webkit-border-radius: 2px; border: none; padding: 0;-moz-box-shadow: #555 0px 1px 3px; -webkit-box-shadow: #555 0px 1px 3px;}
.legend li.current { background:#F5104B;}
.legend li.contact { background:#0D3169;}
.legend li.stretch { width:80%; background: #000; height:20px; text-align:center;}
.legend li.stretch span {font-size:70%; padding-top:-4px; font-style: normal;}
.legend li.stretch a {width:110%; height:20px; display:block; color:#fff;}
.legend ul.last { border-top: 1px solid #ccc; padding-top: 10px;}


#fade{display:none; position:fixed; left:0; top:0; width:100%; height:100%; opacity:.80; z-index:9999}
.popup_block{display:none; background: url(images/dark-speckle4.gif) 0px 0px #025792; padding:20px; border:10px solid #fff; float:left; font-size:1.2em; position:fixed; top:50%; left:75%; z-index:99999; -webkit-box-shadow:0px 0px 20px #000; -moz-box-shadow:0px 0px 20px #000; box-shadow:0px 0px 20px #000; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px}
a.close{float:right; color: #000; margin:-45px -45px 0 0; font-size: 70px; line-height: 0.5;}
a.close:hover { background: none; border: none;}

.navigation-sidebar { margin-top: -14px; margin-bottom: 20px;}
.navigation-sidebar p { margin: 0; padding: 8px; border-bottom: 1px dotted #ddd; font-size: 90%; text-align: left; }
.navigation-sidebar a { margin: 0 0 10px 0px; padding: 1px 3px;}

.worktimeline a:hover { padding: 0px; border-bottom: none;}
img.workthumb { border:5px solid #ddd !important; padding: 0px !important; -moz-box-shadow:#999 0px 1px 2px; -webkit-box-shadow:#999 0px 1px 2px; }
a img.workthumb { background: none !important; margin-bottom: 10px;}
a:hover img.workthumb { border:5px solid #eee !important; padding: 0px !important; margin-bottom: 10px !important;}

a.homecta { -webkit-transition: background .6s linear; }
a:hover img.workthumb { -webkit-transition: border .3s linear;}

p.work-testi { background: url(images/quotemark.gif) top left no-repeat; padding: 20px 10px; line-height: 1.4; font-size: 90%; font-family: georgia, times, "times new roman", serif;}
p.workcta {  background: url(images/dark-speckle4.gif) 0px 0px #025792; padding: 5px 10px;  -moz-border-radius: 5px; -webkit-border-radius: 5px;}




/******************* Articles + affiliated **********/


/*-------------The Post-------------*/
h2.blog-title { padding: 14px 0 0 0; margin: 0 12px;}
h2 a:hover, h2 a:visited, h2 a {text-decoration:none; font-weight: bold !important;}
.post{ padding:10px 0px; text-align:left; position: relative;}
.entrytext { text-align: left;}
.post h2 a { font-weight: bold;}
small { font-size:85%; line-height: 20px;}
.post ul, .post li { list-style-type: disc !important;}
.post ul { margin-bottom: 35px}
.post ul ul { margin-bottom: 8px;}
p.author { margin:0; padding:0; font-size:85%;}
p.postmetadata{ margin:10px 0 0 20px; padding:0; font-size:85%; text-align: left;}
p.postmetadata span { font-size:150%; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; position:relative; top:1px;}
p.postmetadata a, p.postmetadata a:hover { border:0px; font-weight:normal;}
p.postmetadata span { background-color: #fffff0; color: #666; font-family: arial; font-style: normal; font-size: 11px; padding: 0 3px; border: 1px solid #fffedf; border-width:1px 0 1px 0;}
p.postmetadata span.cats { background: #ecfbff; border-color: #e1f9ff; font-size: 11px;}
p.postmetadata span.comments a { background:#ddd; color: #999; -moz-border-radius: 10px 10px 0px 10px; -webkit-border-radius: 10px; -webkit-border-bottom-right-radius:0px; padding:5px 8px; text-shadow: none;}
p.postmetadata span.comments a:hover { background: #EA0D46; color: #fff;}
p.postmetadata.line { border-top:1px dotted #ddd; margin-top:10px; padding-top:5px;}
p.postmetadata a{ text-decoration:none;}
.col span.comments, .left1 span.comments { padding:1px 0px; margin:0px; font-family: arial; font-style: normal;}
.col span.comments a, .left1 span.comments a {font-size:100%; text-decoration:none;}

.navigation{ clear:both; margin:10px auto; width:93.75%; height:45px; border:1px solid #ddd; border-width:1px 0 0 0;}
.alignleft{ float:left; padding:20px 0 0 25px; background: url(images/navigation-button.gif) -0% -58px no-repeat;}
.alignright{ float:right; padding:20px 25px 0 0; background: url(images/navigation-button.gif) 100% 22px no-repeat;}


/*-----------Sidebar--------------*/
ul.recentarticles li { list-style-type: none !important; margin-left: 0px;}
ul.recentarticlesinner li {border-bottom:1px solid #ebebeb;}
ul.recentarticles li a { font-weight: normal; font-size: 12px;}


/*-------------Post Tables-------------*/
.post table { margin-bottom:50px; margin-left:30px; background:#f9f9f9; border:1px solid #fff; -moz-box-shadow: #ddd 0px 2px 3px; -webkit-border-radius: 12px; -webkit-box-shadow: #ddd 0px 2px 3px; box-shadow: #ddd 0px 2px 3px;}
.post table th {padding:5px; font-weight:bold; background:#f1f1f1; border:1px solid #fff; border-width:1px 1px;}
.post table tr {}
.post table tr.alternate { background:#f6f6f6;}
.post table td {padding:10px; min-width:140px; border:1px solid #fff; border-width:1px 1px;}
.post table a:hover { border-bottom:0px !important; margin:0; padding:0; }


/*-------------Post Img-------------*/
.post img {padding:8px; margin:0 20px 10px 20px; border:1px solid #999; background-color:#eee; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.post img.nostyle {padding:0; margin:0; border:0px; background-color:transparent !important; -moz-border-radius: 0px; -webkit-border-radius: 0px;}
.post a img.goodies { float: left; margin-bottom: 0px !important; }
.post .alignleft{ float:left; background: none;}
.post .alignright{ float:right; background: none;}
.alignright img{float:right; margin:0 0 1em 1em;}
.alignleft img {float:left; margin:0 1em 1em 0;}
.aligncenter img {border:1px solid #999;}
.alignright a img {float:right; margin:0 0 1em 1em;}
.alignleft a img {float:left; margin:0 1em 1em 0;}
.aligncenter a img {display: block; margin-left: 100px; margin-right: 100px;}
.post a:hover img { background-color:#ddd;}
.post .wp-caption { text-align:right; width:100%; font-size:90%;}
img.blog-image { float: left;}


/*--------------Comments------------*/
h3#comments, #commentform { padding:0px 0px 10px 10px; margin:20px 0; border-bottom:1px solid #ddd; clear:both; }
h3#respond {padding:0px 0px 10px 10px; margin:20px 0 20px 20px; clear:both;}
ol.commentlist{ margin-bottom:50px; }
ol.commentlist li{ clear:both; list-style-type:none !important; padding:10px; position:relative; border-bottom:1px solid #ddd; }
ol.commentlist li.alt{ padding:10px;}
ol.commentlist p {padding:10px;}
ol.commentlist .commentmeta { clear:both; width:110px;}
ol.commentlist .commenttext { position:relative; top:-58px; left:140px; border-left:1px solid #ddd; width:65%; }
ol.commentlist .commenttext blockquote {margin:0px; padding:0px; color:#888; text-shadow:#fff 0px 1px 1px; font-weight:normal; line-height:100%; word-spacing: 0em; letter-spacing: 0em;}
ol.commentlist cite {margin-left:5px; text-transform:none;font-family:Georgia, "Times New Roman", Times, serif; font-size:90%;}
ol.commentlist .date { margin:20px 0 5px 0; font-style:italic; color:#666; font-size:9px;}
ol.commentlist .date span {background-color: #eee; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding:2px 8px; *background-color: none; *padding:0;}
ol.commentlist .commentmetadata{background-color:red; width:100px;}
ol.commentlist .authcomment { background: url(images/boxpatternbg.gif) top left #f0f0f0;}
ol.commentlist .gravatar img { position:absolute; top:30px; right:10px; padding:5px; border:1px solid #999; background-color:#eee; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
ol.commentlist img.wp-smiley { border: none; padding: 0px; margin: 0px;}


/*--------------Trackbacks------------*/
#trackback { text-align: right;}
#trackback h3 { }
#trackback h3 span { display: none; position:relative; top:60%; left:50%; font-size:3.5em; padding:10px; margin:10px;}
#trackback a { font-size:80%; text-decoration:none;}
#trackback ol {float:right; border-left:0px solid #999; margin:0px 0 40px 0; width:75%;}
#trackback li {padding:0px 20px; list-style-type:none !important;}


/*--------------Comment form------------*/
#commentform {border:0px; margin:20px 0; margin-left:20px; width:95%;}
#commentsub  { margin:10px; height:auto; overflow:hidden;}
#commentsub ul { width:200px; float:left; text-align:left;}
#commentsub li { list-style-type:none !important;}
#commentsub .text { float:left;}
#commentsub ul li p { font-family:Georgia, "Times New Roman", Times, serif; font-size:80%; }
#commentsub .text textarea, #commentform .text textarea { width:395px; float:right; margin-top:5px; background-color:#fff; border:1px solid #999; font-family:Arial, Helvetica, sans-serif; padding:5px; -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px;}
#commentsub input, #commentform input {background-color:#fff; border:1px solid #999; color:#999; margin:5px 0; font-family:Arial, Helvetica, sans-serif; padding:5px; -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px;} 
#commentsub #submit, #commentform #submit { float:right; clear:both; background-color:#666; color:#eee; font-weight:bold; text-transform:uppercase}


/*---------------Archives--------------*/
.archivemsg p { text-align:center; margin:0px 10px; background-color: #eee; border:1px solid #ddd; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:5px; font-family: 'nevisBold', Helvetica Neue, Helvetica, Arial, sans-serif; letter-spacing:-0.04em; text-transform: uppercase; font-style: normal;}

#archives {position:relative;height:100%;}
ul#archives h4 { margin-top:30px; border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:20px;}
ul#archives ul#month_archive li {list-style-type:none !important; margin:0; line-height:200%; padding:5px 0; }
ul#archives ul#month_archive li a { font-weight:normal;}
ul#archives span.the_article  {}
ul#archives span.comments { background:#f9f9f9; border:1px solid #eee; -moz-border-radius: 10px 10px 0px 10px; -webkit-border-radius: 10px; -webkit-border-bottom-right-radius:0px; padding:5px 8px;}
ul#archives span.comments a {font-size:120%; text-decoration:none;}
ul#archives ul ul {clear:both; padding:0; margin:0; }
ul#archives ul ul li.date { padding-top:4px; width:40px; float:left;}
ul#archives ul ul li.title { padding-top:2px; float:left;}

ul.archivecats { margin:20px 10px;}
ul.archivecats li {background:url(images/side_bullet.gif) 10px 15px no-repeat; list-style-type:none !important; margin:0; line-height:200%; padding:5px 20px;}
ul.archivecats li a { font-weight:normal;}

.archivegraph { position:relative; min-height:200px; margin-bottom:50px;}
#archive_bar_graph{ position:absolute; bottom:0; right:20px; clear:both; float:left; display:inline; //margin:0; //padding:0;}
#archive_bar_graph li{float:left; display:inline; list-style-type:none; position:relative; width:46px; margin:0 0 0 1px; padding:20px 0 0; min-height:110px}
#archive_bar_graph li span.label{position:absolute; bottom:-5px; left:0; line-height:100%; display:block; text-align:center; width:100%; font-size:80%;}
#archive_bar_graph li a{text-decoration:none}
#archive_bar_graph li a span.count{position:absolute; bottom:20px; display:block; width:100%;padding:5px 0 12px; background:#08264D;text-align:center; color:#fff; text-shadow:#282520 0px 1px; -moz-border-radius: 10px 0px; -webkit-border-radius: 10px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius: 0px;}
#archive_bar_graph li a:hover span.count{background:#F5104C; color:#fff; text-shadow:#000 0px 1px;}



/******************* About page *********************/
h3.about { font-size: 20px; font-weight: normal; padding-bottom: 10px;}
#about_header { position:relative; z-index:-1;}
/*#about_header .about_JRA { background:url(images/about_JRA.png) 0px 0px no-repeat ; position:absolute; bottom:-80px; right:0px; width:257px; height:415px;}*/
.social ul#left {margin:0 0 0 20px; padding:0; width:130px; float:left; font-family: arial; }
.social ul#right {margin:0 0 0 20px; padding:0; width:130px; float:left; font-family:  }
.social ul li {list-style-type:none !important; display:block; margin: 10px 0 20px 0;}
.social li.icon-twitter {background:url(images/icons/socials-24x24.gif) 5px -50px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}
.social li.icon-delicious {background:url(images/icons/socials-24x24.gif) 5px -150px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}
.social li.icon-lastfm {background:url(images/icons/socials-24x24.gif) 5px 2px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}
.social li.icon-flickr {background:url(images/icons/socials-24x24.gif) 5px -99px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}
.social li.icon-cg {background:url(images/icons/socials-24x24.gif) 5px -125px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}

.social li.icon-facebook {background:url(images/icons/socials-24x24.gif) 5px -225px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}
.social li.icon-linkedin {background:url(images/icons/socials-24x24.gif) 5px -24px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}
.social li.icon-digg {background:url(images/icons/socials-24x24.gif) 5px -174px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}
.social li.icon-youtube {background:url(images/icons/socials-24x24.gif) 5px -74px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}
.social li.icon-dopplr {background:url(images/icons/socials-24x24.gif) 5px -200px no-repeat; padding:0px 0px 0px 40px; margin-left:5px;}


/*------------Twitter Latest ----------*/
.toggle_container { margin:0; padding: 0; margin-bottom: 10px; border: 1px dotted #d6d6d6; border-left: none; background: url(images/boxpatternbg.gif) top left #f0f0f0; overflow: hidden; clear: both; }
.toggle_container .block { padding: 10px; /*--Padding of Container--*/}

#twitterlatest { clear: both; text-align: left; position:relative;}
#twitterlatest p { font-size:9px; clear: both;}
ul#twitter_update_list  {font-size:small;}
ul#twitter_update_list li { width: 98%; border:0px; font-size: 9px; }
ul#twitter_update_list li span a {padding:0px !important; }
ul#twitter_update_list li a:hover {padding:0px !important;}

#tweet { margin: 20px 0; padding: 0px 0px; position: relative;}
#tweet li { margin-bottom: 10px; list-style-type: none !important;}
#tweet p, #tweet span.status { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: normal; color: #666; font-size: 13px; line-height: 22px; text-shadow: #fff 0px 1px 0px;}
#tweet p a, #tweet span.time a { font-size: 11px; color: #999; font-weight: normal;}
#anywherebutton { width: 100%; margin-bottom: 20px; text-align: center;}

#flickr_box { margin:0 0 0 30px; padding:5px; float:left;}
#flickr_box ul{ margin: 0; padding: 0; background:red;}
#flickr_box li {list-style-type:none !important; margin: 0; padding: 5px 10px; border-bottom:1px solid #514A39;}
#flickr_box a:hover { background: none !important; border-bottom:0px !important; margin:0; padding:0;}
span.flickr { color:#FF0084 !important; font-family:Arial, Helvetica, sans-serif; font-style:normal; font-weight:bold;}



/******************* Contact page *******************/
#contact-wrapper { border: 1px solid #d6d6d6; background: #fff; padding:20px; margin:0 20px 20px 10px;}
#contact-wrapper div { clear:both; margin:1em 0; font-weight: normal; color: #666; font-size: 14px; line-height: 22px; text-shadow: #fff 0px 1px 0px;}
#contact-wrapper span { font-style: normal; text-transform: capitalize; color: inherit; font-family: inherit;}
#contact-wrapper label { display:block; float:none; width:auto; margin-top: 20px; margin-left: 40px; }
form#contactme input, form#contactform select, form#contactform textarea, form#contactme .email { margin-left: 40px; border:5px solid #ddd; border:5px solid rgba(221,221,221,0.9); padding:9px; font-size:14px; color:#666; width: 80%;}
form#contactme textarea { font-family:Arial, Tahoma, Helvetica, sans-serif; font-size:100%; padding:0.6em 0.5em 0.7em; border:5px solid #ddd; border:5px solid rgba(221,221,221,0.9); }

form#contactme input:focus, form#contactme select:focus, form#contactme textarea:focus { border:5px solid #d80e65; border: 5px solid rgba(216,14,101,0.9);}
form#contactme  select { margin-left: 40px; font-size:14px; padding: 5px; border:5px solid #ddd; border:5px solid rgba(221,221,221,0.9); }
form#contactme  textarea { margin-left: 40px; font-size:14px; width: 80%;}
form#contactme fieldset { margin-left: 40px; margin-top: 10px; border:5px solid #ddd; border:5px solid rgba(221,221,221,0.9);  width: 80%; padding: 10px; line-height: 28px; }
form#contactme fieldset input, form#contactme .email input { width: auto; margin: 0 10px 0 0 !important;}
form#contactme fieldset p, form#contactme .email p { margin-top: 10px; margin-bottom: 10px; text-transform: capitalize; border-bottom: 1px dotted #ddd;}
form#contactme .submit { background: #0e4184; border: 5px solid #fff; color: #fff;}
form#contactme sup { color: #d80e65;}
.contact-side img { padding: 8px; border: 1px solid #999; margin: 0px; margin-left: 20px; background: #eee;}
.contact-side p { margin-left: 20px}

ul.contactsteps li { list-style-type:none !important; background: #f0f0f0; float:left; width:21%; height:auto; margin:0px 5px 16px 0px; padding:5px 10px; border-bottom: 5px solid #ddd; border-left: 1px solid #ddd; font-size: 90%; -moz-border-radius: 0 4px 4px 0;; -webkit-border-radius: 0 4px 4px 0;}
ul.contactsteps li strong { font-size: 11px; background: #eee; border: 1px solid #ddd; padding: 4px 8px 4px 8px; line-height: 3; -moz-border-radius: 30px; -webkit-border-radius: 30px;}
ul.contactsteps li span { font-size: 180%; font-weight: normal; line-height: 1;	}
ul.contactsteps li:hover { background: #eaeaea; border-bottom: 5px solid #bbb; border-left: 1px solid #ccc; cursor: default;}

#location { margin-top: -19px;}
.workavailability { margin: 20px; text-shadow: none; }
.workavailability h4 { padding: 5px;}
.workavailability p { text-align: left !important;}
.workavailability p span { padding: 3px 5px; font-size: 120%; color: #999; }

span.availopen { background: #31d76f !important; border: 1px solid #1f8f49 !important; color: #fff !important; font-family: inherit; font-style: normal;}
span.availlimited { background: #f2c730 !important; border: 1px solid #987d1f !important; color: #fff !important; font-family: inherit; font-style: normal;}
span.availfull { background: #F2304E !important; border: 1px solid #a61d32 !important; color: #fff !important; font-family: inherit; font-style: normal;}



/******************* MailChimp page *******************/
h1.mc {font-size:55px; color: #0A335D; line-height:55px; font-family: 'nevisBold', Helvetica Neue, Helvetica, Arial, sans-serif; letter-spacing:-0.04em; font-weight: bold; text-transform: uppercase; text-shadow: #000 0px 1px 2px; text-shadow: rgba(0,0,0,0.4) 0px 1px 2px; position: relative; z-index: 5;}

h2.mc { font-size:30px; padding-top: 10px; font-variant: normal; font-weight:bold; border:0px; line-height:140%; position: relative; z-index: 5;}
#mc_header .about_JRA { background:url(images/about_JRA.png) 0px 0px no-repeat ; position:absolute; bottom:0px; right:0px; width:257px; height:415px;}
.mc-cta { position: relative; left: -30px; }
.mc-cta a:hover { border: none;}
.mcwork { clear: both; position: relative;}

#mcform label { display:block; float:none; width:auto; margin-top: 20px; margin-left: 20px; }
form#mcform input, form#mcform select, form#mcform textarea { margin-left: 20px; border:2px solid #ddd; border:2px solid rgba(221,221,221,0.9); padding:4px; font-size:14px; color:#666; width: 90%;}
form#mcform textarea { font-family:Arial, Tahoma, Helvetica, sans-serif; font-size:100%; padding:0.6em 0.5em 0.7em; border:2px solid #ddd; border:2px solid rgba(221,221,221,0.9); }
form#mcform fieldset { margin-left: 20px; margin-top: 10px; border:2px solid #ddd; border:2px solid rgba(221,221,221,0.9);  width: 70%; padding: 10px; line-height: 28px; }
form#mcform input:focus, form#mcform select:focus, form#mcform textarea:focus { border:2px solid #d80e65; border: 2px solid rgba(216,14,101,0.9);}
form#mcform  select { margin-left: 20px; font-size:14px; padding: 5px; border:2px solid #ddd; border:2px solid rgba(221,221,221,0.9); }
form#mcform  textarea { margin-left: 20px; font-size:14px;}
form#mcform p.checkbox  { float: left; font-size: 14px; margin-bottom: 10px; margin-left: -20px;}
form#mcform p.checkbox span { padding-left: 5px;}
form#mcform .submit { background: #0e4184; border: 2px solid #fff; color: #fff;}
form#mcform small { padding-left: 20px;}
form#mcform sup { color: #d80e65;}



/******************* Footer *************************/

.poweredby { position: relative; top: 14px; text-align: center; z-index: 99;}
.poweredby span {background: #999; -moz-border-radius: 100px; -webkit-border-radius: 100px; padding: 1px 6px; font-size: 12px; position: relative; top: -3px; color: #fff;}
.poweredby span a { font-style: normal; font-weight: bold; color: #fff;}
.poweredby span a:hover { color: #444; background: none; border: none;}

/*-----------Quick Links--------------*/
#linkswrapper { width: 95%; background: #eee; -moz-border-radius: 10px 10px 0 0; -webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px; margin:0 auto; height: 35px; position:relative; border: 1px solid #ddd; border-width: 1px 1px 0px 1px;}
.links { width: 93.75%; margin: 0 auto;}
.links ul li { width: 93.75%; margin: 0 auto; display:inline;}
.links ul li a { font-family: Georgia, "Times New Roman", Times, serif; font-weight:normal; font-size:10px; font-style: normal; color: #777; text-shadow: #fff 0px 1px 0px; padding: 2px; margin: 0 10px 0 0; position: relative; top: 4px;}
.links ul li a:hover { color: #000;}
.links ul li.lifestream a { background:url(images/icons/homepage/lifestream.gif) 0px 0px no-repeat; padding:0 0 0 15px;}
.links li.emailtemplates a { background:url(images/icons/homepage/templates.gif) 0px 0px no-repeat;padding:0 0 0 15px;}
.links li.twitter a { background:url(images/icons/homepage/twitter.gif) 0px 0px no-repeat; height: 20px; padding:0 0 0 15px;}
.links li.subscribe {position:absolute; right:0px; top:-9px; width:320px; height:10px;}

/*------------Subscription Box----------------------*/
.links ul li.subscribe ul {margin:14px 0 0 20px; padding:0; position: relative;}
.links p.caption { position:absolute; top:-10px; left:20px; font-size:9px; color:#ddd; text-shadow: #fff 0px 1px 0px;}
.links ul li.subscribe ul label {margin:1px 5px 0 0; float:left; font-size:85%; color:#fff;}
.links ul li.subscribe ul #mce-EMAIL { float:left; width:200px; padding:3px 4px; background-color:#fff; border:1px solid #ccc; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#666; font-size:90%; }
.links ul li.subscribe ul input.btn { position: absolute; top: 4px; right: 12px; background-color:transparent; border:none; color:#777; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; font-style: normal; text-transform: uppercase; font-size:10px; text-shadow: #fff 0px 1px 0px;}
label.error {color:#fff; text-shadow: none; background-color:red; background-color:rgba(255,0,36,0.5); width: 200px !important; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 4px !important; margin-top: 5px !important;}
#mce-responses {float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;}
#mce-error-response {display: none;margin: 15px 0 0 0;padding: 0; float:left; font-weight: normal;z-index: 1;color: #ff0000; font-size:90%; text-align:left; line-height:100%; }
#mce-success-response {display: none;margin: 15px;padding: 0; float:left; font-weight: normal;z-index: 1;color: #ff0000; font-size:90%; text-align:left; line-height:100%; }

blockquote{ clear:both; font-family:Georgia, "Times New Roman", Times, serif; background-color:#efefef; margin:20px; padding:10px; width:85%; border:1px solid #ddd; color:#555; text-shadow:#fff 0px 1px 1px; font-size:145%;  word-spacing: -0.06em; letter-spacing: -0.02em;}
blockquote p { margin-bottom:10px;}
cite{ text-transform:uppercase; letter-spacing:-0.01em; font-family:Georgia, "Times New Roman", Times, serif;}

blockquote.author{ clear:both; font-family:Georgia, "Times New Roman", Times, serif; background-color:#ffffcc; margin:20px; padding:10px; width:85%; border:1px solid #ddd; color:#555; text-shadow:#fff 0px 1px 1px; font-size:100%;  word-spacing: -0.06em; letter-spacing: -0.01em;}
blockquote.author p { margin-bottom:20px;}
blockquote.author img {}
cite{ text-transform:uppercase; letter-spacing:-0.01em; font-family:Georgia, "Times New Roman", Times, serif;}

#footer {width: 95%; margin: 0 auto; clear:both; background: url(images/footer_border.gif) top repeat-x; height: 40px; font-size:10px; color:#777;}
#footer ul { width: 99%; margin: 0px auto; clear: both;}
#footer ul li { margin-top: 20px; float: left; width: 50%; padding-bottom: 0px; margin-bottom: 0px; }
#footer ul li.contact { width: 25%; float: right; margin-bottom: 0px;}
#footer h3 { border:none; margin: 0;}
#footer span{ color:#888; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; letter-spacing:-0.02em; margin-bottom:-1px;}

ul.logos  { width: 95%; overflow: hidden; margin: 0px auto; }
ul.logos li { float: left !important; width: auto !important; text-align: center; padding: 0px; margin: 0px 0px 0px 0px !important;}



/******************* Miscellaneous ******************/
/*hCard **************************/
h3.hcard { background:url(images/microformats.gif) 85% 25% no-repeat;}
#hcard-Jonathan-Richard-Aizlewood {margin:0; padding:10px 1px 10px 1px; text-align:left; font-size:100%; line-height:150%;}
#hcard-Jonathan-Richard-Aizlewood span { letter-spacing:0; font-family:Arial, Helvetica, sans-serif; font-style:normal; margin:0;}
.dl { background:url(images/card_address.png) 0px 2px no-repeat; padding-left:20px;}
address { font-style: normal;}

/*--------------Search Form-------------*/
.search { width: 550px; margin: 50px 0 0 200px; padding: 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px;background: #eee;}
#searchform{ margin:2px 0px 0px 0px; clear:both;}
#searchform #s{ float:left; width:350px; padding:5px; background-color:#fff; border:1px solid #ddd; color:#666; text-shadow:none; text-transform:none; font-size:90%; }
#searchform #searchsubmit{ float:left; padding:3px 10px; margin:0 6px; background-color:#666; border:1px solid #000; color:#fff; font-size:90%; font-weight:bold;}


/* FlexSlider Default Theme
*********************************/
.flexslider {  background: url(../images/ajax-loader.gif) center no-repeat; border: 1px solid rgba(0,0,0,0.3); position: relative; zoom: 1;}
.flexslider ul li { margin: 0 !important; padding: 0 !important;}
.flexslider .slides {zoom: 1; margin: 0; clear: both }
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}

/* Direction Nav */
.flex-direction-nav li { margin: 0; padding: 0;}
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../images/bg_direction_nav2.png) no-repeat 0 0; position: absolute; top: 30%; cursor: pointer; text-indent: -9999px; opacity: 0.5;}
.flex-direction-nav li a:hover { opacity: 1;}
.flex-direction-nav li .next {background-position: -52px 0; right: -7px;}
.flex-direction-nav li .prev {left: -6px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 0px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}	


/*-------------Other------------------*/
.center { text-align:center;}
.left { text-align: left;}
.right {text-align: right;}
.aligncenter { text-align:center;}
hr{display:none}
.clearnone { clear:both; height: 0px;}
.clear { clear:both; height: 26px;}
.clear10 { clear:both; height:10px;}
.clear20 { clear:both; height:20px;}
.clear30 { clear:both; height:30px;}
.clear40 { clear:both; height:40px;}
.clear50 { clear:both; height:50px;}
.clear100 { clear:both; height:100px; position:relative;}
.clearline { clear:both; line-height:1.8; margin-bottom: 0px !important; padding:5px 0; }
.clearline p {text-align: right;  margin-top: -20px 0 0 0; padding: 5px 0;}
.clearline p a { font-weight: normal; font-size: 90%; border-bottom: 1px dotted #999;}
.clearline p a:hover { background: none;}

.chat-bubble { background-color:#EDEDED; border:2px solid #666666; font-size:35px; line-height:1.3em; margin:10px auto; padding:10px; position:relative; text-align:center; width:300px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 0 5px #888888; -webkit-box-shadow:0 0 5px #888888;}
.chat-bubble-arrow-border { border-color: #666666 transparent transparent transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; bottom:-22px; left:30px;}
.chat-bubble-arrow { border-color: #EDEDED transparent transparent transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; bottom:-19px; left:30px;}

.css-arrow-multicolor { border-color: black transparent transparent transparent; border-style:solid; border-width:10px; width:0; height:0;}
.css-arrow-right {border-color: transparent transparent transparent #333333;border-style:solid;border-width:10px 0 10px 20px;float:left;height:0;margin:0 10px;width:0;}

/*-------------404---------------*/
span.notfound { font-size:48px; line-height: 1.1; letter-spacing: -0.06em; width:100%; text-align: justify; font-family: Arial, helvetica, sans-serif; font-style: normal; font-weight:bold; color: #333; text-shadow: #000 0px 3px 10px; text-shadow: rgba(0,0,0,0.85) 0px 3px 10px; z-index: 1; border: none !important;}
span.notfound a { color: #212121;}
span.notfound a:hover { background: none; color: #fff;}

/*--------------Tipsy-------------*/
.tipsy { padding: 5px; font-size: 15px; font-family: georgia; font-style: italic; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(images/tipsy.gif); }
.tipsy-inner { padding: 10px 15px; background-color: black; color: white; max-width: 400px; text-align: center; }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }


/******************* Media queries / Responsive ******************/

/* max-width - Less than 700px, but bigger than iPhone */
@media screen and (max-width: 700px) {
	#navwrap { width:100%; margin:0 auto;}	
	ul#nav { width: 100%; margin: 0 auto; height: auto; text-align: center;}
	ul#nav li#logo {  width:60%; float: none; margin: 0 auto; margin-right: 1%; height:51px; z-index: 99; }
	ul#nav li#logo a { display:block; width:100%; height:51px; background:url(images/logo-sm.png) 0 0 no-repeat; padding: 0; border: none !important;}
	ul#nav li {float:left; width: 16%; padding: 0px; font-size: 100%; border-bottom: none;}
	ul#nav li a { border: none !important;}
	ul#nav li a span { display: none;}
	ul#nav li#active a {color:#fff; background:none;}
	ul#nav li a:hover { background: none;}			
	#contentfull { margin-top: 100px;}	
	#centered { width: 100%; margin: 0 auto; margin-top: 10px; padding: 10px; text-align: center;}
	h1.shopwindow {font-size:30px; line-height:2; margin-top: 20px; margin-bottom:0px;}
	h1.shopwindow a { display: block; margin-bottom:20px;}
	h2.shopwindow { display: none;}
	h2.shopwindow span { font-size: 18px;}	
	ul#nav li span { display: none;}
	.col { float: none;}	
	.moustache {height:auto; background: none; }
	.moustache .first, .moustache .right { float: none;}		
	.moustache .first p, .moustache .right p, .moustache .first h2, .moustache .right h2 { text-align: left;}
	.svcsleft, .svcsright, .svcslast { clear: both; float: none; width: 100%;}
	.svcsleft .inner, .svcsright .inner, .svcslast  .inner{ clear: both; float: none; width: 95% !important; border: none;}
	.additional, .additional_alt { clear: both; float: none; width: 90%;}
	#process1 { width:100%; height:auto;}
	#display-home { display: none;}
	ul.servicelistsm li.home { width: 80%;}	
	p.postmetadata { display: none;}
	ul.contactsteps li { float:none; width:90%;}		
	#location img { display: none;}
	#footer {clear: both;}
	.poweredby { display: none;}
	.links ul li.lifestream { display: none;}
	.links li.emailtemplates { display: none;}
	.links li.twitter { display: none;}
	.links li.subscribe {position:absolute; left:0px; top:-9px; width:100%; height:10px;}
	.links p.caption {  display: none;}
	.links ul li.subscribe ul #mce-EMAIL {width:60%; }
	.links ul li.subscribe ul input.btn { position: absolute; top: 4px; right: 0px; }
	#footer ul { display: none;}	
	#theresult { display: none;}	
}

/* max device width - For iPhone */
@media screen and (max-device-width: 480px) {
	html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
	#contentfull { margin-top: 100px;}	
	.col {  float:none !important;width:48%;margin-left:3%; margin-top:4px; position:relative;}
	ul#nav { width: 100%; margin: 0 auto; height: auto; text-align: center;}
	ul#nav li#logo {  width:70%; float: none; margin: 0 auto; margin-right: 1%; height:51px; z-index: 99; }
	ul#nav li#logo a { display:block; width:100%; height:51px; background:url(images/logo-sm.png) 0 0 no-repeat; padding: 0; border: none !important;}
	ul#nav li {float:left; width: 18%; padding: 0px; font-size: 90%; border-bottom: none;}
	ul#nav li a { border: none;}
	ul#nav li a span { display: none;}
	ul#nav li#active a {color:#fff; background:none;}
	ul#nav li a:hover { background: none;}			
	#headwrapper {  width:100%; padding-top: 90px;	}
	#headerbig { background: none;}	
	#centered { width: 90%; min-height: 290px; text-align: center;}	
	h1.shopwindow {font-size:22px; line-height:2; margin-top: 10px;}
	h1.shopwindow a { display: block; margin-bottom:10px;}
	h2.shopwindow {display: none;}
	h2.shopwindow span {  display: none;}
	a.ctashopwindow {border-bottom: 1px solid #eee;}
	ul.columns li { float: none;}
	ul.columns li .info {display: none;}
	ul.columns li:hover .info {display: none;}
	#homewindow .venn1, #homewindow .venn2 { display: none;}
	#display-home { display: none;}
	ul.servicelistsm li.home { width: 80%;}
	.moustache {height:auto;}
	.moustache .first, .moustache .right { float: none;}
	.svcsleft, .svcsright, .svcslast { clear: both; float: none; width: 100%;}
	.svcsleft .inner, .svcsright .inner, .svcslast  .inner{ clear: both; float: none; width: 95% !important; border: none;}
	.additional, .additional_alt { clear: both; float: none; width: 90%;}
	#process1 { width:100%; height:auto;}
	.main_view { width:100%;height:250px; float:none;}
	.window { width:100%;height:250px;}
	.image_reel {position:absolute;top:0;left:0;}
	.image_reel a {float:none;cursor:pointer;}
	.image_reel img {float:left; width: 33.4%;}
	.image_reel a span { width:100%; height:250px; float:none;}
	.browser-top { display: none;}
	.browser-bottom { display: none;}
	.navigation-sidebar p { text-align: center; }
	.paging { display: none !important;}
	.poplight { display: none;}
	.popup_block{display:none; position:fixed; top:550px; left:180px;}	
	a.close{float:right; color: #000; margin:-35px -15px 0 0; font-size: 20px; }	
	.post img { margin: 0; padding: 0; }
	.post p { clear: both;}	
	.navigation{width:100%;}
	ol.commentlist .commentmeta { clear:both; width:90%;}
	ol.commentlist .commenttext { position:relative; top:0px; left:0px; width:100%; }
	ol.commentlist .commentmetadata{width:100%;}
	ol.commentlist .authcomment { background: url(images/boxpatternbg.gif) top left #f0f0f0;}
	ol.commentlist .date { margin:20px 0 5px 75px;}
	ol.commentlist .gravatar img { position:absolute; top:0px; left:0px; padding:5px; }
	ol.commentlist img.wp-smiley { border: none; padding: 0px; margin: 0px;}
	#commentform { margin-left:0px; }
	#commentsub  { margin:10px; height:auto; overflow:hidden;}
	#commentsub ul { float:none; }
	#commentsub .text { float:none;}
	#commentsub .text textarea, #commentform .text textarea { width:80%; float:none;}
	#commentsub #submit, #commentform #submit { float:none;}
	ul.contactsteps li { float:none; width:90%;}
	#contact-wrapper label { margin-left: 10px; }
	form#contactme input, form#contactform select, form#contactform textarea, form#contactme .email { margin-left: 10px;}
	form#contactme  select { margin-left: 10px;  }
	form#contactme  textarea { margin-left: 10px;}
	form#contactme fieldset { margin-left: 10px; }
	form#contactme .submit { background: #000; border:none; padding: 10px; line-height: 0.8; font-weight: bold; color: #fff;}
	#location img { display: none;}
	#footer {clear: both;}
	.poweredby { display: none;}
	.links ul li.lifestream { display: none;}
	.links li.emailtemplates { display: none;}
	.links li.twitter { display: none;}
	.links li.subscribe {position:absolute; left:0px; top:-9px; width:100%; height:10px;}
	.links p.caption {  display: none;}
	.links ul li.subscribe ul #mce-EMAIL {width:60%; }
	.links ul li.subscribe ul input.btn { position: absolute; top: 4px; right: 0px; }
	#footer ul { display: none;}
	#theresult { display: none;}	

}

/* min-width & max-width - Bigger than 700px, less than 1200px */
@media screen and (min-width: 700px) and (max-width: 1200px) {
	ul.servicelistsm li.home { width: 23.5%;}
	ul#nav li#logo { width:14%; margin-right: 18%; border: none; }
	ul#nav li a { border: none;}	
	ul#nav li a span { display: none;}	
	ul.contactsteps li { width:20%;}	
	#centered { width: 90%; min-height: 200px; margin: 0 auto; padding: 10px; text-align: center;}	
	h1.shopwindow {font-size:2.7em; line-height:1.7; margin:1% 12%;}
	h2.shopwindow { font-size:22px; margin-top:10px !important line-height:190%;}
	h2.shopwindow span { font-size: 22px; }	
	#homewindow .venn1 { top: 55%; left: 40%; width: 350px; height: 350px;}
	#homewindow .venn2 { top: 55%; right: 45%; width: 350px; height: 350px;}
	.navigation-sidebar p {font-size: 75%;}
	#display { margin-top: 14px;}
	.main_view { max-width:600px;height:675px; background: url(images/ajax-loader.gif) center no-repeat; float:right; padding:0; margin:0; margin-right: 5%; position: relative;}

.browser-top {max-width: 600px; }
.browser-bottom { max-width: 700px; }	
	.window { max-width:600px;height:675px;  overflow:hidden;position:relative; -moz-box-shadow:#999 0px 1px 2px; -webkit-box-shadow:#999 0px 1px 2px;}
	.image_reel {position:absolute;top:55px;left:0;}
	.image_reel a { position:relative;float:left;cursor:pointer;}
	.image_reel img {float:left; width: 33.3%;}
	.image_reel a span { width:600px;height:600px;width:float:left;background:#111; position:absolute;z-index:10;top:0;left: 0;}
}