h1 {
 	margin-left: -1.5em;
 	font-size: 110%;
 	border-bottom: thin solid rgb(50,120,200);
 	color: rgb(200,100,100);
}

h1 a {
 	color: rgb(200,100,100);
 	text-decoration: none;
}

 
h2 {
 	margin-left: -1.5em;
 	font-size: 105%;
 	color: rgb(200,100,100);
 }

.worldlink, .notelink {
	display: none;
}

p.more {
	text-align: right;
	margin-top: -1em;
	font-size: 80%;
}
p.more i {
	margin-right: 1em;
}

img.left {
	float: left;
	margin-right: 0.5ex;
	margin-bottom: 0.5ex;
}

body {
	margin: 0px;
	padding: 0px;
	background: rgb(50,120,200) url(outer_back.png) no-repeat;
	font-family: sans-serif;
}

/* The '*' and important overide the cursor setting in the other stylesheet elements which would
 otherwise interfere */
body.loading, .loading * {
	cursor: wait !important;
}

#header {
	height: 60px;
	position: relative;
}

#headerpanel {
	margin-left: 190px;
}

#widgetBlock {
	position: absolute;
	right: 0px;
	top: 0px;
	margin: 0px;
	font-size: 15px;
	white-space: nowrap;
	vertical-align: top;
}

#loginwidget, #loginform, #topSearch {
	display: inline-block;
}

#loginwidget span, #loginform, #topSearch {
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	background: rgb(25,75,150);
	color: rgb(230,230,230);
	padding: 3px 6px 3px 6px;
	margin: 0px 5px 0px 0px;
}
#loginwidget a {
	color: rgb(230,230,230);
}
#loginform input, #topSearch input, .lefttab input {
	font-size: 15px;
	border: 1px inset rgb(25,75,150);
	padding: 0px;
	background: rgb(90,150,220);
}
#loginform button {
	font-size: 15px;
}


#headerpanel a {
	position: relative;
	display: inline-block;
	text-align: center;
	background: rgb(25,75,150);
	color: rgb(230,230,230);
	margin: 0px 2px 0px 2px;
	padding: 2px 5px 2px 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	vertical-align: center;
}
#headerpanel a {
	width: 7em;
}
#headerpanel a:hover {
	background: rgb(230,230,230);
	color: rgb(25,75,150);
	text-decoration: none;
}
#headerpanel a.right {
	position: absolute;
	top: 0px;
	right: 20px;
}

a {
	text-decoration: none;
	color: rgb(25,75,150);
}
a:hover {
	text-decoration: underline;
}

a.edit {
	font-variant: small-caps;	
	font-size: smaller;
}

a img {
	border: none;
}

/**
 * page and pagelimit work together to achieve a centered mainbody of content which
 * has a maximum width but also always has a minimum margin size on the left/right.
 * The out of body components (like login widget and footer) are not affected by these
 * sizes and alignment.
 */
#page {
	margin: 0px 20px 0px 20px; /*put al imit on entire body size*/
}
#pagelimit {
	position: relative;
	margin: 0px auto 0px auto; /*center enter body*/
	max-width: 60em; /* the maximum width for normal content, setup in page to remain centered*/
}

#leftpanel {
	position: absolute;
	left: 0px;
	top: -45px;
	padding-left: 20px;
	height: auto;
}
#logo {
	margin-left: -45px;
}
#logo img {
	border: none;
}

#outerbody2 {
	background: rgb(243,243,243);
	color: rgb(0,0,0);
	padding: 10px; /*NOTE: adjust extendInnerBody as well*/
	-moz-border-radius: 10px;
	/*min-height: 800px; /* theere is no way in CSS to do this properly: refer to extendInnerBody()*/
}

#outerbody {
	margin-left: 175px;
	margin-bottom: 2em;
	padding: 5px 5px 5px 5px;
	background: rgb(25,75,150);
	-moz-border-radius: 10px;
}

#outerbodyframe {
	margin-right: 160px;
}

#outerright {
	position: absolute;
	right: 15px;
	width: 140px;
	background: url(right_back.png) repeat-x;
	min-height: 300px;
}

#sideads {
	margin: 1em auto 1em auto;
	width: 120px;
	height: 240px
}
#sampleadbox {
	border: 1px solid rgb(50,120,200);
	width: 120px;
	height: 240px
}


#footer {
	width: 100%;
	/*background: rgb(50,50,60) url(addr_back.jpg) 50% 0% repeat-x;*/
	color: rgb(230,230,230);
	padding: 0.5ex 0px 0.5ex 0px;
}

#footer-inner {
	margin: 0em 1em 1em 1em;
	-moz-border-radius: 5px;
	border: 2px solid black;
	padding: 1ex;
	background: rgb(50,50,60) url(addr_back.jpg) 50% 0% repeat-x;
}

#footer-copy {
	float: left;
}

#footer-links {
	float: right;
	margin: 0px;
}

#footer-links li {
	display: inline-block;
	list-style: none;
	margin-right: 1em;
}
#footer-links a {
	color: rgb(230,230,230);
}

#clear-fix {
	clear: both;
}

dt {
	font-weight: bold;
	margin-top: 1ex;
}
dd {
	margin-bottom: 1ex;
	margin-left: 2em;
	margin-right: 1em;
}

/*********************************************************************
 * Generic
 */
 
#innerbody {
	margin-left: 2em;
	margin-right: 1em;
	font-family: sans-serif;
}

#feed {
	margin-left: -1em;
}

/*********************************************************************
 * Tabs
 */
.lefttab {
	color: rgb(230,230,230);
	background: rgb(25,75,150) url(tab_back.jpg) no-repeat;
	background-position: top center;
	width: 145px;
	margin: 5px 0px 5px 0px;
	padding: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
}
.taboption a {
	background: transparent;
	color: rgb(230,230,230);
	text-decoration: none;
}
.taboption a {
	padding: 1px 0.5ex 1px 0.5ex;
}
div.taboption {
	margin: 0.5ex;
}
.lefttab a:hover {
	color: rgb(25,75,150);
	background: rgb(230,230,230);
	-moz-border-radius: 5px;
}

.tabhead {
	text-align: center;
	border-bottom: 1px rgb(50,120,200) solid;
	font-size: 120%;
	font-style: italic;
}

.lefttab input {
	width: 90%;
	margin: 0.5ex 5% 0.5ex 5%;	
	font-size: 80%;
}

/*******************************************************************
 * Forms
 */

.dlg {
	display: none;
	position: absolute;
	left: 50%;
	top: 25%;
	width: 30em;
	margin-left: -15em;
}

form.data {
	margin: 1em auto 1em auto;
	margin-right: auto;
	max-width: 35em;
	background: rgb(255,255,255);
	color: rgb(0,0,0);
	padding: 0ex;
	-moz-border-radius: 10px;
	border: rgb(50,120,200) 2px solid;
	position: relative;
}

.data .submit {
	margin: 1ex -2px 0ex -2px; /* 2px is to overlap with parent border (to get our rounding correct)*/
}

.data .submit p {
	background: rgb(50,120,200);
	color: rgb(25,75,150);
	margin: 0px;
	width: 100%;
	text-align: right;
	/* TODO: assume last item and put special border, fix for improper clipping in browsers  */
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
}

.data .form-header {
	border-bottom: solid 1px rgb(50,120,200);
	width: 100%;
	font-weight: bolder;
	font-size: 105%;
	margin-top: 2em;
}
.data div.form-header:first-child {
	margin-top: 0.5em;
}

.data .form-header p {
	padding: 0px 0.5ex 0px 0.5ex;
	margin: 0px;
}

.data .submit button, .data .submit input[type='submit'], .data .submit button{
	margin: 0.5ex 1ex 0.5ex 1ex;
}

.data p {
	margin: 1ex 1ex 1ex 1ex;
}

.data span.label {
	letter-spacing: 150%;
	font-size: 110%;
}

.data span.req {
	font-weight: bold;
	font-style: italic;
}

.data textarea {
	height: 30ex;
	font-family: sans-serif;
}

.data textarea.small {
	height: 6ex;
}

.data textarea, .data input[type='text'], .data input[type='password'], .data select { 
	width: 98%; /*without an extra DIV you can't get this working with borders/margin/padding*/
	background: rgb(243,243,243);
	color: rgb(0,0,0);
	font-family: sans-serif;
}
/* patchup for DOB*/
.data select[name='dob[d]'],  .data select[name='dob[F]'], .data select[name='dob[Y]'],
.data input.small {
	width: auto;
}

.data input.right {
	text-align: right;
}

.data span.trail {
	padding-left: 3px;
	font-style: italic;
}

.data span.error {
	font-weight: bold;
	color: red;
}



/********************************************************************
 * Notices
 */
div.notice {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	width: 30em;
	background: rgb(255,255,255);
	color: rgb(0,0,0);
	border: rgb(50,120,200) 2px solid;
}

div.notice p {
	margin: 0.25ex;
}

p.notice-title {
	font-weight: bold;
	text-align: center;
	margin: 0px;
	border-bottom: rgb(50,120,200) 1px solid;
}

.error p.notice-title, .fatalerror p.notice-title {
	background: red;
	color: yellow;
}

.hidden, .part {
	display: none;
}

.missing {
	font-style: italic;
	font-size: smaller;
}

/**
 * Fixed sizes to be used by classes since there is no way to tell something to be the width
 * of the image inside it.
 */
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.w160 { width: 160px; }
.w170 { width: 170px; }
.w180 { width: 180px; }
.w190 { width: 190px; }
.w200 { width: 200px; }
.w210 { width: 210px; }
.w220 { width: 220px; }
.w230 { width: 230px; }
.w240 { width: 240px; }
.w250 { width: 250px; }
.w260 { width: 260px; }
.w270 { width: 270px; }
.w280 { width: 280px; }
.w290 { width: 290px; }
.w300 { width: 300px; }
.w310 { width: 310px; }
.w320 { width: 320px; }
.w330 { width: 330px; }
.w340 { width: 340px; }
.w350 { width: 350px; }
.w360 { width: 360px; }
.w370 { width: 370px; }
.w380 { width: 380px; }
.w390 { width: 390px; }
.w400 { width: 400px; }