/* -------------------------------------------------------------- 
  
   CSS Starter Kit
   Web Design & Development by Studio 24 Ltd
   www.studio24.net - (0870) 241 6159
     
-------------------------------------------------------------- */

@import "reset.css";


body {
}


/* =CONTAINERS
-------------------------------------------------------------- */
div#container { /* set as 'standard' width, centred container for 1024x768 site - 960px wide inc. 20px padding left and right */
	width: 920px;
	margin: 0 auto;
	padding:0 20px;
}

/* =HEADER
-------------------------------------------------------------- */
div#header {
    padding: 1.6em 1em 0 1em;
    margin: 0;    
}

div#header-branding {
    width: 65%;
    float: left;
    margin-bottom: 0.6em;
}

div#header-branding a {
    text-decoration: none;
    color: #666;
}

div#header-branding a:hover, 
div#header-branding a:focus {
    text-decoration: underline;
}

div#header-branding h1 {
    line-height: 1.1em;
}

div#header-branding p {
    color: #999;
}

form#header-search {
    width: 30%;
    float: right;
    margin-top: 1.4em;
    text-align: right;
}

form#header-search input {
    padding: 0.2em 0.8em;
    border: 1px solid #999;
    background-color: #FFF;
    width: 12em;
    
     /* css curved corners */
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px; 
	
	/* css box shadow */
	-moz-box-shadow: inset 1px 1px 2px #CCC;
	-webkit-box-shadow: inset 1px 1px 2px #CCC;
	box-shadow: inset 1px 1px 2px #CCC;
}

form#header-search input#searchsubmit {
    background-color: #EEE;
    width: auto;
    
    /* css box shadow */
	-moz-box-shadow: 1px 1px 2px #CCC;
	-webkit-box-shadow: 1px 1px 2px #CCC;
	box-shadow: 1px 1px 2px #CCC;
}

form#header-search input#searchsubmit:active {        
    /* css box shadow */
	-moz-box-shadow: inset 1px 1px 2px #CCC;
	-webkit-box-shadow: inset 1px 1px 2px #CCC;
	box-shadow: inset 1px 1px 2px #CCC;
}

/* =NAV-PRIMARY
-------------------------------------------------------------- */

ul#nav-primary {
    clear: both;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    margin: 0;
    padding: 0.6em 0.6em 0.6em 0.3em; 
    list-style-type: none;
} 

ul#nav-primary li {
    display: inline;
    margin: 0 0.8em 0 0;
    line-height: 1em;
}

ul#nav-primary li a {
    padding: 0.3em 0.7em;
    text-decoration: none;
    color: #666;
}

ul#nav-primary li a:hover,
ul#nav-primary li a:focus {
    background-color: #EEE;
    color: #333;
    
    /* css curved corners */
	-moz-border-radius: 12px; 
	-webkit-border-radius: 12px; 
	border-radius: 12px; 
}

/* =NAV-SECONDARY
-------------------------------------------------------------- */

ul#nav-secondary {
	list-style-type: none;
} 


/* =BREADCRUMB
-------------------------------------------------------------- */

ul#nav-breadcrumb {
	list-style-type: none;
} 


/* =CONTENT CONTAINERS
-------------------------------------------------------------- */

div#content {
    clear: left;
    padding: 1em 1em 0 1em; 
    margin: 0.4em 0 0 0;
}


div#content-primary {
    
}

body.two-col div#content-primary  {
	float:left;
	width:70%;
}

body.three-col div#content-primary  {
	float:left;
	width:50%;
}


div#content-secondary {
    
}

body.two-col div#content-secondary  {
	float: right;
	width:23%;
	background-color:#eee;
	padding: 0 1em 1em 1em;
	margin: 1em 0 1em 0;
	
	/* css curved corners */
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	-ms-border-radius: 10px;
	border-radius: 10px; 
}

div#content-secondary ul {
    list-style-type: none;
    margin: 0 0.4em;
}

div#content-secondary h2 {
    border-bottom: 1px solid #CCC;
    font-size: 1.8em;
    color: #555;
    line-height: 0.6em;
    margin: 0.6em 0 0.4em 0;
}

div#content-secondary ul {
    margin-bottom: 0.8em;
    margin: 0;
} 

div#content-secondary ul li a {
    text-decoration: none;
}

div#content-secondary ul li a:hover,
div#content-secondary ul li a:focus {
    text-decoration: underline;
}

body.three-col div#content-secondary  {
	float:left;
	margin-left:20px;
	width:20%;
	background-color:#999;
}


div#content-tertiary {
} 

body.three-col div#content-tertiary  {
	float:left;
	margin-left:20px;
	width:20%;
	background-color:#eee;
}


/* =WORDPRESS POSTS
-------------------------------------------------------------- */
div#content-primary div.post h1 {
    color: #333;
}

div#content-primary div.post h2 a {
    text-decoration: none;
    color: #333;
}

div#content-primary div.post h2 a:hover,
div#content-primary div.post h2 a:focus {
    text-decoration: underline;
}

div#content-primary div.post h1 + small,
div#content-primary div.post h2 + small {
    font-style: italic;
    color: #999;
    margin-bottom: 0.4em;
    position: relative;
    top: -0.6em;
}

div#content-primary div.post div.entry {
    margin-top: 0.8em;
}

div#content-primary div.post p.postmetadata {
    color: #999;
}

div#content-primary div.post p.postmetadata a {
    color: #666;
    text-decoration: none;
}

div#content-primary div.post p.postmetadata a:hover,
div#content-primary div.post p.postmetadata a:focus {
    text-decoration: underline;
    background-color: #eee;
}


/* =SITE-INFO / FOOTER
-------------------------------------------------------------- */

div#site-info {
	clear:both;
	border-top: 1px solid #CCC;
	padding: 1em;
    margin-top: 1em;
    color: #666; 
}

div#site-info ul {
    list-style-type: none;
}

div#site-info p {
    margin: 0 0 0.4em 0;
}
 
div#site-info p:nth-child(2) {
    padding-left: 1.2em;
}

div#site-info a {
    color: #333;
}


/* =BASIC TYPOGRAPHY
-------------------------------------------------------------- */

html {
	font-size: 100%; /* 100% = the default font size of the browser, usually 16px -> DON'T CHANGE THIS */
}

/**
 * Font sizing: 
 *
 * To calculate the percentage font-size to use in the body tag use the following calculation:
 *
 * (16px / Required body font-size) x 100
 *
 * Examples below:
 * 16px = 100%
 * 14px = 87.5%
 * 12px = 75%
 * 10px = 62.5%
 *
 */

body {
    font-family: "Lucida Grande", Arial, sans-serif;
	font-size: 85%; /* Set the base font-size (75% sets a size of 1em = 12px) */
    line-height: 1.7em;
}

/* =HEADINGS */
h1, h2, h3, h4 {
	line-height:1.5em;
	font-family: "Garamond Premier Pro", Garamond, serif;
}

/* 1em = body font-size, so we can calculate our other font-sizes based on this:
   for example, if we want a font-size of 32px, in ems 32px = (32 / 12) = 2.6em */

h1 {
	font-size: 2.2em; /* 32px */
}

h2 {
	font-size: 1.8em; 
}

h3 {
	font-size: 1.6em; 
}

h4 {
	font-size: 1.4em; 
}


p {
	margin: 0 0 1em 0; 
}

div#content-secondary,
div#site-info {
    font-size: 85%;
    line-height: 1.7em;
}

/* =OTHER TEXT ELEMENTS
-------------------------------------------------------------- */

blockquote {
	font-style: italic; 
	font-family: serif;
	font-size: 2em;
}

pre, code {
	margin: 0 0 1em 0;
}

/* Style to hide screen reader only text from screen users */
.screen-reader-text {
    position:absolute;
	left:-9000px;
	top:0; 
	z-index:20;
}

/* =LINKS
-------------------------------------------------------------- */

a:link, a:visited, a:focus, a:active {

}

a:hover {

}

p#skip-link { 
	position:absolute;
	left:-9000px;
	top:0; 
	z-index:20;
} 


/* icon links */
a.icon:link, a.icon:visited, a.icon:focus, a.icon:active, a.icon:hover {
	padding:2px 0 4px 20px;
	background-color: transparent;
	background-position:0 0;
	background-repeat: no-repeat;
} 
a.pdf:link, a.pdf:visited, a.pdf:focus, a.pdf:active, a.pdf:hover {
	background-image:url(../img/icons/pdf.png);
}
a.word:link, a.word:visited, a.word:focus, a.word:active, a.word:hover {
	background-image:url(../img/icons/word.png);
}
a.excel:link, a.excel:visited, a.excel:focus, a.excel:active, a.excel:hover {
	background-image:url(../img/icons/excel.png);
}
a.txt:link, a.txt:visited, a.txt:focus, a.txt:active, a.txt:hover {
	background-image:url(../img/icons/txt.png);
}
a.flash:link, a.flash:visited, a.flash:focus, a.flash:active, a.flash:hover {
	background-image:url(../img/icons/flash.png);
}
a.video:link, a.video:visited, a.video:focus, a.video:active, a.video:hover {
	background-image:url(../img/icons/video.png);
}
a.podcast:link, a.podcast:visited, a.podcast:focus, a.podcast:active, a.podcast:hover {
	background-image:url(../img/icons/podcast.png);
}
a.pub:link, a.pub:visited, a.pub:focus, a.pub:active, a.pub:hover {
	background-image:url(../img/icons/pub.png);
}
a.rss:link, a.rss:visited, a.rss:focus, a.rss:active, a.rss:hover {
	background-image:url(../img/icons/rss-feed.png);
}
a.print:link, a.print:visited, a.print:focus, a.print:active, a.print:hover {
	background-image:url(../img/icons/print.png);
}
a.friend:link, a.friend:visited, a.friend:focus, a.friend:active, a.friend:hover {
	background-image:url(../img/icons/friend.png);
}
a.help:link, a.help:visited, a.help:focus, a.help:active, a.help:hover {
	background-image:url(../img/icons/help.png);
}
a.info:link, a.info:visited, a.info:focus, a.info:active, a.info:hover {
	background-image:url(../img/icons/info.png);
}
a.email:link, a.email:visited, a.email:focus, a.email:active, a.email:hover {
	background-image:url(../img/icons/email.png);
}
a.vcard:link, a.vcard:visited, a.vcard:focus, a.vcard:active, a.vcard:hover {
	background-image:url(../img/icons/vcard.png);
}
a.plus:link, a.plus:visited, a.plus:focus, a.plus:active, a.plus:hover {
	background-image:url(../img/icons/plus.png);
}
a.minus:link, a.minus:visited, a.minus:focus, a.minus:active, a.minus:hover {
	background-image:url(../img/icons/minus.png);
}
	
	
/* =LISTS
-------------------------------------------------------------- */

ul {
	margin: 0 0 1em 2em;
}

ol { 
	margin: 0 0 1em 2em;
}

dl {
	margin: 0 0 1em 2em;
}

dt {
	font-weight: bold;
}

dt, dd {
	margin: 0 0 0.5em 0 ;
}


/* =TABLES
-------------------------------------------------------------- */

table {
	width: auto;
	margin: 0 0 1em 0;
	border-top:1px solid #ddd;
	border-left:1px solid #ddd;
}

th,td {
	padding: 0.3em 0.4em 0.2em 0.4em;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
}

th {
	font-weight:bold;
	background-color: #ccffcc;
}

tr:nth-child(odd) { /* CSS3 zebra row solution - only works in Opera & Safari */
  background-color: #edf3fe;
}

tr.alt { /* Hardcoded zebra row solution - use this class on every other <tr> for a zebra effect */
	background-color: #edf3fe;
}


/* -------------------------------------------------------------- 
   -------------------------------------------------------------- 
	     				FORMS
   -------------------------------------------------------------- 
   -------------------------------------------------------------- */
/* form warning message */
form div.message p {
	color:#000;
}
   
/* fieldset messages - before the relevant field */
form div em {
	display: none;
}

form div.problem em {
	display: inline;
	color:red;
}

   
   
/* =SIMPLE-FORM
----------------------------------------------- */

form.simple-form fieldset {
	margin:1em 0;
	padding:1em;
	border:solid 1px #ccc;
	background-color:#eee;
}

form.simple-form legend {
	font-weight: bold;
}

form.simple-form div {
	position:relative;
	padding:6px;
	margin-bottom: 0.5em;
}

form.simple-form label {
	display: block;
}

form.simple-form input {
	width:200px;
}

form.simple-form textarea {
	width:300px;
	height:100px;
}

form.simple-form div.radio input, form.simple-form div.checkbox input, form.simple-form input.submit {
	width:auto;
}
   
form.simple-form div.radio label, form.simple-form div.checkbox label {
	display: inline;
}

/* fieldset messages - before the relevant field */
form.simple-form div.problem {
	background-color: #ffefef;
	border:solid 1px #ff7f7f;
}

/* progressive enhancements for browsers beyond ie6 */
form.simple-form input:focus, form.simple-form textarea:focus {
	background-color: #ffc;
}

form.simple-form input[type="text"], form.simple-form textarea{
	border-top: solid 2px #999;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	border-left: solid 2px #999;
}

/* CSS rounded corners - no Opera support as of Aug 09 */
form.simple-form div.message,
form.simple-form div.problem,
form.simple-form fieldset {
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
}

 

/* =FLASH MESSAGES
----------------------------------------------- */

div.message {
	padding:10px;
}

div.message ul a:hover {
	text-decoration: none;
}

/* flash message - error */
div.error {
	border:solid 1px #ff7f7f;
	background-color: #ffefef;
}
div.error,
div.error a:link, 
div.error a:visited, 
div.error a:focus, 
div.error a:active  {
	color:red;
}

/* flash message - alert */
div.alert {
	border:solid 1px #FF8A00;
	background-color: #FCFFDF;
}
div.alert,
div.alert a:link, 
div.alert a:visited, 
div.alert a:focus, 
div.alert a:active  {
	color:#FF8A00;
}

/* flash message - success */
div.success {
	border:solid 1px #3FAF00;
	background-color: #EAFFDF;
}
div.success,
div.success a:link, 
div.success a:visited, 
div.success a:focus, 
div.success a:active  {
	color:#2D7F00;
}