/* ICONZ CSS stylesheet

Author: Stewart Cromar
Revision Date: 29 July 2009

Index
~~~~~
01 #menu-top
02 #content
03 .photo
04 #crumbs
05 #menu-page
06 #footer
07 .cloud .tag
08 .tabs
09 #menu-middle
10 .post
11 <table>
12 Members Area
13 Paging
14 Forms
15 Sidebar

*/

body {
	font-family: trebuchet ms, verdana, arial, tahoma;
	font-size: 90%;
	/*color: #888888;*/
	color: #666666;
	background-color: white;
	line-height: 180%;
	margin: 0;
	padding: 0;
	text-align: center;
}

p {
    line-height: 150%;
}

ul,ol {
    line-height: 130%;
}

h2 {
	font-size: 110%;
	clear: left;
}

h3 { font-size: 100%; }

a:link, a:visited { color: #5B8FBE; text-decoration: none; }

a:hover{ color: #666666; text-decoration: none; }

hr {
	color:#AAAAAA;
	border-bottom:1px solid;
    height:1px;
	border-top: none;
	margin-top:0px;
	margin-bottom:0px;
	clear: both;
}

/* 01 #menu-top ------------------------------------------------------------- */

/* Set the page width here */
#menu-top, #header, #wrapper-content, #wrapper-footer {
	width: 85%;
	margin: 0 auto;
	text-align: left;
}

#menu-middle { 
	width:100%;
	background:transparent url(../images/bg02-white-right.png) no-repeat scroll right top;
	float:left;
}

#menu-top {
	background: white url('../images/bg02-white-right.png') no-repeat right top;
	overflow: hidden;
}

#menu-top ul {
	background: transparent url('../images/bg02-white-left.png') no-repeat left top;
	margin:0;
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
	padding-left: 20px;
}

#menu-top li {
	display: inline;
	float: left;
}

#menu-top a {
	float: left;
	background: url(../images/menuleft.png) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	line-height: 1.5em;
}

#menu-top a span {
	background: transparent url(../images/menuright.png) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#5B8FBE;
	display: block;
	float: left;
	cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

#menu-top a:hover { background-position:0% -42px; }
#menu-top a:hover span {	background-position:100% -42px; }

.menu-top-active {
	background: url(../images/menuleft_active.png) no-repeat left top !important;
}

.menu-top-active span {
	background: transparent url(../images/menuright_active.png) no-repeat right top !important;
}

#nudge-top {
	display: block;
	float: right;
	font-size: 85%;
	margin:0;
	padding:12px 15px 0px 0px;
}

#menu-top #nudge-top a 
{
	background:none;
	padding:5px;
}

#menu-top #nudge-top a span {
	background: none;
	padding:5px 5px 4px 5px;
}

#menu-top #nudge-top a:hover {
	color: #5B8FBE;
	text-decoration: underline;
}


#wrapper-header {	background: transparent url('../images/bg.png') top center repeat-x; }

#header { background: #FFF2E6 url('../images/sunset_1600x122.jpg') repeat-x center top; } 

#logo {
    background: transparent url('../images/ICONZ_logo.png') no-repeat;
    background-position: 25px 10px;
}

#wrapper-header3 a {
	display:block;
	width:100%;
	height:122px;
}

#wrapper-header3 a:hover {
	background: transparent url('../images/logo_final_blue.gif') no-repeat;
	/* horiz & vert */
	background-position: -7px 2px;
}

#wrapper-header2 { background: transparent url('../images/bg02-blue-left.png') top left no-repeat; }

#wrapper-header3 { background: transparent url('../images/bg02-blue-right.png') top right no-repeat; }

#header h1 {
	margin: 0 20px;
	padding: 0;
	/* this height corresponds to the height of the 2 'bg02-blue' images */
	height: 122px;
	line-height: 3em;
	color: #CCCCCC;
	font-size: 130%;
}

#wrapper-content { background: white url('../images/bg02-white-left.png') no-repeat left top; }

* html #wrapper-content { height: 1%; }

/* 02 #content -------------------------------------------------------------- */

#content, #wrapper-content2 {
	background: transparent url('../images/bg02-white-right.png') no-repeat right top;
	padding: 5px 40px 5px 40px;
}

#content.maincolumn, #wrapper-content2.maincolumn 
{
	float: right;
	width: 70%;
	padding: 5px 40px 5px 0;
}

#content ul, .content ul
{
	line-height: 140%;
	list-style:disc none inside;
}

#content ol, .content ol
{
	line-height: 140%;
	list-style:decimal none inside;
}

#content li, .content li
{
	margin-left:12px;
}

#content a, .content a {
	text-decoration: underline;
}

#content a:hover, .content a:hover {
	text-decoration: underline;
}

/* 03 .photo --------------------------------------------------------------- */

#content .photo-block {
	padding: 10px 0px 0px 0px;
}

#content .photo-left-caption {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
	border: 1px dashed #BBBBBB;
	padding: 10px;
}

#content .photo-left {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
}

#content .photo-right {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	text-align: center;
}

#content .photo-right-caption {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	text-align: center;
	border: 1px dashed #BBBBBB;
	padding: 10px;
}

#content .photo-caption {
    font-size: 80%;
    line-height: 150%;
	margin: 0px 0px 0px 0px;
}


/* 04 #crumbs --------------------------------------------------------------- */

#crumbs {
    font-weight: bold;
	font-size: 90%;
}

#crumbs a {
	background: none;
}

/* 05 #menu-page ------------------------------------------------------------ */

#wrapper-menu-page {
	float: right;
	width:280px;
	margin: 20px 35px 20px 20px;
	background: transparent url('../images/menu_280.png') no-repeat;
	text-align: center;
	line-height: 140%;
	font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
}

* html #wrapper-menu-page { margin-right: 15px; }

#menu-page { padding-top: 5px; }

#partners {
	margin: 10px 10px 10px 10px;
	padding: 0;
	text-align: left;
    font-size: 85%;
}

#menu-page li {
	line-height: 130%;
}

#menu-page img {border:0px;margin:5px;padding:0px}

#menu-page h3 {
	text-transform: uppercase;
	margin: 1em 0 0.3em 0;
	color: #5B8FBE;
	font-weight: normal;
	letter-spacing: 0.15em;
}

#menu-page a:link, #menu-page a:visited { color: #666666; }
#menu-page a:hover { color: #5B8FBE; }

/* 06 #footer ------------------------------------------------------------ */

#wrapper-footer {
	margin-top: 1em;
	text-align: center;
}

#footer {
	margin: 0 20px;
	background-color: #FFF2E6;
	border: 1px solid #CCCCCC;
	border-bottom: 0;
	clear: both;
	font-size: 75%;
}

/* 07 .cloud .tag -------------------------------------------------------- */

.cloud {
	/*margin: 10px;*/              /* no float */
	/*margin: 0px 10px 10px 0px;*/ /* float left */
	margin: 0px 0px 10px 10px;     /* float right */
	padding: 10px;
	text-align: center;
	border: 1px dashed #5B8FBE;
	line-height: 250%;
	float: right;
	width: 33%;
}

.tag {
	color: #25548F;
	background-color: #B0D3FA;
	border-bottom: 1px solid #25548F;
	border-right: 1px solid #5B8FBE;
	font-size: 90%;
	line-height: 2.2;
	margin: 2px 2px 2px 0px;
	padding: 3px 4px 3px 4px;
	text-decoration: none !important;
	white-space: nowrap;
}

.tag:link, .tag:visited {
	color: #25548F;
}

.tag:hover {
	color: #B0D3FA;
	background-color: #25548F;
	border-bottom: 1px solid #25548F;
	border-right: 1px solid #25548F;
	text-decoration:none;
}

.cloud-list {
	margin-top: 10px;
	padding-top: 4px;
	padding-bottom: 8px;
	text-align: left;
	border: 1px dashed #5B8FBE;
    float: left;
    clear:left;
    width:100%;
}

.tag-multiplier{
    font-weight:bold;
    margin-right:4px;
    color: #888888;
}

p.tagList
{
	font-size:80%;
	padding-top:4px;
}

/* 08 .tabs -------------------------------------------------------- */
 
.tabs a {
    background-color: #666666;
    border: 1px solid #666666;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    color: white !important;
    /*line-height: 1.9;*/
    line-height: 2.5;
    margin: 0px 3px 0px 0px;
    padding: 4px 6px 4px 6px;
    font-size: 90%;
    white-space: nowrap;
}

.tabs a:hover {
    background-color: #888888;
    border-color: #888888;
}

.tabs-active {
	background-color: #EEA95C !important;
	border-color: #EEA95C !important;
}

/* 09 #menu-middle -------------------------------------------------------- */
/* ----- ... and Group Menu (.hanging.tab )*/

#menu-group { float:left; clear:left; }

#menu-middle ul {
	background: transparent url('../images/bg02-white-left.png') no-repeat left top;
	margin:0px 0px 10px 0px;
	padding: 0em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
	padding-left: 20px;
}

ul.hanging.tab 
{
	margin:0px 0px 10px 0px;
	padding: 0;
	list-style: none;
	font-size: 85%;
	float: left;
}

#menu-middle li, .hanging.tab li {
	display: inline;
	float: left;
}

#menu-middle a, .hanging.tab a {
	float: left;
	background: url(../images/menuleft_alt.png) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	line-height: 1.5em;
	background-position:0% -57px;
}

#menu-middle a span, .hanging.tab a span {
	background: transparent url(../images/menuright_alt.png) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#5B8FBE;
	display: block;
	float: left;
	cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
	background-position:100% -57px; 
}

#menu-middle a:hover, .hanging.tab a:hover { background-position:0% -15px; }
#menu-middle a:hover span, .hanging.tab a:hover span {	background-position:100% -15px; }

#nudge-middle {
	display: block;
	float: right;
	font-size: 85%;
	margin:0;
	padding:0px 15px 0px 0px;
}

.menu-middle-active, .hanging.tab .active {
    background:url(../images/menuleft_alt_active.png) no-repeat left top !important;
    background-position:0% -57px !important;
}

.menu-middle-active span, .hanging.tab .active span {
    background: transparent url(../images/menuright_alt_active.png) no-repeat right top !important;
    background-position:100% -57px !important;
}

#menu-middle #nudge-middle a {
	background: none;
}

#menu-middle #nudge-middle a span {
	background: none;
	padding:5px 5px 4px 5px;
}

#menu-middle #nudge-middle a:hover {
	color: #5B8FBE;
	text-decoration: underline;
}

/* 10 .post -------------------------------------------------------- */

.post {
	background-color: #EEEEEE;
	margin: 0px 0px 10px 0px;
}

.post .title {
	padding: 10px 0px 0px 15px;
	margin: 0px 0px 0px 0px;
}

.post .meta {
	border-bottom: 1px dashed #666666;
	padding: 0px 0px 5px 15px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	margin: 0px 0px 0px 0px;
}

.post .meta a {
	color:#666666;
	background: none;
	border-bottom: 0px;
}

.post .entry {
	padding: 5px 15px 5px 15px;
	text-align: justify;
}

/* 11 <table> -------------------------------------------------------- */

table {
	background-color: #ffffff;
}

.table-headers {
	font-weight: bold;
	font-size: 100%;
}

td,tr {
    line-height: 150%;
	vertical-align:top;
}

table.layout td
{
	border-top:1px #DEDEDE solid;
	padding:3px;
}

/* 12 Members Area -------------------------------------------------------- */

#PrfImg {
    padding: 10px 10px 10px 10px;   
	float: left;
	margin: 0px 10px 10px 0px;
	text-align: center;
	border: 1px dashed #BBBBBB;
}

.clear { clear:both; }

/* 13 Paging Controls ------------------------------------------------------ */

.paging p { font-weight:bold; padding:4px; }
.paging a { padding:1px 6px; background-color:#efefef; border:1px solid #CCC; text-decoration:none; }
.paging a:hover { background-color:#333; color:#efefef; }

/* 14 Form Layout ---------------------------------------------------------- */

fieldset  
{
	padding:10px; 
	border:1px solid #DDD; 
	margin-bottom:20px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
legend { font-size: 1.2em; padding:0 8px; }

ol.forms { float: left; list-style: none; width: 100%; }
ol.forms li {
	clear: both;
	float: left;
	margin: 0 0 10px;
	width: 100%;
}
ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	font-weight: bold;
	margin: 0 10px 0 0;
	width: 130px;
}
ol.forms input, ol.forms textarea {
	font: inherit;
	padding: 2px;
	width: 300px;
}
ol.forms textarea { height: 250px; }
ol.forms li.grouping label { margin: 0; width: auto; }
ol.forms li.grouping { margin-bottom: 0; }
ol.forms li.grouping ul { list-style: none; margin-left: 100px; }
ol.forms li.grouping ul label {
	display: inline;
	float: none;
	font-weight: normal;
	margin: 0 0 0 10px;
	width: auto;
}
ol.forms li.grouping ul input { width: auto; }
ol.forms li.inline label { width: auto; float:none; display:inline; }
ol.forms li.inline input { width: auto; display:inline; }

ol.forms li.buttons { float: none; margin-left: 140px; width: auto; }


/* ----- Tags ------------------------------------------- */
.tag {
	color: #000;
	background-color: #B0D3FA;
	border-bottom: 1px solid #25548F;
	border-right: 1px solid #5B8FBE;
	line-height: 2.2;
	margin: 2px 2px 2px 0px;
	padding: 3px 4px 3px 4px;
	text-decoration: none !important;
	white-space: nowrap;
}

.tag:link, .tag:visited {
	color: #000;
}

.tag:hover {
	color: #B0D3FA;
	background-color: #25548F;
	border-bottom: 1px solid #25548F;
	border-right: 1px solid #25548F;
	text-decoration:none;
}

.cloud-list {
	margin-top: 10px;
	padding-top: 4px;
	padding-bottom: 8px;
	text-align: left;
	border: 1px dashed #5B8FBE;
    float: left;
    clear:left;
    width:100%;
}

.tag-multiplier{
    font-weight:bold;
    margin-right:4px;
    color: #888888;
}

p.tagList
{
	font-size:80%;
	padding-top:4px;
}

/* 15: SideBar */

#sidebar {
	float: left;
	width: 20%;
	padding: 5px 0 5px 30px;
	color: #333;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
}

#sidebar li ul {
	padding-bottom: 30px;
}

#sidebar li li {
	padding: 8px 0;
	border-bottom: 1px dashed #B7CDAC;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2, h2.grouptitle {
	padding: 8px;
	background: #555 url('/images/gradient-dark-grey.gif') repeat-x top left;
	letter-spacing: -.5px;
	color: #FFFFFF;
	font-size: 1.4em;
	line-height: 100%;
}

#sidebar p {
	padding-bottom: 20px;
	text-align: justify;
}

#sidebar a {
	/*color: #417FDA;*/
	color: #5B8FBE;
	border: none;
}

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