/*
====================================
screen stylesheet for coldcactus.com
2009 http://coldcactus.com
====================================
*/

/*
	Hello nosy geeky person!
	I've tried to credit where I've picked up certain techniques where appropriate, for further reading.
	Some of it's either original thought or landed in my head via some sort of cultural geek-osmosis.
	The rest is utterly routine.
	Feel free to have a good poke around - it's how I always learn, too.
	
	(Well, that's a all a lie - if you're reading this bit the site's brand new and pushing live first
	is more important than adding extra CSS comments - they'll be here shortly!)
*/

/* Inspirational Comment Goes Here */

/*
	CONTENTS 
	=========
	Basic Rules
	Structure
	Headings
	Main Div
	Portfolio
	Contact Page
	Footer
*/



/* imports */
@import "navbar.css";
@import "lightbox.css";



/*
===========================
	Basic Rules
===========================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	font-family: 'Helvetica', 'Arial', 'Verdana', sans-serif;
	font-size: 12px;
	text-align: left;
	line-height: 20px;
	color: #fff;
	background: #303030 url(/images/site/body_bg_grass.png) top left repeat;
}

/* Fucking IE bugs! Still valid, makes the markup ugly as sin though. Urgh. Must find a better way! */
p.invisible {
	margin: 0;
	padding: 0;
	clear: both;
}
br.clear { clear: both; }

/* lists */
ul { margin: 0; padding: 0; }
li { margin: 0; padding: 0; list-style-type: none; }

ul.corporate { margin: 0 0 24px 18px; }
ul.corporate a { text-decoration: none; }

/* links & shit */
acronym { cursor: help; border-bottom: 1px dotted #ccc; }
a { color: #cfc; text-decoration: underline; }
a:hover { color: #fc9; text-decoration: underline; }
a img {
	margin: 1px;
	margin: 0;
	border: none;
}
a.external {
	padding-right: 10px;
	background: transparent url(/images/site/external_link.png) top right no-repeat;
}
a.external:hover { background-position: right -24px; }
/* coloured */
span.warm { color: #fcc; }
span.cool { color: #ccf; }
a.natural { color: #cfc; }
a.natural:hover { color: #fc9; }

/* images */
img.inline { margin: 0 2px -2px 0; }
img.float {
	margin: 2px;
	padding: 2px;
	border: 1px solid #e4e4e4;
	background: #333 url(/images/site/img_bg.png) top left repeat-x;
}
img.left { float: left; }
img.right { float: right; }

/* spinners */
img.spinner { 
	/* display: none; */
	margin: 0 0 -1px 4px;
	border: none;
}

/* flashes */
p.flash_notice, p.flash_error { 
	color: #adc44a;
	font-size: 16px;
	text-align: center;
}
p.flash_error { color: #c46a4a; }

/* ornamentation */
div.divider {
	clear: both;
	margin: 0;
	padding: 30px 0 0 0;
	width: 100%;
	height: 18px;
	background: url(/images/site/content_divider.png) center left no-repeat;
}



/*
===========================
	Structure
===========================
*/
div.corner_band {
	position: fixed;
	top: 0;
	left: 0;
	height: 108px;
	width: 108px;
	background: transparent url(/images/site/corner_band_new_year.png) top left no-repeat;
}
div.flash_banner {
	width: 100%;
	font-size: 1.2em;
	color: #555;
	text-align: center;
	border-bottom: 1px solid #555;
	background: #ff9;
}
div.flash_banner p { padding: 2px 0; }
div.flash_banner span { font-size: 1.4em; }
div.flash_banner img { margin-bottom: -1px; }
div.flash_banner a {
	padding: 0;
	color: #777;
	background: none;
}
div.flash_banner a:hover { color: #c60; }

div.container {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 868px;
}


/* Logo */
div.logo {
	margin: 0;
	padding: 0;
	height: 58px;
	background: transparent;
}
div.logo h1 {
	float: right;
	margin: 0;
	padding: 0;
	width: 340px;
	height: 58px;	
}
div.logo h1 a {
	display: block;
	width: 340px;
	height: 58px;
	background: transparent url(/images/site/logo.png) top left no-repeat;	
}
div.logo h1 a span { display: none; }
div.logo h1 a:hover { background: transparent url(/images/site/logo.png) no-repeat 0 -58px; }


/* Banner */
div.banner {
	clear: both;
	margin: 0;
	padding: 0;
	height: 225px;
	background: url(/images/site/banner_grass.jpg) top left;
}
div.banner h2 { display: none; }

div.banner p {
	float: right;
	margin-top: 152px;
	margin-right: 6px;
	height: 26px;
	width: 76px;
	border: 1px solid #e4e4e4;
}
div.banner p:hover { background: #333 url(/images/site/img_bg.png) top left repeat-x; }
div.banner a {
	display: block;
	height: 24px;
	width: 74px;
	margin: 0;
	padding: 4px 0 0 6px;
	font-size: 1.1em;
	text-decoration: none;
	color: #fefefe;
}
div.banner a:hover {
	color: #cfc;
	text-shadow: 0 0 0.2em #9f9;
}

/* Main */
div.wrapper {
	margin: 0 0 20px 0;
	padding: 0;
	background: url(/images/site/main_tile.gif) top left repeat-y;
}
div.main {
	margin: 0;
	padding: 10px 20px 20px 20px;
	background: url(/images/site/main_radial.png) bottom left no-repeat;
}

/* Navbar */
div.navbar {
	margin: 0 0 10px 0; 
	padding: 0;
	height: 163px;
	background: url(/images/site/navbar_bg.png) top left;
}

/* Footer */
div.footer {
	font-family: 'Tahoma', 'Arial', 'Verdana', sans-serif;
	font-size: 9px;
	margin: 0 0 6px 0;
	padding: 4px 0 0 12px;
	height: 46px;
	background: url(/images/site/footer_bg.png) bottom left no-repeat;
}



/*
===========================
	Headings
===========================
*/
h3 span { display: none; }
h3.image { height: 23px; width: 273px; }
h3.centred { text-align: center; }

h4 span { display: none; }
h4.image { height: 23px; width: 273px; }
h4.centred { text-align: center; }

/* Corporate */
h3.hello_there { background: transparent url(/images/site/headings/hello_there.png) top left no-repeat; }
h3.how_can_we_help { background: transparent url(/images/site/headings/how_can_we_help.png) top left no-repeat; }
h3.free_advice { background: transparent url(/images/site/headings/free_advice.png) top left no-repeat; }
h3.from_our_portfolio { background: transparent url(/images/site/headings/from_our_portfolio.png) top left no-repeat; }
h3.get_in_touch { background: transparent url(/images/site/headings/get_in_touch.png) top left no-repeat; }
h3.privacy_policy { background: transparent url(/images/site/headings/privacy_policy.png) top left no-repeat; }
/* Design */
h3.identity_design { background: transparent url(/images/site/headings/identity_design.png) top left no-repeat; }
h3.web_design { background: transparent url(/images/site/headings/web_design.png) top left no-repeat; }
h3.print_services { background: transparent url(/images/site/headings/print_services.png) top left no-repeat; }
h3.multimedia_deployment { background: transparent url(/images/site/headings/multimedia_deployment.png) top left no-repeat; }
/* Develop */
h3.bespoke_solutions { background: transparent url(/images/site/headings/bespoke_solutions.png) top left no-repeat; }
h3.content_management { background: transparent url(/images/site/headings/content_management.png) top left no-repeat; }
h3.ecommerce { background: transparent url(/images/site/headings/ecommerce.png) top left no-repeat; }
h3.educational_solutions { background: transparent url(/images/site/headings/educational_solutions.png) top left no-repeat; }
h4.shopify_ecommerce { background: transparent url(/images/site/headings/shopify_ecommerce.png) top left no-repeat; }
/* Deliver */
h3.included_features { background: transparent url(/images/site/headings/included_features.png) top left no-repeat; }
h3.search_engine_optimisation { background: transparent url(/images/site/headings/search_engine_optimisation.png) top left no-repeat; }
h3.email_solutions { background: transparent url(/images/site/headings/email_solutions.png) top left no-repeat; }
h3.hosting_services { background: transparent url(/images/site/headings/hosting_services.png) top left no-repeat; }
/* SEO */
h4.a_quick_example { background: transparent url(/images/site/headings/a_quick_example.png) top left no-repeat; }
h4.a_final_word { background: transparent url(/images/site/headings/a_final_word.png) top left no-repeat; }
/* Portfolio */
h3.portfolio { background: transparent url(/images/site/headings/portfolio.png) top left no-repeat; }
h4.web { background: transparent url(/images/site/headings/web.png) top left no-repeat; }
h4.design { background: transparent url(/images/site/headings/design.png) top left no-repeat; }
h4.identity { background: transparent url(/images/site/headings/identity.png) top left no-repeat; }



/*
===========================
	Main Div
===========================
*/
div.main h3 {
	margin-bottom: 24px;
	font-size: 18px;
	line-height: 20px;
	color: #a4cc8e;
	text-decoration: underline;
}
div.main h4 {
	margin-bottom: 18px;
	padding-top: 24px;
	font-size: 14px;
	line-height: 18px;
	color: #9ababb;
}
div.main h4.thin { margin-bottom: 0; }

div.main p {
	margin: 0 0 12px 0;
}
div.main p.centred {
	margin-right: 150px;	
	margin-left: 150px;
	text-align: center;
}
div.main p.indented {
	padding-left: 16px;
	padding-right: 8px;
}
div.main p.narrow {
	margin-right: 280px;
}
div.main p.coloured {
	padding-top: 8px;
	padding-bottom: 8px;
	background: #333 url(/images/site/img_bg.png) top left repeat-x;
	border: 1px solid #777;
}
/* home page */
div.main h3.huge {
	margin-top: 0;
	margin-bottom: 24px;
	font-size: 2.0em;
	text-decoration: none;
	color: #cfc;
}
div.main h3.indented {
	padding-left: 0;
	padding-right: 8px;
	color: #cfc;
}
div.main h3.medium {
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 1.4em;
	text-decoration: none;
	color: #cfc;	
}
div.main h3.glowing {
	font-size: 2.4em !important;
	text-shadow: 0 0 0.2em #9f9;
	margin-bottom: 24px;
}
div.main p.huge {
	margin-top: 12px;
	margin-bottom: 32px;
	font-size: 1.8em;
	line-height: 1.3em;
}
div.main p.large {
	font-size: 1.4em;
	color: #e1e1e1;
	margin-bottom: 32px;
}
div.main p.medium {
	font-size: 1.1em;
	color: #e4e4e4;
	margin-bottom: 32px;
}
div.main p.bottom { margin-bottom: 6px; }
div.main p.last { margin-bottom: 0; }
div.main p.left {
	clear: left;
	text-align: left;
	float: left;
}
div.main p.right {
	clear: right;
	text-align: right;
	float: right;
}


/* 'pseudo sidebar' divs */
/* right */
div.main div.rightside {
	clear: right;
	margin: 0 12px 24px 0;
	padding: 12px 12px 0 12px;
	width: 200px;
	float: right;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #888;
	border-left: 1px solid #888;
	/* background: transparent url(/images/site/inline_bg_grass.png) top left repeat; */
	/* background: transparent url(/images/site/main_radial.png) center center repeat; */
	background: transparent url(/images/site/welcome_box.png) top center repeat;
}
div.rightside p.medium { margin-bottom: 12px; }
div.main div.rightside_tight {
	margin: 0;
	width: 200px;
	float: right;
}
/* left */
div.main div.leftside {
	clear: left;
	margin: 0 0 24px 12px;
	padding: 12px 12px 0 12px;
	width: 200px;
	float: left;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #888;
	border-left: 1px solid #888;
	/* background: transparent url(/images/site/inline_bg_grass.png) top left repeat; */
	/* background: transparent url(/images/site/main_radial.png) center center repeat; */
	background: transparent url(/images/site/welcome_box.png) top center repeat;
}
div.leftside p.medium { margin-bottom: 12px; }
div.main div.leftside_tight {
	margin: 0;
	width: 200px;
	float: left;
}

/* scrollers for long pages */
div.link_to {
	margin: 0;
	padding: 0;
	float: right;
	clear: both;
}
div.link_to p {
	height: 20px;
	width: 72px;
	margin: 0;
	padding: 0;
	border: 1px solid #777;
	font-size: 9px;
}
div.link_to p:hover {
	background: #333 url(/images/site/img_bg.png) top left repeat-x;
	border: 1px solid #ccc;
}
div.link_to a {
	display: block;
	height: 20px;
	width: 72px;
	text-decoration: none;
	padding-left: 14px;
	color: #fefefe;
}
div.link_to a:hover { color: #cfc; }
/* top */
a.link_to_bottom { background: transparent url(/images/site/link_to_bottom.png) top left no-repeat; }
a.link_to_bottom:hover { background-position: left -24px; text-shadow: 0 0 0.2em #9f9; }
/* bottom */
a.link_to_top { background: transparent url(/images/site/link_to_top.png) top left no-repeat; }
a.link_to_top:hover { background-position: left -24px; text-shadow: 0 0 0.2em #9f9; }



/*
===========================
	Portfolio
===========================
*/
div.portfolio {
	clear: both;
	margin: 0 0 0 70px;
	text-align: center;
}
p.client {
	float: left;
	width: 150px;
	height: 200px;
	margin: 0 40px 40px 40px;
	padding: 0 40px 40px 40px;
}
p.client a {
	color: #9ababb;
	font-size: 1.1em;
}
img.portfolio_thumb {
	margin: 2px 18px 16px 18px;
	padding: 2px;
	border: 1px solid #ccc;
}
img.portfolio_thumb:hover {
	padding: 1px;
	border: 2px solid #fff;
}
/* portfolio expanders */
div.portfolio_expander {
	margin: 0;
	padding: 0;
	float: left;
	clear: both;
}
div.portfolio_expander p {
	height: 20px;
	width: 54px;
	margin: 0;
	padding: 0;
	border: 1px solid #777;
	font-size: 1.0em;
}
div.portfolio_expander p:hover {
	background: #333 url(/images/site/img_bg.png) top left repeat-x;
	border: 1px solid #ccc;
}
div.portfolio_expander a {
	display: block;
	height: 20px;
	width: 54px;
	text-decoration: none;
	padding-left: 16px;
}
div.portfolio_expander a.more { background: transparent url(/images/site/link_to_more.png) top left no-repeat; color: #fff; }
div.portfolio_expander a.less { background: transparent url(/images/site/link_to_less.png) top left no-repeat; color: #fff; }
div.portfolio_expander a:hover { background-position: left -24px; color: #cfc; text-shadow: 0 0 0.2em #9f9; }



/*
===========================
	Contact Page
===========================
*/
/* Structure */
div.contact_form {
	float: left;
	margin-left: 80px;
	padding: 4px 32px 16px 32px;
	background: url(/images/site/main_tile.gif) -1px -1px repeat-y;
	border-top: 1px solid #bebebe;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
div.contact_details {
	float: right;
	margin-right: 80px;
	padding: 4px 32px 16px 32px;
	background: url(/images/site/main_tile.gif) -1px -1px repeat-y;
	border-top: 1px solid #bebebe;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
/* Contact Form */
div.contact_form h4 { 
	margin: 24px 0 12px 0;
	padding: 0 4px 4px 0;
	width: 200px;
}
#contact_form .formElement {
	margin: 0 0 12px 0;
	padding: 0 4px 4px 0;	
	width: 200px;
	border: 1px solid #666;
	color: #fff;
	background: #3b3b3b;
	outline: none;
}
#contact_form input:hover, #contact_form textarea:hover {
	background-color: #444;
	border: 1px solid #777;
}
#contact_form input:focus, #contact_form textarea:focus {
	background-color: #666;
	border: 1px solid #999;
}
#contact_form button {
	margin: 0 0 16px 0;
	padding: 6px 8px;
	color: #fff;
	background: #555;
	border-top: 1px solid #999;
	border-right: 1px solid #777;
	border-bottom: 1px solid #777;
	border-left: 1px solid #999;
}
#contact_form button:hover { background: #666; }
#contact_form button:active { background: #333; }
#contact_form p.right {
	margin: 0;
	padding: 0;
	float: right;
}

/* Contact Details */
ul.contact_details { font-size: 1.2em; }
ul.contact_details a { text-decoration: none; }
ul.contact_details li {
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 18px;
	padding-left: 32px;
}
ul.contact_details li.landline { background: url(/images/site/contact/contact_landline.png) no-repeat center left; }
ul.contact_details li.mobile { background: url(/images/site/contact/contact_mobile.png) no-repeat center left; }
ul.contact_details li.email { background: url(/images/site/contact/contact_email.png) no-repeat center left; }
ul.contact_details li.skype {
	margin-bottom: 42px;
	background: url(/images/site/contact/contact_skype.png) no-repeat center left;
}
ul.contact_details li.ichat {
	margin-bottom: 42px;
	background: url(/images/site/contact/contact_ichat.png) no-repeat center left;
}
ul.contact_details li.vcard { background: url(/images/site/contact/contact_vcard.png) no-repeat center left; }
div.vcard { display: none; }



/*
===========================
	Footer
===========================
*/
div.footer a {
	text-decoration: none;
	color: #fefefe;
}
div.footer a:hover { color: #cfc; }
div.footer p {
	margin: 0;
	padding: 0;
	display: inline;
}
div.footer p.left {
	float: left;
	margin: 0 220px 0 0;
	padding: 24px 0 0 0;
}
div.footer p.centre {
	margin: 0;
	padding: 0;
}
div.footer p.right {
	float: right;
	margin: 5px 8px 0 0;
	padding: 18px 0 0 0;

}

/* Footer Flashes */
div.footer ul { margin: 0; padding: 0; list-style-type: none; }
div.footer li { margin: 0; padding: 0; list-style-type: none; float: left; }

div.footer a.statswagon_link {
	display: block;
	margin: 0 20px 0 0;
	padding: 0;
	width: 51px;
	height: 46px;
	background: transparent url(/images/site/flash_statswagon.png) top left no-repeat;	
}
div.footer a.statswagon_link:hover { background: transparent url(/images/site/flash_statswagon.png) no-repeat 0 -46px; }
div.footer a.statswagon_link span { display: none; }

div.footer a.mailwagon_link {
	display: block;
	margin: 0;
	padding: 0;
	width: 51px;
	height: 46px;
	background: transparent url(/images/site/flash_mailwagon.png) top left no-repeat;	
}
div.footer a.mailwagon_link:hover { background: transparent url(/images/site/flash_mailwagon.png) no-repeat 0 -46px; }
div.footer a.mailwagon_link span { display: none; }