/*
 - CSS/XHTML: Jase | 5Q Communications
 - Feb/March 2008
*/

* {
	padding:0;
	margin:0;
	background-repeat:no-repeat;
	background-position:0 0;
	}

/* ================================= *
 *  - Initial Controls
 * --------------------------------- */
body {
	font: 10px Arial, Helvetica, sans-serif;
	color:#333;
	}

/* ================================= *
 *  - 5Q Sticker
 * --------------------------------- */
a#fiveq_sticker {
	position:absolute;
	display:block;
	width:100px;
	height:15px;
	overflow:hidden;
	background-image: url(/assets/templates/fiveq/gui/5Q_sticker.gif);
	}
a#fiveq_sticker:hover {
	background-position: 0 100%;
	}
a#fiveq_sticker span {
	overflow:hidden;
	position:absolute;
	left:-500px;
	}
/* ================================= *
 *  - UTILITY STYLES
 * --------------------------------- */
*.none {display:none;}
*.fix {clear:both;height:1px;}
*.clearleft {clear:left;}
*.clearright {clear:right;}
*.red {color:#ca1e34;}
*.green {color:#34ca1e;}
*.orange {color:#f60;}
*.grey {color:#999;}
*.left {float:left;}
*.right {float:right;}
*.aright {text-align:right;}
*.acenter {text-align:center;}
*.aleft {text-align:left;}

img.right {margin:0 0 18px 18px;}
img.left {margin:0 18px 18px 0;}
div.left.columns {padding-right:2em;}

acronym {cursor:help;}

/* ================================= *
 *  - Layout Position Controls 
 * --------------------------------- */
body {
	/* background: #fffece url(/assets/templates/fiveq/gui/bg-page.gif) repeat-x 0 0; */
	text-align:center;
	background: #fffece url(/assets/templates/fiveq/gui/bg-world.png) no-repeat 50% 0;
	}
#shell {
	background-image: url(/assets/templates/fiveq/gui/bg-shell.gif);
	background-repeat: repeat-y;
	background-position: 50% 0;
	}
#subshell {
	background:transparent url(/assets/templates/fiveq/gui/bg-subshell.gif) no-repeat 50% 0;
	padding:0 0 75px 0;
	}
#wrapper,
#subwrapper {
	position:relative;
	text-align:left;
	width:962px;
	margin:0 auto;
	}
#wrapper {
	background-image: url(/assets/templates/fiveq/gui/bg-main_alt.png);
	background-position: 50% 184px;
	}
#header {
	text-align:left;
	height:184px;
	background-image: url(/assets/templates/fiveq/gui/bg-masthead.png);
	}
#header h1 {
	}
#header h4 {
	position:absolute;
	top:-100px;
	}
#header #logo a {
	position:absolute;
	display:block;
	top:-31px;
	left:-15px;
	width:271px;
	height:174px;
	background-image: url(/assets/templates/fiveq/gui/logo-dawn.png);
	z-index:200;
	}
#header h1 span,
#header h2 span {
	position:absolute;
	top:-1000px;
	}
#flank_left,
#flank_right {
	position:absolute;
	top:0;
	height:440px;
	}
#flank_left {
	/* left:-215px;
	width:215px; */
	background-image: url(/assets/templates/fiveq/gui/flank-left.png);
	left:-9px;
	width:9px;
	background-position:100% 0;
	}
#flank_right {
	left:962px;
	/* width:139px; */
	background-image: url(/assets/templates/fiveq/gui/flank-right.png);
	width:9px;
	}
#main {
	position:relative;
	clear:both;
	height:auto !important;
	min-height:500px;
	height:500px;
	overflow:visible;
	padding:0 1px;
	}
#contentwrapper {
	float:left;
	width:636px;
	}
#content {
	padding:20px;
	}
#siderail {
	width:324px;
	float:right;
	position:relative;
	}
#footer {
	position:relative;
	clear:both;
	}

#legal {
        width: 830px;
	position:relative;
	clear:both;
	padding:15px 20px;
	font-size:11px;
	color:#7D7D64;
	}
#legal a {
	color:#7D7D64;
	font-weight:bold;
	}
#legal p.left {padding-right:150px;}




/* ================================= *
 *  - Link Styles 
 * --------------------------------- */
a {
	color:#36c;
	text-decoration:none;
	cursor:pointer;
	}
#main a {
	color:#334fae;
	}
#header a {color:#69c;}
#main a:hover {
	text-decoration:none;
	}
#main h2 a {
	color:#f60;
	text-decoration:none;
	}
#footer a {
	color:#69c;
	}
* a.external {
	background-position: 100% 50%;
	padding-right: 13px;
	}
* h2 a.external {
	padding-right: 18px;
	}
a:hover,
#nav #subnav a:hover,
#content .post h2 a:hover,
#footer a:hover,
#siderail a:hover {
	color:#039;
	}
#siderail h2 a {
	color:#c30;
	}
#siderail h2 a:hover {
	text-decoration:none;
	color:#f60;
	}
#siderail h3 a {
	color:#223;
	}
#siderail h3 a:hover {
	text-decoration:none;
	color:#36c;
	}

/* ================================= *
 *  - Utility Nav and Links
 * --------------------------------- */
#utility_nav {
	float:right;
	padding:22px;
	color:#fff;
	font-size:13px;
	}
#utility_nav a {
	color:#fff;
	}
#print_email,
#jumper {
	float:right;
	width:302px;
	}
.utility-links {
	font-family:Arial, sans-serif;
	font-weight:bold;
	}
.utility-links a {
	color:#335;
	background-image: url(/assets/templates/fiveq/gui/icons-utility.gif);
	padding:0 20px;
	}
a#functionPrint {background-position:0 0;}
a#functionEmail {background-position:0 50%;}
a#functionTop {background-position:0 100%;}


/* ================================= *
 *  - Button Styles 
 * --------------------------------- */
div.button {
	font-size:12px;
	font-family:"Trebuchet MS", Arial, sans-serif;
	height:40px;
	}
div.button a {
	display:block;
	border:0;
	color:#fff;
	cursor:pointer;
	height:40px;
	text-align:center;
	padding-left:20px;
	text-decoration:none;
	background-image: url(/assets/templates/fiveq/gui/button-source.png);
	background-position:0 0;
	}
div.button a span {
	display:block;
	padding-top:11px;
	height:29px;
	padding-right:20px;
	text-decoration:none;
	background-image: url(/assets/templates/fiveq/gui/button-source.png);
	background-position:100% 0%;
	}
#main div.button a {
	color:#fff;
	text-decoration:none;
	}

div.button a:hover{background-position:0 -40px;}
div.button a:hover span {background-position:100% -40px;}

#siderail div.button a{background-position:0 -80px;}
#siderail div.button a span {background-position:100% -80px;}
#siderail div.button a:hover{background-position:0 -120px; color:#fff;}
#siderail div.button a:hover span {background-position:100% -120px;}


div.button.small {width:80px;}
div.button.medium {width:125px;}
div.button.large {width:180px;}

/* ================================= *
 *  - Main/Sub Navigation Controls
 * --------------------------------- */
#nav {
    position:absolute;
    z-index:500;
    width:960px;
    top:60px;
    left:1px;
    height:39px;
    top:144px;
    }
#nav ul {
    list-style:none;
    }
#nav ul li {
    float:left;
    position:relative;
    font-size:12px;
    }
#nav ul li a {
    display:block;
    text-align:left;
    }
#nav ul ul {
    position: absolute;
    left:18px;
    top:38px;
    display:none;
    z-index:900;
    }
#nav ul ul li a {
    margin:0 6px 0 2px;
    }
#nav li:hover ul,
#nav li.over ul {
    display:block;
    }

/* ================================= *
 *  - Main/Sub Navigation Controls L1
 * --------------------------------- */
ul#menu {
    height:35px;
    position:absolute;
    }
ul#menu li a {
    color:#fff;
    height:39px;
    }
ul#menu li a span {
    display:block;
    padding:11px 0;
    text-align:center;
    font-size:14px;
    }
/*home*/
li#nav_1 a {width:81px;}
/*about*/
li#nav_12 a {width:121px;}
/*work*/
li#nav_23 a {width:148px;}
/*news*/
li#nav_56 a {width:122px;}
/*contact*/
li#nav_4 a {width:114px;}
/*email*/
li#nav_25 a {width:136px;}
/*donate*/
li#nav_27 a {width:92px;}
/*free*/
li#nav_26 a {width:146px;}

ul.l1 li:hover a,
ul.l1 li.over a {
    color:#fff;
    height:39px;
    background: #CD0000 url(/assets/templates/fiveq/gui/nav-active_b.png) repeat-x;
    }
ul#menu.l1 li.active a {
    color:#ffc;
    background-color: #CD0000;
    }

/* ================================= *
 *  - Main/Sub Navigation Controls L2
 * --------------------------------- */
li#nav_1 ul a,
li#nav_12 ul a,
li#nav_23 ul a,
li#nav_56 ul a,
li#nav_4 ul a,
li#nav_25 ul a,
li#nav_27 ul a,
li#nav_26 ul a {width:173px;}


#nav ul ul {
    border:0px solid #f60;
    }
#nav ul ul li {
    background-image:url(/assets/templates/fiveq/gui/nav-flyout.png);
    background-position: 0 50%;
    display:block;
    width:188px;
    clear:left;
    }
#nav ul ul li a,
#nav ul ul li:hover ul li a,
#nav ul ul li.over ul li a,
ul#menu.l1 li.active ul li a  {
    background:none;
    height:14px;
    padding:5px 0 5px 5px;
    color:#2C4F73;
    font-style:normal;
    font-weight:normal;
    display:block;
    }
#nav ul ul li.active a,
ul#menu.l1 li.active ul li.active a {
    font-weight:bold;
    color:#f60;
    }
#nav ul ul li a:hover,
ul#menu.l1 li.active ul a:hover{
    font-weight:bold;
    color:#2C4F73;
    background-image:url(/assets/templates/fiveq/gui/nav-flyout_hover.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }

#nav ul ul li.first {background-position: 0 0;}
#nav ul ul li.first a:hover,
ul#menu.l1 li.active ul li.first a:hover {background-position: 0 2px;}


#nav ul ul li.last {background-position: 0 100%}
#nav ul ul li.last a:hover,
ul#menu.l1 li.active ul li.last a:hover  {background-position: 0 -76px;}

#nav ul ul li.first a,
ul#menu.l1 li.active ul li.first a  {padding-top:7px;}
#nav ul ul li.last a,
ul#menu.l1 li.active ul li.last a  {padding-bottom:13px;}


/* ================================= *
 *  - Crumb Controls 
 * --------------------------------- */
#crumb_head,
#crumb_tail {
    position:relative;
    height:35px;
    left:1px;
    clear:both;
    }
#crumb_tail {
    background-image:url(/assets/templates/fiveq/gui/bg-crumb_tail.png);
    }

.crumb {
    font-size:12px;
    font-style:italic;
    color:#778;
    }
.crumb p,
.crumb div {
    padding:10px 0 0 20px
    }

/* ================================= *
 *  - Content Controls and Styles
 * --------------------------------- */
#main {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height:14px;
	}
#main {
	font-size:13px;
	line-height:1.5;
	}
#main h1,
#main h2,
#main h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight:normal;
	letter-spacing:0px;
	line-height:1;
	margin-bottom:1em;
	}
#content h1 {
	font-size:28px;
	border-bottom:3px solid #223;
	padding-bottom:.3em;
	margin-bottom:.5em;
	}
#main h2 {
	font-size:21px;
	margin-top:1em;
	margin-bottom:.5em;
	}
#main h2 small {
	font-size:12px;
	}
#main h3 {
	margin:1em 0 .5em 0;
	font-size:18px;
	color:#223;
	}
#main h4, 
#main h5, 
#main h6 {
	font-weight:normal;
	letter-spacing:0px;
	line-height:1;
	font-family:"Trebuchet MS", Arial, sans-serif;
	margin:1.5em 0 0 0;
	}
#main h4 {
	color:#f60;
	font-size:15px;
	}
#main h5 {
	color:#f93;
	font-size:12px;
	}
#main h6 {
	color:#666;
	font-weight:bold;
	font-size:11px;
	}
#content hr {
	padding:0;
	margin:2em 0;	
	border:1px solid #445;
	}
#main p {
	margin:1.5em 0 .5em 0;
	}
#main p.boxed {
	border:1px solid #ccc;
	padding:10px;
	background-color:#eee;
	}
#main .page-photo p {
	font-size:11px;
	padding: .5em;
	margin: 0;
	border:1px solid #eee;
	background-color:#f5f5f5;
	color:#778;
	font-family: Arial, sans-serif;
	font-style:italic;
	}
#content ul,
#content ol {
	margin:0 0 1.5em 2.5em;
	}
#content li {
	margin:.3em 0;
	}
#content blockquote {
	padding:.5em;
	border:1px solid #96ADA5;
	font-family:Arial, sans-serif;
	background-color:#EAF8D8;
	}
#main blockquote p {
	margin:.5em 0 .5em 0;
	}
#content dl {
	padding:.5em;
	border:1px solid #ccc;
	font-family:Arial, sans-serif;
	margin:0 0 1em 0;
	}
#content dt {
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;
	}
#content dd {
	font-size:12px;
	padding:0 0 .5em 1em;
	}
#content i {
	color:#556;
	}
#content b {
	color:#223;
	}
small {
	font-size:11px;color:#778;
	}

/* ================================= *
 *  - Sitemap Styles
 * --------------------------------- */
#sitemap ul {list-style:none;margin:0;padding:1em 0 0 0;}
#sitemap li {font-size:15px;font-weight:bold;padding:.3em 0;border-bottom:1px solid #ccc;}
#sitemap ul ul {list-style:square;margin:0 0 1em 2em;padding:0;}
#sitemap li li {font-size:12px;border:0;padding:.2em 0;}
#sitemap li li li {font-size:12px;font-weight:normal;}
#sitemap ul a {text-decoration:none;}
#sitemap ul ul a {text-decoration:underline;}

/* ================================= *
 *  - Footer Controls and Styles
 * --------------------------------- */
#footer p {
	padding:12px 22px;
	color:#fff;
	font-size:13px;
	}
#footer p a {
	color:#fff;
	}

/* ================================= *
 *  - Sidebar, Panel, Rail Controls 
 * --------------------------------- */
#siderail .railbox {
	padding:20px;
	background-image:url(/assets/templates/fiveq/gui/bg-railbox.png);
	background-repeat:repeat-x;
	}
#siderail .railbox.first {
	background-image:none;
	}
#siderail ul {
	font-size:11px;
	margin-left:20px;
	}
#siderail h2 {
	color:#C30;
	margin-top:0;
	}
#siderail h3 {
	font-size:15px;
	margin-top:1em;
	margin-bottom:.3em;
	}
#siderail p {
	font-size:11px;
	color:#556;
	margin-top:.5em;
	}
#siderail ul.articlelist {
	list-style:none;
	margin:0;
	border-bottom:1px dotted #798
	}
#siderail ul.articlelist li {
	border-top:1px dotted #798;
	padding:.2em 0;
	}
#siderail ul.articlelist li.active a {
	color:#778;
	}
/* ================================= *
 *  - Form Controls 
 * --------------------------------- */
input.field,
textarea,
select {
    border:1px solid #999;
    padding:5px;
    font-size:11px;
    font-family:Verdana, sans-serif;
    }
select {padding:0px;cursor:pointer;}
select option {padding:3px;}
select optgroup {padding-top:9px;}
select optgroup option {padding-left:1em;}
select optgroup option.first {border-top:1px solid #AB7845;}
select optgroup option.single {border-top:1px solid #AB7845;}
input.button {
    background-position:50% 40%;
    font-family:Arial, sans-serif;
    border:1px solid #C63900;
    color:#fff;
    cursor:pointer;
    padding:5px 10px;
    font-size:15px;
    background:#FF871B url(/assets/templates/fiveq/gui/bg-button.gif) repeat-x 0 0;
    }
input.clicked {
    color:#667;
    font-style:italic;
    }
form .field, textarea { width:93%; }
form .field.half { width:48%; }
form .field.small {
    width:150px;
    color:#000;
    }
form .field.mini { width:75px; }
form .field.micro { width:3em; }
form .field.nano { width:1.5em; }
form .field.alert { color:#ca1e34;border-color:#ca1e34;background-color:#fed; }
input.req,
textarea.req,
select.req {
    background-color:#fff;
    }
form span {
    color:#456;
    font-family:Arial, sans-serif;
    font-size:11px;
    }

form table { margin-bottom:18px; }
form td, .form th { padding:9px 3px 3px 3px; }
form th {
    white-space:nowrap;
    padding-top:9px;
    text-align:right;
    }
form tr.special th,
form tr.special td {
    background:#fff url(/assets/templates/fiveq/gui/bg-lightblend.gif) repeat-x 50% 100%;
    border:1px solid #e5e5e5;
    padding:10px 3px;
    }
form tr.special th {border-right:0;}
form tr.special td {border-left:0;}

.errors {
    color: #f00;
}
/* ================================= *
 *  - Image Styles and Controls 
 * --------------------------------- */
img.photo {
	border-top:1px solid #dde;
	border-right:1px solid #99a;
	border-bottom:1px solid #99a;
	border-left:1px solid #dde;
	padding:5px;
	background-color:#fff;
	}

/* ================================= *
 *  - Non-Modern (IE 6) Browser Hacks 
 * --------------------------------- */

/* 
 - .htc PNG hack... 
 - Makes IE 6 properly apply PNG alpha transparency */
#header #logo * {_behavior: url(/iepngfix.htc);}
/* End */

/* Load alternate imgs for IE 6 */
#siderail .railbox {
	_background-image:url(/assets/templates/fiveq/gui/bg-railbox.gif);
	}
#siderail .railbox.first {
	_background-image:none;
	}
/* End */

/* Load alternate specs for IE 6 */
#nav ul ul li.last a:hover  {_background-position: 0 -75px;}
/* End */