@import url('base.css');

body {
	font: 0.8125em "Lucida Sans", verdana, arial, helvetica, sans-serif;
	line-height: 1.25;
	color: #000;
	background: white url(../images/background.jpg) top repeat-x fixed;
	margin:0 auto;
	width:900px;
}

/**
 * Header 
 */
#header {
	color:#000;
	background:#fff;
	font-family: verdana, arial, sans-serif;
	padding:10px 20px 0 20px;
	height:78px;

	overflow:hidden;
	zoom:1;
	
	height:100px;
}

#header .wrapped-header {}

#header .brand {
	float:left;
	z-index:10;
}

#header #user-info {
	list-style:none;
	float:right;
}

/*
#header ul {
	margin:10px 0 0 0;
	padding:0;
	list-style:none;
	float:right;
	clear:right;
}

#header ul li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	font-size:85%;
}
*/
/*
#header ul li a {
	float:left; 
	padding:0 10px;
	color:#807A7A;
	text-decoration:none;
	border-right:1px solid #bbb;
	text-align:center;
}

#header ul li.last-child a {
	border-right:0;
	padding-right:0;
}
*/
/* with icon */
/*
#header ul li a img {
	border:0;
	vertical-align:middle;
	margin-right:3px;
}


#header ul li a:hover {
	color:#720000;
}

#header ul li a.current {
	font-weight:bold;
}

#header ul li.current a {
	font-weight:bold;
}

#header div.top-nav ul.nav
{
	
}
*/

/**
 * Area between header and content body
 */
#fold {
	background-color:#fff;
	padding:10px;
}

#fold div.primary {
	/* left side rounded goodness */
	background:/*#720000*/ url(../images/fold-rounder-thick.png) top left no-repeat;
	margin-right:10px;
	height:19px;
}

#fold div.primary div.content {
	/* right side rounded goodness */
	float:right;
	background:/*#720000*/ url(../images/fold-rounder-thick.png) top right no-repeat;
	height:19px;
	margin-left:10px;
	margin-right:-10px;
	padding-right:10px;
	color:white;
}

#fold div.primary a {
	font-weight: bold;
	font-size:11px;
	padding:0;
	/*color:#eca83b;*/
	color:white;
	text-decoration:none;
}

#fold div.primary a:hover {
	color:#fff;
}

/* left side rounded goodness */
#fold div.secondary {
	background:/*#eda83b*/ url(../images/fold-rounder-light.png) top left no-repeat;
	margin-top:3px;
	margin-right:10px;
	height:16px;
}

/* right side rounded goodness */
#fold div.secondary div.content {
	float:right;
	background:/*#eda83b*/ url(../images/fold-rounder-light.png) top right no-repeat;
	height:16px;
	margin-left:10px;
	margin-right:-10px;
	padding-right:10px;
}

#fold div.secondary a {
	font-size:11px;
	padding:0;
	color:#720000;
	text-decoration:none;
}

#fold div.secondary a:hover {
	color:#fff;
}


/**
 * Content body stuff
 */

/* content wrapper encapsulates everything below header (i.e. the fold, content, and footer sections */
#content-wrapper {}

/**
 * Three column fixed-liquid-fixed centered layout.
 * This method uses the unsemantic, ordered-floating-divs technique
 * (left-right-center in code, eg http://www.manisheriar.com/holygrail/).
 * The reason for not using ALA's holy grail technique
 * (http://www.infocraft.com/articles/holy_grail_on_a_list_apart/)
 * is that it only works for fullwidth layouts (albeit the most
 * popular application of such a technique). However, when
 * centering the layout as we are, resizing horizontally in IE6
 * (and only IE6!) causes the left column to shift unpredictably.
 * I couldn't figure out the fix so we're going with this instead.
 */
#content {
	background: #fff;
	color: #000;
	padding-top:10px;
	padding-bottom:10px;
}

/* three column layout (|left|center|right|) */
body.layout-lcr #main {
	margin-left:250px;   /* LC fullwidth */
	margin-right:150px;  /* RC fullwidth + CC padding */
	padding:0 0;         /* CC padding */
}

/* two column layout (|left|center|) */
body.layout-lc #main {
	margin-left:250px;   /* LC fullwidth */
	padding:0 15px;      /* CC padding */
}

/* two column layout (|center|right|) */
body.layout-cr #main {
	margin-right:150px; /* RC fullwidth */
	padding:0 15px;     /* CC padding */
}

/* column |center| */
#main {}

/* column |left| */
#left {
	float: left;
	width: 220px;        /* LC width */
	padding: 0 15px;     /* LC padding */
}

/* column |right| */
#right {
	float: right;
	width: 120px;        /* RC width */
	padding: 0 15px;     /* RC padding */
}

#top {
	padding:0 15px;
}

#bottom {
	padding:0 15px;
}

#footer {
	clear:both;
	font-family:verdana, arial, sans-serif;
	font-size:0.8em;
	height:50px;
	background: transparent url(../images/footer-bg.png) bottom left no-repeat;
	margin-right:15px;   /* pull image in from the right a bit */
	line-height:1.3em;
	border-top:1px solid #bbb;
	position:relative;
}

/* #footer child nav. Rounds off right-side of footer.  */
#footer-nav {
	float:right;
	padding:3px 10px 0 0;
	height:47px;        /* #footer height - our padding-top */
	text-align:right;   /* in case multiple lines */
	margin-right:-15px; /* pull image out to the right a bit */
	background: transparent url(../images/footer-bg.png) bottom right no-repeat;
	line-height:1.5em;
	border-top:1px solid #bbb;
	/* since this is a child of #footer our border 
	 * nests underneath #footer's. Pulls ours up. */
	margin-top:-1px;    /* -border-top width */
}

#blurb {
	margin:0;
	position:absolute;
	padding:5px 0 0 10px;
}


/**
 * Single image rounded corners, fluid width+height
 */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head_inner {
	/* lower-right image */
	background-repeat: no-repeat;
	background-position: bottom right;
	margin: 0;
	padding: 0;
}

.cssbox {
    padding-right: 4px;       /* the gap on the right edge of the image (not content padding) */
}

/* top-right image */
.cssbox_head {
    background-position: top right;
    margin-right: -4px;       /* pull the right image over on top of border */
    padding-right: 8px;       /* right-image-gap + right-inside padding */
}

/* top-left image */
.cssbox_head_inner {
    background-position: top left;
    margin: 0;                 /* reset */
    padding: 8px 0 0 8px; /* padding-left = image gap + interior padding ... no padding-right */
}

/* lower-left corner image */
.cssbox_body {
    background-position: bottom left;
    margin-right: 4px;        /* interior-padding right */
    padding: 0 0px 8px 8px; /* mirror .cssbox_head right/left */
}

/**
 * Simple styled curved around a div
 */
.corner-curve {
	padding:3px 7px 0 0;
	background: transparent url(../images/corner-gradient.gif) top right no-repeat;
}

/**
 * Page/Layout specific instructions
 */

h1.page-title {
	font-size: 30px;
}

/*
Notes:
[1] - http://www.robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/
*/


/*** Nav bar styles ***/

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: gray;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
/*filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;"*/
}

#navcontainer ul li {
 display: inline; 
 /*ilter:alpha(opacity=65);-moz-opacity:.65;opacity:.65;"*/
 }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: black;
color: White;
font-weight:bold;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
/*filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;"*/
}

#navcontainer ul li a:hover
{
background-color: darkred;
color: #fff;
}








ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
	margin: 0;
	padding: 0;
	cursor: default;
	list-style-type: none;
	display: inline;
}

ul.nav{
	display: table;
}
ul.nav>li{
	display: table-cell;
	position: relative;
	padding: 2px 6px;
}


ul.nav li>ul{
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	max-width: 40ex;
	margin-left: -6px;
	margin-top: 2px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
	display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding: 2px 10px;
}

/*** Menu colors (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
	/*background-color: #fff;*/
	background-color: #fff;
	filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;"
	color: #369;
}


ul.nav li:hover,
.nav ul li a:hover{
	background-color: #369;
	color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
	background-color: black;
	color: #fff;
}

ul.nav,
.nav ul{
	border: 1px solid #369;
}

.nav a{
	text-decoration: none;
}



ul.nav{
	display: table;
	width: 100%;
	table-layout: fixed;
}