/* 
// THIS IS THE MAIN STYLE SHEET FOR SWLSEP.ORG
// Rob Swan - Fuelled on Coffee Limited
// www.FuelledOnCoffee.com
//
// Last modified 31.5.07
*/


/* BODY AND WRAPPER
----------------------------------------------------------------------------------*/

body {
	font-size: 0.8em;
	padding: 0;
	margin: 0;
	font-family: verdana;
}

#wrapper {
	background: white url(/images/bg-blue.png) repeat-y;
}

form {
	padding: 0px !important;
	margin: 0px !important;
}
	

	
/* THE PAGE HEADER AND SPACERS
----------------------------------------------------------------------------------*/

#header {
	height: 115px;
	border-bottom: 1px solid black;
	background: white url(/images/nlsep-header.png) no-repeat;
}

#header h1 {
	display: none;
	margin: 0;
	padding: 0 0 10px 10px;
}

#header h2 {
	font-size: 1em;
	margin: 0;
	padding: 0 0 5px 10px;
	font-weight: normal;
	display: none;
}

#homelink {
	display: block;
	height: 115px;
}

#homelink span {
	display: none;
}


/* TOP BAR
----------------------------------------------------------------------------------*/

#topbar {
	background: #e5eaff;
	border-bottom: 1px solid black;
	height: 1.8em;
	text-align: right;
	padding: 0 5px 0 0;
	line-height: 1.7em;
}

#topbar .loginlink a {
	color: black !important;
	text-decoration: none;
}

#spacer {
	font-size: 0em;
	height: 12px;	
	padding: 0;
	margin: 0;
	border-bottom: 1px solid black;
	background: #e5eaff;
}


/* CONTENTS
----------------------------------------------------------------------------------*/

#content {
	margin: 0 0 0 200px;
	padding: 1px 10px 10px 10px;
	display: inline-block;
}

#content label {
	vertical-align: top;
}
	
#content fieldset {
	margin: 6px;
	padding: 6px;
}

#content h2 {
	font-size: 1.4em;
	font-weight: bold;
	margin: 10px 0 10px 0;
}


#content h3 {
	font-weight: bold;
	margin: 20px 0 0px 0;
}

#content p {
	margin: 5px 0 5px 0;
}

#content ul {
	margin-top: 5px;
	line-height: 1.4em;
}

#content a img {
	border: none;
}


/* BUTTON LOGOS
----------------------------------------------------------------------------------*/

#search .logos {
	padding: 5px;
	margin: 5px;
	list-style: none;
}

#search .speclogos {
	width: 450px !important;
}

#search .logos li {
	display: inline;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#search .logos a img {
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	border-left: 0;
	border-top: 0;
	margin: 4px;
}

#search .logos a:hover {
	background: white; /* This is required to make the following work in IE */
}

#search .logos a:hover img {
	border-left: 2px solid gray;
	border-top: 2px solid gray;
	border-right: 0;
	border-bottom: 0;
}

.icons li {
	display: inline;
}

/* WALKTHROUGH STYLES
----------------------------------------------------------------------------------*/

#content .walkthrough {
	margin: 5px 5px 20px 5px;
	width: 440px;
	text-align: center;
	background: white url(/images/gray-grad.png) repeat-x;
	padding: 5px;
	border: 2px solid black;
}

#content .walkthrough h3 {
	text-align: left;
	margin: 0;
	padding: 10px;
	font-size: 1.3em;
}

#content .walkthrough img {
	margin: 5px 0 5px 0;
	border: 1px solid gray;
}

#content .walkthrough p {
	font-size: 0.9em;
	line-height: 1.5em;
	text-align: left;
	margin: 0 0 5px 5px;
	font-family: verdana;
	background: white;
	padding: 2px;
	border: 1px solid gray;
}

/* PAGE FOOTER
----------------------------------------------------------------------------------*/

#footer {
	padding: 10px;
	text-align: right;
	clear: both;
	background: #99cc99;
	border-top: 2px solid black;
	background: white;
	border-bottom: 1px solid black;
}

#footer a {
	color: black;
}

.hidden {
	display: none;
}

/* TOP NAVIGATION
----------------------------------------------------------------------------------*/

.active {
	background: white;
	color: black !important;
}

#navigation {
	background: #4255a4;
	border-bottom: 1px solid black;
}

#navigation li {
	display: inline;
	padding: 0; 
	margin: 0;
}

#navigation ul {
	margin: 0;
	padding: 10px;
}

#navigation a { 
	margin: 0;
	padding: 10px;
	text-decoration: none;
	color: black;
}

#navigation a:hover {
	background: #e5eaff;
}

/* SIDE NAVIGATION
----------------------------------------------------------------------------------*/

#sidenav {
	width: 200px;
	float: left;
}

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

#sidenav li {
	margin: 0;
	padding: 1px;
	list-style: none;
}

#sidenav a {
	padding: 5px;
	margin: 0px;
	display: block;
	text-decoration: none;
	padding: 5px;
	color: black;
}

#sidenav a:hover {
	background: #e5eaff;
}


/* ADMIN PAGES
----------------------------------------------------------------------------------*/

.entry {
	margin-top: 25px;
	border-collapse: collapse;
	border: 1px solid black;
}

.entry textarea {
	width: 600px;
}

.entry table {
	border: 1px solid black;
	border-collapse: collapse;
	margin-bottom: 25px;
	width: 100%;
}

.entry td {
	padding: 10px;
	border-bottom: 1px solid black;
	background: white;
}

.entry th {
	text-align: left;
	width: 150px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid black;
	background: #99cc99;
	color: black;
}

.entry fieldset {
	padding: 0;
	margin: 0;
	border: none;
}


/* EXISTING RECORD TABLES
----------------------------------------*/

.existing {
	width: 100%;
	background: white;
}

.existing th {
	text-align: left;
	font-size: 1.2em;
	border-bottom: 1px solid black;
}

.existing td {
border-bottom: 1px dotted gray;
}

.existing a {
	text-decoration: none;
	display: block;
	color: black;
}

.existing a:hover {
	background: #e5eaff;
	color: white;
}

.existing a:visited {
	font-style: italic;
}

a.delete {
	color: red;
}

a.modify {
	color: green;
}

a.delete,
a.modify {
	font-size: 0.7em;
	font-weight: bold;
	margin-left: 10px;
	text-decoration: none;
}

a.delete img, 
a.modify img {
	vertical-align: middle;
}

a.delete span, 
a.modify span {
	display: none;
}


/* ERROR PAGE
----------------------------------------------------------------------------------*/

#errorpage {
	margin: 25px;
}


/* LOGIN FORM
----------------------------------------------------------------------------------*/

.loginform .password,
.loginform .username {
	font-size: 1.2em;
	font-family: verdana;
}

.loginform .button {
	margin-top: 10px;
	width: 100%;
}

/* SEARCH PAGE
----------------------------------------------------------------------------------*/

#search {
	background: white;
	border: 1px solid black;
	padding: 0px;
	margin: 0px;
}

#search h4 {
	font-size: 1.1em;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

#search h5 {
	font-size: 0.9em;
	font-weight: bold;
	padding: 3px;
	margin: 0;
}

#search fieldset,
#search .pseudoFieldset {
	padding: 5px;
	margin: 10px;
	border: 1px solid gray;
	background: white url(/images/gray-grad.png) repeat-x;
}

.subsearch {
	border: 1px solid gray;
	margin: 5px;
	background: white url(/images/gray-grad.png) repeat-x;
	display: inline-block;
}

.searchbutton {
	font-size: 1.2em;
	font-weight: bold;
	margin: 10px;
	padding: 10px;
	font-family: verdana;
	text-align: left;
}


/* OVERVIEW PAGE
----------------------------------------------------------------------------------*/

#content .overview a .overviewtitle {
	display: block;
	font-size: 1em;
	padding: 3px;
	color: black;
}

#content .overview a .overviewdate {
	display: block;
	font-size: 0.7em;
	color: #333333;
}

#content .overview a {
	font-size: 1em;
	background: white url(/images/gray-grad.png) repeat-x;
	color: black;
	border: 1px solid gray;
	float: left;
	margin: 2px;
	width: 25em;
	height: 6em;	
	text-decoration: none;
	position: relative;
}

#content .overview a:hover {
	background: #99CC99 !important;
	color: black;
}

#content .overview a:hover .overviewtitle,
#content .overview a:hover .overviewdate {
	color: black;
}

#content .overview a .specialismLogo {
	margin-bottom: 8px;
}

#content .overview a .boroughLogo, 
#content .overview a .packageLogo {
	margin: 5px;
	vertical-align: middle;
	float: left;
	border-bottom: 2px solid black;
	border-right: 2px solid black;
	border-left: 0;
	border-top: 0;
}

#content .overview a:hover {
	background: white; /* Required to stop IE breaking on the next styles */
}

#content .overview a:hover .boroughLogo,
#content .overview a:hover .packageLogo  {
	border-left: 2px solid #006400;
	border-top: 2px solid #006400;
	border-bottom: 0;
	border-right: 0;
}

#content .overview a img.overviewpast,
#content .overview a img.overviewerror {
	position: absolute;
	bottom: 1px;
	right: 1px;
}

/* DETAILS PAGE
----------------------------------------------------------------------------------*/

#detail {
	border: 1px solid black;
	background: white url(/images/gray-grad.png) repeat-x;
	padding: 10px;
	color: black;
}

#detail-header {
	display: block;
	border-bottom: 2px solid black;
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
	height: 80px;
}

#detail-header h3 {
	text-align: left;
	font-size: 1.5em;
	font-weight: normal;
	padding: 5px 100px 5px 5px;
	margin: 0px;
}

#detail-header img {
	position: absolute; 
	right: 0px;
	top: 0px;
	vertical-align: middle;
	display: inline;
	text-align: right;
	border: 2px solid black;
}

#detail .detailtable {
	border-collapse: collapse;
	width: 100%;
}

#detail .detailtable ul {
	padding: 0 0 0 15px;
	margin: 0;
}

#detail .detailtable td,
#detail .detailtable th {
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid gray;
}

#detail .detailtable th {
	text-align: right;
	background: #e5e5e5;
	width: 14em;
}

#detail .detailtable {
	line-height: 1.5em;
}

.detailsubtable {
	width: 100%;
	border-collapse: collapse;
}

.detailerror, .detailpast {
	margin-right: 10px;
	vertical-align: middle;
}


.detailsubtable th {
	text-align: left !important;
}


/* CHECKBOX STYLES
----------------------------------------------------------------------------------*/

label.checkbox_checked {
	background: #C2EFCA;
	border: 1px solid #95EFA5;
}

label.checkbox_unchecked  {
	background: #cdc4d0;
	border: 1px solid #e5e5e5;
}	

label.checkbox_unchecked,
label.checkbox_checked   {
	color: black;
	padding: 0em;
	margin: 0.3em;
	float: left;
	width: 11.8em;      
	height: 3em;
	line-height: 1.25em;
	overflow: hidden;
	font-size: 0.9em;
	text-align: center;
	display: table;
	vertical-align: middle;
}

label.checkbox_unchecked span,
label.checkbox_checked span {
	vertical-align: middle;
	display: table-cell;
}

label.checkbox_checked:hover {
	background: #95EFA5;
}

label.checkbox_unchecked:hover {
	background: #eee;
	color: black;
	border: 1px solid black;
}

.crirHidden {
	position: absolute;
	left: -9999px;
}

/* TABBER STYLES
----------------------------------------------------------------------------------*/

.tabberlive .tabbertabhide {
	display:none;
}

.tabberlive {
	margin-top:1em;
}
  
ul.tabbernav {
	margin:0;
	padding: 0 0 4px 0;
	border-bottom: 1px solid gray;
	font-family: Verdana;
font-weight: bold;
font-size: 1em;
}

ul.tabbernav li {
	list-style: none;
	margin: 0 2px 0 0;
padding: 0px;
	display: inline;
}

ul.tabbernav li a {
	padding: 5px;
	border: 1px solid gray;
	border-bottom: none;
	background: #DDE;
	text-decoration: none;
}

ul.tabbernav li a:link { 
	color: #448; 
}

ul.tabbernav li a:visited {
	color: #667; 
}

ul.tabbernav li a:hover {
	color: black;
	background: #AAE;
	border-color: #227;
}

ul.tabbernav li.tabberactive a {
	background-color: white;
	border-bottom: 1px solid white;
color: black;
}

ul.tabbernav li.tabberactive a:hover {
	color: black;
	background: white;
	border-bottom: 1px solid white;
}

.tabberlive .tabbertab {
	padding:5px;
	border:1px solid gray;
	border-top:0;	
	background: white;
}

.tabberlive,
.tabbertab {
	display: inline-block
}