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

@import "reset.css";


body {
    background: #000;
    color: #000;
    padding: 20px 0;
}


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

/* =BRANDING
-------------------------------------------------------------- */
div#branding {
    background: #333;
    padding: 30px 0 0 0;
}

/* =NAV-PRIMARY
-------------------------------------------------------------- */
ul#nav-primary {
    background: #fff;
    float: left;
    width: 760px;
    margin: 0;
    padding: 10px 0 0 0;
	list-style-type: none;
    font-size: 0.9em;
}

ul#nav-primary li {
    float: left;
    display: inline;
    padding-left: 5px;
    padding-right: 4px;
    background: url(../img/layout/divider.gif) 0 50% no-repeat;
}

ul#nav-primary li.first-nav-primary {
    background: none;
    margin-left: 40px;
    padding-left: 0;
}

ul#nav-primary a:link, ul#nav-primary a:visited, ul#nav-primary a:focus, ul#nav-primary a:active {
    color: #333;
    font-weight: normal; 
}


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

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


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

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


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

div#content {
    clear: both;
    background: #fff;
    padding: 10px 40px;
}


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

div#site-info {
    position: absolute;
    left: -1px;
    clear:both;
    background: #333;
    color: #999;
    float: left;
    width: 722px;
    margin: 0;
    padding: 10px 20px;
}

div#site-info p {
    margin-bottom: 0;
}

div#site-info p.copyright {
    float: left;
}

div#site-info p.credit {
    float: right;
}

div#site-info a:link, div#site-info a:visited, div#site-info a:focus, div#site-info a:active {
    color: #66CC00;    
}

/* =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: Arial, Helvetica, sans-serif;
	font-size: 75%; /* Set the base font-size (75% sets a size of 1em = 12px) */
    line-height: 1.4em;
}

/* =HEADINGS */
h1, h2, h3, h4 {
	line-height:1.5em;
    margin: 1em 0;
}

/* 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: 1.33em; /* 16px */
}

h2 {
	font-size: 1.09em; /* 13px */
}

h3 {
	font-size: 2em; /* 24px */
}

h4 {
	font-size: 1.6em; /* 20px */
}


p {
	margin: 0 0 1em 0; 
}


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

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

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


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

a:link, a:focus, a:active, a:visited {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #666;
    text-decoration: underline;
}

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;
}

li {
    margin: 0 0 0.5em 0;
}

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

dt {
	font-weight: bold;
}

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


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

table {
	/* width: auto; */
    width: 100%;
	margin: 0 0 1em 0;
    display: inline;
	/* border-top:1px solid #ddd;
	border-left:1px solid #ddd; */
}

th,td {
	/* padding: 0.3em 0.4em 0.2em 0.4em; */
    padding: 1em;
	/* 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;
}