/* Universal elements and styles */
*       {margin:0; padding:0;}
body    {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%;background-color: #f7f7f7; }
.left   {float:left;}
.right  {float:right;}
.tleft  {text-align:left;}
.tright {text-align:right;}
.clr    {clear:both;height:1px;}
img, a  {border:none;text-decoration:none;}
acronym {border-bottom:dotted 1px #999; cursor:help;}
/* May need to remove this one, keeping it for now */
img a:hover {border:none; outline:none; background-image:none;}
.time   {color:#666;display:block;margin-top:-2px;margin-left:10px;}
.mt10   {margin-top:4px;}
.mt10b  {display:block;margin-top:4px;}
.cen    {text-align:center;float:none;}
div #content .cen img {text-align:center;float:none;padding-right:0}



/* Generic Font rules */
h1 {font-size:1.8em;}
h2 {font-size:1.4em;}
h3 {font-size:1.3em;}
p  {font-size:1.1em;}


/* Main container blocks */
#container {width:962px; margin:0 auto;background-color:white;}
#header    {width:100%;height:75px;}
#menu      {width:100%;}
#subheader {width:100%; height:178px; background: url(../images/bluesky.gif) no-repeat;}
#content   {width:100%;background-color:white;float:left;}
#conttop   {width:962px; overflow:hidden; background-image: url(../images/container-top.gif); background-repeat: no-repeat; height: 13px;margin-top:10px; }
#contmid   {width:960px;border-left:solid 1px #ccc;border-right:solid 1px #ccc;background-color:white}
#contbot   {width:962px; background-image: url(../images/container-bot.gif); background-repeat: no-repeat; height: 13px;margin-bottom:1em; }
#icons     {clear:left;width:100%;margin-bottom:1em;}



/* I want to use the 960 grid system but we need to make sure IE6 plays ball. We "display" and "position" 
to make sure it obeys. This code will stop the peakaboo and box model bugs without the need for hacks */
#left, #middle, #right {width:300px;float:left;margin:0 0 0 17px;display:inline;position:relative;overflow:hidden;}
/* Now we continue with styling each block if needed */
#left   {}
#middle {}
#right  {}
#footer {background-color:#ccdee9;}

/* We have a new class for the content container called .larger so we need to style the left and right content */
#content.larger #left {width:444px;margin:0 0 0 17px;}
#content.larger #right {width:444px;margin:0 0 0 38px;}




/* Header Code */
#header #logo {width:120px;float:left;}
#helpline     {width:365px;float:left;text-align:right;color:#276da2;margin-right:15px;}
#helpline p   {padding-top:28px;}
#header       {width:100%;float:left;height:80px;}
#logo         {width:120px;float:left;}
#loginForm    {background: url(../images/form-back.gif) no-repeat right top; height: 49px; width: 446px;background-color:tan;margin-top:10px;margin-right:4px;float:left;}
#loginForm #top   {}
#loginForm bottom {}  
#loginForm input  {width:161px;color:#999;height:24px;float:left;}
#loginForm p      {float:left;margin:17px 5px 0 8px;display:inline;color:white;}
#loginForm img    {float:left;margin-top:13px;}
#username         {margin:0px 0 0 2px;top:10px}
#password         {margin:0px 0 0 2px;top:10px}
#forgotten a      {color:#999;}
label             {display:none;}
#forgotten        {clear:left;color:#999;text-align:right;position:relative;top:18px;padding-right:65px;}
#username, #password { overflow:hidden; background-color: transparent; border-style:none; border-width:0; display:block; height:24px; position:relative; width:161px; padding: 6px 0 0 6px; color:#999; background-image: url(../images/input.gif); background-repeat: no-repeat; background-position: left 2px; }
#loginForm input.submit {width:39px;height:20px;margin-top:15px;float:right;margin-right:10px;display:inline;}
#loginForm input.submit.logout {width:56px;}
#loginForm h2 {float:left;margin:15px 0 0 10px;color:white;}



/* Menu code */
#menu         {border-bottom:1px solid #7fabc9;height:26px;clear:left;}
#menu li span {margin-top:6px;}
#menu ul      {float:right;list-style-image:none;list-style-type:none;overflow:hidden;margin-right:10px;clear:left;}





#menu li      {background:transparent url(../images/menu-nonactive.jpg) top left no-repeat;height:26px;float:left;overflow:hidden;display:inline;}
#menu a       {background:url(../images/menu-nonactive-bit.jpg) top right no-repeat;padding: 7px 20px 2px 20px;display:block;color: #333;height:26px;float:left;}
#menu a:hover {color:white;}
/* Menu - Active State */
#menu li.active   { background:transparent url(../images/menu-active.jpg) top left no-repeat; height:26px; }
#menu li.active a { background:url(../images/menu-active-bit.jpg) top right no-repeat;color:white;font-weight:bold;  }



/* Sub Header */
#subheaderleft      {width:580px;float:left;margin-right:6em;}
#subheaderleft p    {padding-left:28px;padding-top:20px;}
#subheaderleft img  {float:left;}
#subheaderleft span {padding:0 10px;float:left;margin-top:10px;font-weight:bold;}
#subheaderleft h1   {background: url(../images/subhead-text.gif) no-repeat 30px top;text-indent:-5000px;height:56px; }
#subheaderright     {width:256px;float:left;}
#subheaderright h2  {padding-top:10px;color:#005893;padding-bottom:4px;}
#subheaderright p   {font-size:1.1em;}
#subheaderright a   {text-decoration:underline;color:#3279a8;}


/* Boxes */

/* Small boxes */
.smalltop {background: url(../images/border-small-top.gif) no-repeat;height: 30px; width: 291px; overflow: hidden;clear:left;margin-top:2em;}
.smallmid {width:289px;}
.smallbot {background: url(../images/border-small-bot.gif) no-repeat 0 -8px;height: 29px; width: 291px; overflow: hidden;}
/* Small box styline */
.smalltop h2  {color:#005893;margin:5px 10px;float:left;}
.smalltop h3 a  {color:#005893;margin:5px 10px;float:right;font-weight:normal;font-size:0.8em;}
.smalltop h3 a:hover {text-decoration:underline;}
.smallmid h2  {color:#005893;clear:left;float:left;margin:10px 10px 0px 10px;display:inline;}
.smallmid p   {padding:6px 10px 0px 10px;display:block;clear:left;color:#333;}
.smallmid a   {color:#3279A8; text-decoration:underline;}
.smallmid img {float:left;padding-right:10px;}



/* Large Boxes */
.larger .smalltop {background: url(../images/border-large-top.gif) no-repeat;height: 30px; width: 443px; overflow: hidden;clear:left;margin-top:2em;}
.larger .smallmid {width:441px;}
.larger .smallbot {background: url(../images/border-large-bot.gif) no-repeat 0 -8px;height: 29px; width: 443px; overflow: hidden;}
/* Large box styling */
.larger .smalltop h2  {color:#005893;margin:5px 10px;}
.larger .smallmid h2  {color:#005893;clear:left;float:left;margin:10px 10px 0px 10px;display:inline;}
.larger .smallmid p   {padding:6px 10px 0px 10px;display:block;clear:left;color:#333;}
.larger .smallmid a   {color:#3279A8; text-decoration:underline;}
.larger .smallmid img {float:left;padding-right:10px;}


/* Search Box */
input {width:180px;margin-left:10px;}
input.subbutton {width:50px;border:solid 1px #006699;background-color:white;}



/* Footer seperation */
.fbox    {width:235px;float:left;margin-top:2em;color:#333;}
.fbox ul {margin-left:8em;list-style-type:none;}
.fbox li {margin-bottom:0.5em;}
.fbox p  {margin-left:3em;}
.fbox h3 {font-size:1.1em;font-weight:normal;margin-left:1em;}
.fbox a  {color:#333;}
.fbox a:hover {text-decoration:underline;}



/* Icons */
#icons p   {margin-left:10px;}
#icons img {padding-right:4em;}


.search { margin-top:10px;margin-bottom:10px; background-image: url(../images/icon-form-background.jpg); background-repeat: no-repeat; height: 38px; width: 290px; background-color:transparent;border:none; }
.search input {margin-top:8px;width:145px;}
.search input.go {width:107px;height:20px;margin-top:10px;float:right;margin-right:10px;display:inline;}