/*
@site:
@name:		Parts all over - Typography
@author:	Rhys Burnie - Hugeobject - http://www.hugeobject.com.au
@required:	layout.css
*/
/*
	!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
	!NB: THIS TYPOGRAPHY CURRENTLY COVERS NEEDS OF FIRST HOME PAGE		   !
	!	 TYPOGRAPHY WILL BE FURTHER DEVELOPED WHEN SUBPAGES ARE IMPLEMENTED!
	!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/* NB: REFER TO forms.css FOR FORM SPECIFIC RULES */
/* = DEFAULT RULES = __________________________________________________________________________________________________ */
/*
	Default typography rules for all elements (NB: Elements are reset to 1 standard in layout.css
	div#main and div#sub have no padding - all padding must be applied at element level (this will be more flexible)
	div#main is assumed to be the default content area
*/
/* BEGIN CSS by Andrew Lessels */
* {
	font-family: Arial, Helvetica, sans-serif;
}
/* END CSS by Andrew Lessels */
body {
	font-size: 80%; /* CSS by Andrew Lessels */
	color: #000;
}
/* == HEADINGS == --------------------------------------------------------------------------------------------------- */
h1 {
	font-size: 2em;
	font-weight: bold;
	color: #008CD1;
	padding: 0 5px 0 25px;
	padding: 0; /* CSS by Andrew Lessels */
	margin: 0.3em 0 0.4em 0;
	margin: 0 0 15px 0; /* CSS by Andrew Lessels */
}
h2 {
	font-size: 1.36em;
	font-weight: bold;
	color: #008CD1;
	padding: 0 5px 0 25px;
	padding: 0; /* CSS by Andrew Lessels */
	margin: 0.2em 0 0.3em 0;
	margin: 0 0 10px 0; /* CSS by Andrew Lessels */
}
h3 {
	font-size: 1.2em;
	font-weight: bold;
	color: #004970;
	padding: 0 5px 0 25px;
	padding: 0; /* CSS by Andrew Lessels */
	margin: 0.2em 0 0.3em 0;
}
h4 {
	font-size: 1em;
	font-weight: bold;
	color: #004970;
	padding: 0 5px 0 25px;
	padding: 0; /* CSS by Andrew Lessels */
	margin: 0.2em 0 0.3em 0;
}
h5 {
	font-size: 0.9em;
	font-weight: bold;
	color: #004970;
	padding: 0 5px 0 25px;
	padding: 0; /* CSS by Andrew Lessels */
	margin: 0.2em 0 0.3em 0;
}
h6 {
	font-size: 0.8em;
	font-weight: bold;
	color: #004970;
	padding: 0 5px 0 25px;
	padding: 0; /* CSS by Andrew Lessels */
	margin: 0.2em 0 0.3em 0;
}
/* === HEADINGS IN div#sub === */
div#sub h1 {/* TODO - REFINE RULE */
	
}
div#sub h2 {/* TODO - REFINE RULE */
	padding-left: 20px;
	margin: 0.2em 0;
}
div#sub h3 {/* TODO - REFINE RULE */
	padding-left: 20px;
}
div#sub h4 {/* TODO - REFINE RULE */
	padding-left: 20px;
}
div#sub h5 {/* TODO - REFINE RULE */
	padding-left: 20px;
}
div#sub h6 {/* TODO - REFINE RULE */
	padding-left: 20px;
}

/* == PARAGRAPHS AND RELATED ELEMENTS == ---------------------------------------------------------------------------- */
p {/* TODO - REFINE RULE */
	padding: 0.8em 5px 0.8em 25px;
	line-height: 1.6em;
}
/* BEGIN CSS by Andrew Lessels */
p {
	padding: 0.1em 5px 0.8em 0;
}
/* END CSS by Andrew Lessels */
div#sub p {
	padding-left: 20px;
}
strong, b { 
	font-weight: bold;
	color: #004a6d;
}
em, i { font-style: italic; }
blockquote {/* TODO - REFINE RULE */
	
}
small {
	font-size: 0.8em;
}
/* ...more... */

img {
	border: 0;
}
div.center-image {
	text-align: center;
}
/* == LINKS == ------------------------------------------------------------------------------------------------------- */
/*
	NB:	span.psuedo-link to be used for fake links added unobtrusivley by javascript where they arent used for hrefs
		example: collapseable results tables where the th text is used as a trigger to show/hide details
*/
a,
a:link,
span.psuedo-link {/* TODO - REFINE RULE */
	color: #008DCF;
	text-decoration: underline;
	cursor: pointer;
	cursor: hand; /* ie6 */
}
a:hover,
span.psuedo-link.hover {/* TODO - REFINE RULE */
	
}
a:active {/* TODO - REFINE RULE */
	
}
a:visited {/* TODO - REFINE RULE */
	
}
a.footnote {
	text-decoration: none;
}
a.watch-video {
	padding-left: 25px;
	background: url(../images/watch-video.png) no-repeat 5px center;
}
/* == FAUX-BUTTONS == */
/* ==== PRINT ==== */
/*
	NB:	Print button functionality should be added unobtrusivley
		html markup should be as follows:
		<span class="js-print-btn"></span>
		without js the user will never know it exists - use js to find spans with this class
		add functionality and change class name to "print-btn" so it appears
		see: style_events.js for example
*/
span.print-btn {
	display: block;
	width: 74px;
	height: 25px;
	background: transparent url(../images/sprite-print-btn.png) 0 0 no-repeat;/* re-defined in ie6.css */
	margin: 0 0 5px 20px;
	padding: 0;
	border: 0;
	text-indent: -9999px;
	cursor: pointer; /* hand in ie6.css */
	/*set in ie6.css - padding-top: 50px; hides text for ie6 */
}

span.print-btn:hover,
span.print-btn.hover {
	background-position: 0 -25px !important;/* ie6 wanted !important */
}
/* == LISTS == ------------------------------------------------------------------------------------------------------ */
/*
	Define list rules specific to div#main and div#sub so that it doesnt intefere with nav lists layout by mistake
*/
/* === MAIN === */
/* global li rule */
div#main li {
	line-height: 1.5em;
	margin-bottom: 0.5em;
}
/* === UNORDERED == */
div#main ul {/* TODO - REFINE RULE */
	list-style-type: none;
	list-style-image: url(../images/ul-li.gif);
	list-style-position: outside;
	margin-left: 45px;/* redefined in ie6.css and ie7.css (41px) NB: opera also seems to have a 4px difference for ul too */
}
div#main ul ul,
div#main ul ol {
	margin-left: 20px; /* redefined in ie6.css and ie7.css */
}

/* === ORDERED === */
ol  {/* TODO - REFINE RULE */
div#main 	list-style-type: decimal;
	list-style-image:none;
	margin-left: 45px;/* redefined in ie6.css and ie7.css */
}
div#main ol ol,
div#main ol ul {
	margin-left: 20px;/* redefined in ie6.css and ie7.css */
}
/* === SUB === */
/* global li rule */
div#sub li, {
	line-height: 1.5em;
	margin-bottom: 0.5em;
}
/* === UNORDERED == */
div#sub ul {/* TODO - REFINE RULE */
	list-style-type: none;
	list-style-image: url(../images/ul-li.gif);
	list-style-position: outside;
	margin-left: 45px;/* redefined in ie6.css and ie7.css (41px) NB: opera also seems to have a 4px difference for ul too */
}
div#sub ul ul,
div#sub ul ol {
	margin-left: 20px; /* redefined in ie6.css and ie7.css */
}

/* === ORDERED === */
ol  {/* TODO - REFINE RULE */
div#main 	list-style-type: decimal;
	list-style-image:none;
	margin-left: 45px;/* redefined in ie6.css and ie7.css */
}
div#main ol ol,
div#main ol ul {
	margin-left: 20px;/* redefined in ie6.css and ie7.css */
}

/* === DEFINITION === */
dl {/* TODO - REFINE RULE */
	
}
dt {/* TODO - REFINE RULE */
	
}
dd {/* TODO - REFINE RULE */
	
}

/* == TABLES == ----------------------------------------------------------------------------------------------------- */
table {/* TODO - REFINE RULE */
	/* border: 1px solid #E8F4FA; /* CSS by Andrew Lessels */
	/* border-collapse: collapse; /* CSS by Andrew Lessels */
	width: 680px; /*default width - 720 - 40(l/r faux gutter) */
	width: auto; /* CSS by Andrew Lessels */
	margin: 0.5em auto 1em auto;
	margin: 0 0 1.5em 0; /* CSS by Andrew Lessels */
	color: #000;
	/*
	in the case of links with very long text tables are forced wider
	this effects layout in various ways to prevent this we will use
	this technique:
	*/
	/* table-layout: fixed; /* CSS by Andrew Lessels */
	overflow: hidden;
}
caption {/* TODO - REFINE RULE */
	font-weight: bold;
	color: #008CD1;
}
th {/* TODO - REFINE RULE */
	border: 1px solid #E8F4FA;
	text-align: left;
	padding: 2px;
	font-size: 1em;
	font-weight: bold;
	vertical-align: top;
	color: #004970;
}
td {/* TODO - REFINE RULE */
	border: 1px solid #E8F4FA;
	padding: 2px;
	font-size: 1em;
	vertical-align: top;
}
thead {
	background: #6191A9 url(../images/bg/bg-shell.gif) 0 -300px;
	color: #fff;
}
thead th { color: #fff; }
tfoot {
	background: #004970 url(../images/bg/bg-shell.gif) 0 -100px;
	color: #004970;
}
thead th, thead td,
tfoot th, tfoot td {
	border: 0;
	vertical-align: middle;
}
/* === SPECIAL TABLE CLASSES == */
/* turn off borders individually */
table.no-border,
th.no-border,
td.no-border {
	border: 0;
}
/* remove all borders from table level */
table.all-no-border,
table.all-no-border td,
table.all-no-border th {
	border: 0;
}
/* remove all borders and spacing from table level */
table.all-no-border-tight,
table.all-no-border-tight td,
table.all-no-border-tight th {
	border: 0;
	padding: 0;
}
/* alt row style */
tr.even th,
tr.even td {
	background: #fff url(../images/alt-row-bg.gif);
}
/* ==== RESULTS TABLE ==== -------------------------------------------------------------------------- */
/*
realated: == SEARCH RESULTS OPTIONS == : used before and after results table, defined bellow.
*/
table.search-results {
	border: 0;
	width: 100%;
}
table.search-results thead th,
table.search-results thead td {
	background: #fff;
	color: #004a6d;
}

table.search-results th,
table.search-results td {
	border: 0;
	padding: 10px 4px;
	padding: 4px;
}

/* ==== COLLAPSEABLE RESULTS TABLE ==== -------------------------------------------------------------- */
/* 
Usage:	table class="collapse-results"
		all other classes to be added via js
		expacted tr pairs (width matching id/headers - used to group via js and also adds accessibility):
		<tr>
			<th id="result_1" width="50%"></th>
			<td class="align-right"></td>
		</tr>
		<tr>
			<td headers="result_1" width="50%">
				
			</td>
			<td class="align-right">
				
			</td>
		</tr>
*/
/*		
NB: tr.collapse targeting the tr is only required for ie6 which will still display a border if there is one.
	what is important is tr.collapse th and tr.collapse td
*/
table.collapse-results {
	border: 0;
}
table.collapse-results thead th,
table.collapse-results thead td {
	background: #fff;
	color: #004a6d;
}
table.collapse-results th,
table.collapse-results td {
	border: 0;
	padding: 10px 4px;
}
table.collapse-results tr.collapse,
table.collapse-results tr.collapse th,
table.collapse-results tr.collapse td {
	display: none;
}

/* psuedo-link and icon */
table.collapse-results img.icon {
	width: 11px;
	height: 11px;
	margin-left: 4px;
	background-image: url(../images/sprite-plus-minus.gif);
	background-position: -11px 0;
	cursor: pointer;
	cursor: hand; /* ie6 */
}
table.collapse-results img.icon.collapse {
	background-position: 0 0;
}

table.collapse-results table.details {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

table.collapse-results table.details th,
table.collapse-results table.details td {
	padding: 2px 0;
	background: transparent;
}

img.map {
	border: 1px solid #ccc;
}

/* === LAYOUT SPECIFIC TABLES === */
div.main-cols div.col1 table {
	width: 426px; /* 476px - 50 (l/r faux gutter) */
}
div.main-cols div.col2 table {
	width: 200px;/* 244 (*/
	margin: 0 auto;
}

/* = CLASS TOOLS = ____________________________________________________________________________________________________ */
/* == TEXT ALIGNMENT == */
/*	
	replacement methos for depricated align attribute 
	Alailable to any element (unless they have specific rules for the classes) 
*/
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }
.align-justify { text-align: justify; }
.hide {
	position: absolute;
	left: -9999px;
}

/* = CUSTOM ELEMENTS = ________________________________________________________________________________________________ */
/* == BREADCRUMB == _____________________________________________________________________________________________________ */
/*
	Layout for breadcrumb defined in layout.css
*/
p#breadcrumb {
	font-size: 0.85em;
	color: #000;
}
p#breadcrumb a,
p#breadcrumb a:visited {
	color: #000;
	text-decoration: underline;
}
p#breadcrumb a.current,
p#breadcrumb a.current:visited {
	font-weight: bold;
	color: #004a6d;
	text-decoration: none;
}
/* == TIP (div.tip) == -------------------------------------------------------------------------------------------- */
/*
	Tips will have a javascript effect applied to it - background will start light yellow go bright then to white
	there is a light bulb icon in the left and the backgrounds will have to work there to. We can do this with .png
	For ie6 theres a .htc file and css rule in ie6.css to make .png work
*/
div.tip {
	/*min-height: 45px;*/ /* 69 (height of light bulb image) - 15(padding top of p tag) */
	/* as long as were using an actual img tag in tips we dont need to set min-height */
	background: #fffeed;/*test: background: green;*/
	xxxxmargin-bottom: 0.5em;

	left: -25px;
	position: relative;
	top: -10px;
	width: 720px;
}
/* bind clearfix directly to div.tip */
div.tip:after { 
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
div.tip {  
    display: inline-block;  
} 
/* NB: html must have a xmlns attribute */
html[xmlns] div.tip {  
    display: block;  
}  
* html div.tip {  
    height: 1%;  
} 

div.tip img.light-bulb {
	width: 75px;
	height: 69px;
	float: left;
}
div.tip p {
	float: left;
	width: 641px; /* div#main width - light-bulb - l/r padding, default width (subpage style) */
	padding: 15px 2px 2px 2px;
}
div.tip strong {
	color: #004B6B;
}
div.tip p.important {
	color: red;
}
/* === TIP CLASS SPECIFIC RULES === */
/* ==== HOME PAGE (where div#shell has class .home) ==== */
div.home div#main div.tip {
	width: 477px; /* div.home div#main width + 1 (for ie6)*/
	left: 0;
	top: 0;
}
div.home div#main div.tip p {
	width: 384px; /* tip width - light-bulb width - l/r padding*/
}

/* == FEATURES LIST FOR HOME PAGE == -------------------------------------------------------------------------------- */
div.home ul#features {
	list-style-type: none;
	list-style-image: none;
	margin: 1em 30px 2em 30px;
}
div.home ul#features li {
	margin-bottom: 0.5em;
	min-height: 60px;/* height set in ie6.css */
	position: relative;
	padding-left: 140px;
	padding-top: 12px;
	line-height: 18px;
}
div.home ul#features a.sellfree {
	display: block;
	width: 125px;
	height: 60px;
	background: transparent url(../images/text_replace/feature-text-sellfree.gif) no-repeat;
	position: absolute;
	top: 0;
	left: -5px;
	text-indent: -9999px;
}
div.home ul#features a.search {
	display: block;
	width: 125px;
	height: 40px;
	background: transparent url(../images/text_replace/feature-text-search.gif) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -9999px;
}
div.home ul#features a.browse {
	display: block;
	width: 125px;
	height: 40px;
	background: transparent url(../images/text_replace/feature-text-browse.gif) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -9999px;
}
div.home ul#features a.showcase {
	display: block;
	width: 125px;
	height: 40px;
	background: transparent url(../images/text_replace/feature-text-showcase.gif) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -9999px;
}

/* == RSS FEEDS ON HOME PAGE == -------------------------------------------------------------------------------------- */
div.home #rss-feeds {
	background-color: #E8F4FA;
}
div.home #rss-feeds #latest-share-activity,
div.home #rss-feeds #latest-blog-activity {
	width: 250px;
	float: left;
	color: #333;
}
div.home #rss-feeds #latest-share-activity {
	margin-right: 4px;
}
div.home #rss-feeds h3 {
	font-size: 11px;
	color: #E3F1F9;
	padding: 4px 5px;
	background-color: #0C3C5D;
}
div.home #rss-feeds .blog-item {
	background-color: #fff;
	padding: 5px;
	margin-bottom: 2px;
	font-size: 12px;
}
div.home #rss-feeds .activity-item {
	background-color: #fff;
	padding: 5px;
	margin-bottom: 2px;
	font-size: 12px;
	float: left;
	width: 240px;
	clear: both;
}
div.home #rss-feeds .activity-item .user {
	float: left;
	width: 53px;
}
div.home #rss-feeds .activity-item .activity-message {
	float: left;
	width: 187px;
}
div.home #rss-feeds span.date {
	float: right;
	color: #666;
	font-size: 10px;
	margin: 0 0 5px 5px;
}
div.home #share-links {
	padding: 4px 5px;
	background-color: #0C3C5D;
	clear: left;
	float: left;
	width: 494px;
	color: #E3F1F9;
}
div.home #share-links ul {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
div.home #share-links ul li {
	display: inline;
	font-size: 11px;
}
div.home #share-links a {
	color: #E3F1F9;
	font-weight: bold;
	text-decoration: none;
	padding: 0 2px;
}
div.home #share-links a:hover {
	text-decoration: underline;
}
/* == GOOGLE ADS (in sub) == ----------------------------------------------------------------------------------------- */
div#sub div.google {
	background: #fff;
	padding: 0.5em 0;
	margin-bottom: 1em;
}
div#sub div.google h2 {
	margin: 0;
	font-size: 0.9em;
}
div#sub div.google h3{
	font-size: 1em;
}
div#sub div.google p {
	padding: 0 5px 0.5em 20px;
	line-height: 1.2em;
}

/* == SEARCH RESULTS OPTIONS == --------------------------------------------------------------------------------------- */
/*
	div.search-results-options - layout defined in layout.css
	form.sortby defined in forms.css
	
	expected: .col2 of has class .pagination for the previous/pages/next links
*/
div.search-results-options p.pagination {
	text-align: right;
	padding: 0 25px;
	padding: 0; /* CSS by Andrew Lessels */
	color: #008DCF;
}
div.search-results-options p.pagination span.pages {
	margin: 0 15px;
}
/* == PREVIOUS/NEXT PAGE LINKS IN div#content_btm_row == --------------------------------------------------------------- */
/*
	Usage:
			Use inside div#content_btm_row
			Previous: either alone or with next - <span class="previous">&lt; <a href="#">Back to Previous page</a></span>
			Next (with previous): - <span class="next"><a href="#">Next page</a> &gt;</span>
			Next (ONLY): - <span class="next-only"><a href="#">Next page</a> &gt;</span>
*/
div#content_btm_row span.previous {
	display: block;
	width: 466px;/* 495 (/990 / 2) - 29 (padding left)*/
	float: left;
	padding: 2px 0 2px 29px;
	color: #008DCF;
}
div#content_btm_row span.next {
	display: block;
	width: 210px; /* 495 (/990 / 2) - 285 (padding right) */
	float: left;
	text-align: right;
	padding: 2px 285 2px 0; /* padding right 260(default div#sub width + 25) */
	color: #008DCF;
}
div#content_btm_row span.next-only {
	display: block;
	width: 705px; /* 990 - 285 (padding right) */
	float: left;
	text-align: right;
	padding: 2px 285 2px 0; /* padding right 260(default div#sub width + 25) */
	color: #008DCF;
}
/* BEGIN CSS by Andrew Lessels */
div#header h2 {
	left: 240px; 
	position: absolute; 
	top: 43px; 
	font-size: 14px; 
}
table.search-results thead th {
	background-color: #E8F4FA;
	border-bottom: 2px solid #B4E3FA;
}
table.search-results thead th.no-text {
	background-color: #FFF;
	border-bottom: 0;
}
table td.col-comments,
p.col-comments {
	color: #666;
}
div.home div#main form {
	margin: 10px 0;
}
/* END CSS by Andrew Lessels */