/* 	Cayenne http://www.cayenne.co.uk/ 
	by Sophie Dennis (SD)
	v0.2 7 June 2011
	
	Many base styles and bug fixes from the wisdom collected by Paul Irish at http://html5boilerplate.com/
*/


/*	Reset -------------------------------------------------------------------------------------
	html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
	v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
	html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top-width: 1px; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/* Various bug-fixing defaults -------------------------------------------------- */

/* always force a scrollbar in non-IE */
html { overflow-y: scroll; }


/* Default styles ------------------------------------------------------------- 
	Author: Sophie Dennis, adapted from HTML5 BoilerPlate CSS
*/
p, ol, ul, blockquote, dd, pre, table  { margin-bottom:1em }
blockquote { margin-left: 1.4em; padding-left : 1.4em; border-left-width : 1px; }

img, video, object, embed { max-width: 100%; !important; width: auto;}
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

strong, b, dt { font-weight: bold; }
em, i { font-style:italic }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

tr, th, td, td img { vertical-align:top; } 
th, td, caption { text-align:left; padding: 0.3em 0.5em 0.3em 0;}
th {font-weight:bold}
tr {border-bottom-width: 1px}

ul { margin-left:1.3em; list-style-type: disc; } /* change to 30px for indented */
ol { margin-left:1.3em; list-style-type: decimal; }
li ul { list-style-type : circle; }

pre {
	margin-left: 1.4em;
	padding-left : 1.4em;
	border-left : 1px;
	/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	word-wrap: break-word; /* IE */
}

/* border colors */
pre, tr, blockquote, hr, fieldset {
	border-color: #D1D8AB;
	border-style: solid;
}

/* Links --------------------------------------------------------------------- */

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

a:link, a:active, a:visited { 
color : #3A6B9C; 
border-bottom: 1px dotted #3A6B9C;
text-decoration:none;
}
a:hover { 
color:#036; 
border-bottom-color: #036;
border-bottom-style: solid;
}
a img {
border : none; 
}
a.more {
background: url(../images/arrow_sml_s01.gif) no-repeat right .4em;
padding-right: 13px;
}
/*  j.mp/webkit-tap-highlight-color *
	SD: remove to leave as default, or set to your own colour choice and reinstate 
a:link { -webkit-tap-highlight-color: #FF5E99; } */



/* Fonts -----------------------------------------------------------------------
	Font size set in ems, from % base on html & body
	http://www.alistapart.com/articles/howtosizetextincss/
	Font resize reference : see "Relative font size calculator.xls" (in Useful\Tools\)
*/

html { font-size: 100.01% } /* for ancient Opera versions */
body { font:100%/1.4 "FranklinGothicBook", 'Arial Narrow', sans-serif; } /* 16px base font */
strong,b {font-family:georgia, serif;font-weight: 600;font-size:0.86em;color:black;}
blockquote { font-family: georgia, serif;font-size:0.86em;font-style: italic}

body, select, input, textarea { color:#444; }/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 

table, select, input, textarea { font-family: inherit; font-size:inherit; }

pre, code, kbd, samp, var { font-size:0.88em; font-family: 'lucida console', monospace; }
pre code, pre kbd, pre samp, pre var {font-size: 1em;}

/* smaller text */
.callout {font-size: 0.81em} /* 13px */
small,.note,*[role=note],tfoot,.more { font-size:0.75em; }/* 12px */
sub,sup {font-size:0.75em;} /* 12px */

/* 	Webkit font smoothing: maxvoltar.com/archive/-webkit-font-smoothing 
  	Consider for elements with light text on a dark background
	Otherwise let's leave this choice to the browser / OS / user
	
body { -webkit-font-smoothing: antialiased; }

	SD removed because:
	Default font-rendering improved as of Safari 5
	http://christophzillgens.com/en/articles/-webkit-font-smoothing-reloaded
	
	Plus, default subpixel rendering more readable for body text
	http://www.usabilitypost.com/2010/08/26/font-smoothing/
	
*/

/* Headings (h1,h2,etc) ------------------------------------------------------------------ */ 
   
h1,h2,h3 { text-rendering: optimizeLegibility ; }

h1 { 
font-family:"FranklinGothicCond", 'Arial Narrow', Verdana, sans-serif; font-size-adjust:0.5; font-weight:normal; font-style:normal;
color: #B6B7BF;
font-size: 2em;
margin-bottom:.3em;
line-height: 1.1;
}
h2 { 
margin-bottom : .15em;
font-family:georgia, serif;
font-size:1.13em;
line-height:1.36;
color:#c00;
}
h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
	color: #c00;
	border-bottom-color: #c00;
}
h2 a:hover {
	border-bottom-style: solid;
}
h3 { 
margin-bottom : 0em;
font-family:georgia, serif;
color:black;
font-size:1em;
letter-spacing: 2px; 
}
h4, h5, h6 { 
margin-bottom : 0em;
font-weight : bold; 
font-size : 1em; 
}


/* Forms ---------------------------------------------------------------------- */

/* bug fixes */
button {  width: auto; overflow: visible; } /* make buttons play nice in IE:  www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button, input, select, textarea { margin: 0; } /* Webkit browsers add a 2px margin outside the chrome of form elements */
label, input[type=button], input[type=submit], button { cursor: pointer; } /* hand cursor on clickable input elements */
textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; } 

	/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }


/* Basic styling */
label { 
font-weight : bold; }

fieldset { 
margin : 0 0 1em 0; 
padding : 1.4em 1.4em 0 1.4em; 
border-width : 1px; }

legend {  
font-weight : bold; }

textarea { 
width : 390px; 
height : 250px; 
padding : 5px; }


/* Colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* Navigation lists ------------------------------------------------------------- */
[role=navigation] ul, [role=navigation] ol, ul[role=navigation], ol[role=navigation], [role=navigation] li { margin-left: 0; padding-left: 0; list-style:none; list-style-image: none;}
[role=navigation] li {display:block;float:left;min-height:1px;width:auto;position:relative;}
[role=navigation] li a {display:block;float:left;border-bottom:0;min-height:1px;width:auto;}


/* Project Specific Body Elements
	------------------------------------------*/
.aside { 
background-color: rgba(209,216,171,0.6);
-moz-box-shadow:2px 2px 5px #f1f1f1;
-webkit-box-shadow:2px 2px 5px #f1f1f1;
box-shadow:2px 2px 5px #f1f1f1;

float:right; 
font-size: .81em;
margin: 0 0 1.4em 1.4em;
padding: 1em;
width: 37.5% !important; 
box-sizing: border-box;
}
.aside>:last-child { margin-bottom:0 }
.aside li { margin-bottom:0.3em; }




/* Layout : Page dimensions ----------------------------------------------------------------------- 
	Everything beyond this point to be moved to layout.css in silverstripe and excluded from editor
*/

.container {
	width: 100%;
	clear:both;
	float:left;
}
.content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 10px;
}
.page.footer .content {
	max-width: 1030px; /* 760+(135x2) */
}
.page.footer .content > * {
	max-width: 760px;
	margin-left:auto;
	margin-right: auto;
}

.article, .clientlistlink {
	border-color: #D1D8AB;
	border-style: solid;
}

/* body --------------------------------------------------------- 
	16 unit grid. 1 unit = 6.25% or 46.25px 
*/
.pgbody {
background: url(../images/body_bg.png) no-repeat 50% 0;
padding-top: 2.8em;
}
[role=main] {
float:left;
padding-right: 3%;
width: 65.75%;
}
[role=complementary] {
float:left;
padding-left: 3%;
width: 28.25%;
}

[role=main] h1 {
margin-right: -28.25%;
}
[role=main]>:last-child {
margin-bottom:0;
}
[role=complementary]{
background: url(../images/sidebar-div.png) repeat-y left top;
background: url(../images/sidebar-div-top.png) no-repeat left top,
			url(../images/sidebar-div-bm.png) no-repeat left bottom,
			url(../images/sidebar-div.png) repeat-y left top;
margin-top: 2.8em; /* (h1 font size * h1 line-height)+(h1 margin * h1 font-size) */
}

/* Banner ------------------------------------------------------- */

[role=banner] .container {
background-color: #900;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC0000), to(#782022));
background-image: -webkit-linear-gradient(#CC0000, #782022);
background-image: -moz-linear-gradient(#CC0000, #782022);
background-image: linear-gradient(#CC0000, #782022);
color:white;
padding: 2.8em 0 2.23em 0;
-webkit-font-smoothing: antialiased;
}
.logo {
background: url(../images/tagline-div.png) no-repeat right top;
float:left;
font-size:1em;
margin:0 22px 0 0;
padding-right:24px;
}
.logo img {
vertical-align:top;
}
.tagline {
font-family:"FuturaBook", 'Gill Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif; 
font-size-adjust:0.47; 
font-weight:300; 
font-style:normal;
font-size: 0.81em;
letter-spacing: 0.35em;
text-transform: uppercase;
float:left; 
padding: .4em 0 0 0;
margin:0;
}

[role=banner] [role=navigation] {
background-color:black;
color:white;
padding:0;
background-image: none;
font-size:0.88em;
/*font-family:"Franklin Gothic URW Medium", 'Arial Narrow', Arial, sans-serif; font-size-adjust:0.498; font-weight:500; font-style:normal;*/
letter-spacing: 1px;
}
[role=banner] [role=navigation] ul {
margin: 0 auto;
}
[role=banner] [role=navigation] li {
background: url(../images/menu-div.png) no-repeat right center;
margin: 1px .35em 1px 0 ;
padding-right: .35em;
}
[role=banner] [role=navigation] li:first-child {
margin-left: -.5em;
}
[role=banner] [role=navigation] li:last-child {
background: none;
}
[role=banner] [role=navigation] a  {
color:white;
padding: .2em 10px .3em 10px;
}
[role=banner] [role=navigation] a:hover  {
background-color: #900;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C00), to(#900));
background-image: -webkit-linear-gradient(#C00, #900);
background-image: -moz-linear-gradient(#C00, #900);
background-image: linear-gradient(#C00, #900);
color:white;
}


/* Portfolio ---------------------------------------------------*/
.portfolio [role=main] {width: 100%; margin-right: 0}
.portfolio [role=main] h1 {margin-right:0}
.portfolio [role=complementary] {display:none}
.portfolio .article {
clear:both; 
overflow:hidden; 
border-top-width:1px; 
padding-top:1em ;
padding-bottom:.4em;
margin-top: -.38em;
}
.description {
float:left;
padding-right: 3%;
width: 59.4%;
}
.screenshot {
float: left;
padding-left:0;
width: 37.5%
}
.description h2 { margin-bottom:0 }
.screenshot img { 
display:block;
background-color: #F4F4F4;
padding:5px;
border: 1px solid #eee;
}
.screenshot img { 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
height: auto; 
}
.clientlistlink {clear:both; padding-top:1.4em; border-top-width: 1px}


/* Client list  ------------------------------------------------------ */
.clientlist li { margin-bottom:.7em; }
.clientlist strong { display:block }


/* Fix the odd layout from the use of <p> tags on the search form ----*/
#search { display:block;margin-bottom:1em; font-size: .81em; }
label { display:block; }
#search p { display:inline }


/* Format the client site example ----------------------------------- */
#clientsite { clear:left; }
#clientsite h2 {margin-bottom:.6em}
#clientsite p { float:left;	margin: 0 .7em 0 0; font-size: 0.88em;}
#clientsite img {
background-color: #F4F4F4;
padding:5px;
border: 1px solid #eee;
max-width: 190px;
}


/* Footer (main page footer) ------------------------------------------- */
.page.footer {
background: #535353 url(../images/footer_bg.png) repeat-x center top;
color: #BFBFBF;
font-size:0.77em;
-webkit-font-smoothing: antialiased;
}
.page.footer .content {
background: url(../images/footer_montage.png) no-repeat center top;
padding-top: 172px;
}
.page.footer b, .page.footer strong, .page.footer h3 {
color: #c00;
font-weight: 600;
}
.page.footer h2 {
color:white;
}
.page.footer .content > div.vcard {
max-width: 665px;
overflow: hidden;
}
.vcard h2 {
position:absolute;    
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); 
font-family:"FuturaBook", 'Gill Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif; 
font-size-adjust:0.47; 
font-weight:300; 
font-style:normal;
letter-spacing: 0.35em;
text-transform: uppercase;
text-align:right;
} 
.vcard > p {
float: left;
text-align: right;
margin-left: 2em;
padding-top: .4em;
}
.email, .tel {color: white;}
.adr {
float: left;
position: relative;
width: 12.5em; /* (240/13)-padding */

background-color: #333;
background-color: rgba(66,66,66,.5);
border-radius: 5px;
margin: 0 0 1em 10px;
min-height: 4.2em;
padding: .4em .4em .4em 4.5em;
}
.adr h3 {
position: absolute;
top: .4em;
left: .4em;
width: 3.7em;
text-align:right;

font-family: "FranklinGothicBook", 'Arial Narrow', sans-serif;
letter-spacing:normal;
line-height:inherit;
}
.adr p {margin-bottom:0}
.vcard .note {clear:both;padding-top: 3em;}




/* print styles  ------------------------------------------------------------------------
   inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
*/
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none; }

a, a:visited { color: #444 !important; text-decoration: underline; border:0}

a:after { content: " (" attr(href) ")"; } 

abbr:after { content: " (" attr(title) ")"; }

.ir a:after { content: ""; }  /* Don't show links for images */

pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

img { page-break-inside: avoid; }

@page { margin: 0.5cm; }

p, h2, h3 { orphans: 3; widows: 3; }

h2, h3{ page-break-after: avoid; }
}


/*  Media queries for responsive design --------------------------------------------------------------------
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

@media screen and (max-width: 760px), screen and (max-device-width: 760px) {
[role=banner] [role=navigation] li:first-child {margin-left:0}
.page.footer {
background-position: center -125px;
}
.page.footer .content {
background: none;
padding-top: 12px;
}
.vcard h2 {
position:static;    
clip: rect(auto); 
padding: 0;
margin-bottom: 1.4em;
}
}

@media screen and (max-width: 660px), screen and (max-device-width: 660px) {
.vcard > p {float:none;}
.adr {float:right;}
.vcard .note {padding-top: 1em;}
}

@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
/* Prevent iOS, WinMobile from adjusting font size - prevents hideous text zoom when switching to landscape view */
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 

body {width: auto;min-width: 0}
[role=main],[role=complementary], .screenshot, .description {float: none; width: auto;margin-right:0; margin-left:0}
[role=main] h1 {margin-right: 0}
h1.logo {background-image:none}
[role=complementary] {padding-left:0;background:none}
}

@media screen and (max-height: 480px), screen and (max-device-height: 480px), screen and (max-width: 640px), screen and (max-device-width: 640px) {
[role=banner] .container {padding: 1em 0 .7em 0}
[role=banner] [role=navigation] {padding:0}
.pgbody {padding-top:1.4em}
}

/* Reference Styles ----------------------------------------------------------------------------
	Standard CSS rules for specific effects
	For preference apply style rules to specific elements and remove the following
*/

/* Font Ref ----------------------------------------------------------------------------

	Franklin Gothic Book 		font-family:"FranklinGothicBook", 'Arial Narrow', Arial, sans-serif; font-size-adjust:0.5; font-weight:normal; font-style:normal;
	Franklin Gothic Medium 		font-family:"Franklin Gothic URW Medium", 'Arial Narrow', Arial, sans-serif; font-size-adjust:0.498; font-weight:500; font-style:normal;
	Franklin Gothic Condensed 	font-family:"FranklinGothicCond", 'Arial Narrow', Verdana, sans-serif; font-size-adjust:0.5; font-weight:normal; font-style:normal;
	Futura Book					font-family:"FuturaBook", 'Gill Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size-adjust:0.47; font-weight:300; font-style:normal; letter-spacing: 0.35em; text-transform:uppercase;
	Georgia						font-family: georgia, serif;
	
/* Color Ref ----------------------------------------------------------------------------

	Red 		#C00
	Deep Red	#900
	Dark Red	#782022
	
	Off-black	#444
	Dark Grey	#919199
	Grey 		#B6B7BF
	Light Grey	#D9D9D9
	
	Steel blue	#7D8CA5
	
	Green		#D1D8AB
	
	Links
	Default		#3A6B9C
	Hover		#036


/* FOUC jQuery fixes ----------------------------------------------------------------------------
	The default hides the entire body. It may be preferable to target just the elements you will transform with jQuery
	
	Added by Sophie Dennis | Cayenne
	Adapted from:
	http://monc.se/kitchen/152/avoiding-flickering-in-jquery
	http://paulirish.com/2009/avoiding-the-fouc-v3/#comment-29409
*/

.js body {
	/*visibility:hidden;  hide when JS on but jQuery not loaded */
}

.js body.jq {
	/*visibility:visible;  show when jQuery loads */
}


/*  Non-semantic helper classes ----------------------------------------------------------------
    From HTML5 Boilerplate
*/

/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display:none; visibility:hidden; } 

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/ 
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden { position:absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* >> The Magnificent CLEARFIX << */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }

/* END REFERENCE STYLES */