/* div styling */
body {
text-align: center;
background: url('../images/generic/background-as2.jpg') repeat-x top left #bcc2cb;
}
table {
width:auto
}
#wrapper {
text-align: left;
overflow: hidden;
margin-left: auto;
margin-right: auto;
width: 1000px
}
#masthead {
float:left;
background: url('../images/generic/masthead-3.gif') no-repeat top left #e7e7e8;
height: 120px;
width: 1000px
}
#mastheadLeft{
height: 120px;
float: left;
width: 200px
}
#mastheadCentre{
height: 120px;
float: left;
width: 600px
}
#mastheadRight{
height: 120px;
float: right;
width: 200px
}
#topNavigationBar, 
#footer {
background: url('../images/generic/masthead-gradient.jpg') repeat-x top left #e7e7e8;
float:left;
width: 100%;
}
#leftMargin {
float: left;
background: url('../images/generic/masthead-gradient.jpg') repeat-x top left #e7e7e8;
margin-bottom: -10000px;
padding-bottom: 10030px;
width: 200px
}
#mainArea {
float:left;
padding-top: 30px;
background: url('../images/generic/masthead-gradient-3.jpg') repeat-x top left #f2f2f2;
background:#fff;
margin-bottom: -10000px;
padding-bottom: 10030px;
padding-right:20px;
width: 540px;
color: #666
}
#rightMargin {
float: right;
background: url('../images/generic/masthead-gradient-3.jpg') repeat-x top left #f2f2f2;
padding-top: 30px;
margin-bottom: -10000px;
padding-bottom: 10030px;
padding-left:15px;
width: 225px
}
#mainArea h1,
#mainArea h2,
#mainArea h3,
#mainArea h4,
#mainArea p,
#mainArea ul,
#mainArea ol,
#mainArea li,
#mainArea blockquote,
#mainArea table,
#leftMargin *,
#rightMargin * {
margin-left: 30px;
margin-right: 30px
}
#mainArea h1,
#mainArea h2,
#mainArea h3,
#mainArea h4,
#mainArea ul,
#mainArea ol,
#mainArea table {
clear:left
}
#mainArea h1,
#mainArea h2,
#mainArea h3,
#mainArea h4 {
color: #45b
}
#mainArea h1 {
font-size:2em;
font-family: georgia;
font-style:italic;
}
#mainArea h2 {
font-family: georgia;
font-style:italic;
font-size:1.7em;
}
#mainArea h3 {
font-family: georgia;
font-style:italic;
font-size:1.5em;
}
#mainArea h4 {
font-family: georgia;
font-style:italic;
font-size:1.3em;
}
#mainArea h5 {
font-size:1.1em;
}
#mainArea h6 {
font-size:1em;
font-weight:bold
}
#mainArea p img {
margin-left: 0
}
#mainArea p.caption {
text-align: right;
margin-bottom: 0px;
font-size: 80%
}
#topNavigationBar p, 
#footer p, 
#topNavigationBar ul, 
#topNavigationBar li, 
#footer ul, 
#footer li {
border:0;
padding: 0;
margin:0;
}
#searchBox {
color: white;
font-weight: bold;
margin-top: 65px;
text-align: right;
}
#searchBox p {
margin: 5px;
}
#searchBox input {
font-size: 175%;
padding-left: 2px;
border: 0px
}
.errors {
color:red
}
/* Margin styling */
#leftMargin p{
margin: 0 30px 0px 30px
}
#rightMargin p, 
#rightMargin h1, 
#rightMargin h2, 
#rightMargin h3 {
margin: 20px 30px 0 13px
}
#leftMargin a, 
#rightMargin a {
margin:0;
text-decoration: none;
text-transform:uppercase;
color: blue
}
#leftMargin a:hover, 
#rightMargin a:hover {
text-decoration: underline;
color: red
}
#leftMargin a.subNavigation{
background: url('../images/generic/masthead-gradient.jpg') repeat-x top left #e7e7e8;
float:left;
display:block;
width: 200px;
padding: 5px 0 5px 30px;
border-bottom: 1px solid #fff;
border-top: 0px;
color: #666
}
#leftMargin a.subNavigation:hover {
background: #d3d3d3;
text-decoration: none;
}

/* Main Area Styling */
#mainArea form {
width: 600px;
border-top: 1px solid #e0e0e0;
padding-top: 25px;
background: url('../images/generic/masthead-gradient-3.jpg') repeat-x top left #e7e7e8;
}
#mainArea caption {
background: url('../images/generic/masthead-gradient-2.jpg') repeat-x top left #e7e7e8;
}
#mainArea thead tr th {
background: url('../images/generic/masthead-gradient-3.jpg') repeat-x top left #e7e7e8;
}
#mainArea form td {
background: #eee
}
#mainArea img {
margin-left:30px
}
#mainArea .mainImage {
margin-left: 30px;
margin-right: 20px;
margin-top: 5px;
clear:left;
float:left
}
#mainArea .mainImage img{
margin-left: 0px;
}
#mainArea .mainImage p {
margin-left: 0px;
font-size: 80%
}
#mainArea a {
text-decoration: none;
color: blue
}
#mainArea a:hover {
text-decoration:underline;
color: red
}
/* Left Margin Styling */
#leftMargin p.featureLink {
clear:left;
margin: 5px 13px 0px 30px;
padding-bottom: 3px;
font-size: 0.9em;
line-height: 1.25em;
color: #777
}
#leftMargin p.featureTitle {
clear:left;
margin: 5px 13px 0 30;
font-size: 1em;
padding-bottom: 3px;
padding-top:7px;
text-transform: uppercase;
color: #666;
}
#leftMargin p.featureEntryLink {
margin: 5px 13px 0 30;
font-size: 0.9em;
line-height: 1em;
padding-bottom: 3px;
}
#leftMargin p.featureLink a {
text-transform: none !important;
color: #00e;
}
#leftMargin p.featureEntryLink a {
text-transform: none !important;
margin-left: 13px;
color: #006;
}
#contactBox {
margin: 0;
padding-bottom: 20px;
background: url('../images/generic/masthead-gradient-3.jpg') repeat-x top left #f2f2f2;
}
#subscriptionBox {
margin: 0;
padding-bottom: 20px;
background: url('../images/generic/masthead-gradient-3.jpg') repeat-x top left #f2f2f2;
}

/* Right Margin Styling */
#rightMargin table {
padding: 0;
margin:0px;
margin-bottom: 10px;
border: 13px solid #ddd
}
#rightMargin p.featureLink {
clear:left;
margin: 5px 13px 0 0px;
padding-bottom: 3px;
/*border-bottom: 1px solid #ccc*/
}
#rightMargin p.featureTitle {
clear:left;
margin: 10px 13px 0 0;
font-size: 1.2em;
padding-bottom: 3px;
padding-top:7px;
text-transform: uppercase;
color: #88a;
border-top: 1px solid #ddd;
background: url('../images/generic/masthead-gradient-3.jpg') repeat-x top left #f2f2f2;
}
#rightMargin p.featureEntryLink {
margin: 5px 13px 0 0;
font-size: 0.9em;
line-height: 0.9em;
padding-bottom: 0px;
}
#rightMargin p.featureLink a {
text-transform: none !important;
color: #00e;
}
#rightMargin p.featureEntryLink a {
text-transform: none !important;
margin-left: 0px;
color: #006;
}
#rightMargin .galleryThumbnails a {
float:left;
display:block;
width:60px;
height:60px;
border:1px solid #ccc;
padding:0;
margin:2px 2px 0 0; 
background:#eee
}
#rightMargin .galleryThumbnails img {
margin: 0;
}
#rightMargin .galleryThumbnails a:hover {
text-decoration: none;
background: #fff
}

/* Monthly Calendar Styling */
#monthlyCalendar {
border:0;
}
#monthlyCalendar td,#monthlyCalendar th {
width: 10px;
}
#monthlyCalendar thead th {
color: #444;
border:0;
background-color: #fff;
background: url('../images/generic/masthead-gradient-2.jpg') repeat-x top left #fff;
}
#monthlyCalendar td {
padding: 3px 5px;
font-size: 80%;
font-weight: bold;
color: #444;
background-color: #fff;
background: url('../images/generic/masthead-gradient-3.jpg') repeat-x top left #fff;
border-right: 1px solid #ddd
}
#monthlyCalendar th {
padding: 3px 5px
}
#monthlyCalendar th.days {
padding: 0;
padding-left: 3px;
font-size: 80%;
color: #555;
background: url('../images/generic/masthead-gradient-2.jpg') repeat-x top left #fff;
border-right: 1px solid #ddd
}
#monthlyCalendar td a.calendarLink {
color: #444;
margin:0;
display:block;
text-decoration: none;
}
#monthlyCalendar td.greyed .calendarLink{
font-weight:normal;
color: #666;
}
#monthlyCalendar td.weekend {
background: url('../images/generic/masthead-gradient-2.jpg') repeat-x top left #fff;
color: #777;
}
#monthlyCalendar td.today .calendarLink{
}
#monthlyCalendar td.events {
}
#monthlyCalendar td.courses {
}
#monthlyCalendar td.courses.events {
}
#monthlyCalendar .events a.calendarLink, 
#monthlyCalendar .courses a.calendarLink, 
#monthlyCalendar .highlight a.calendarLink  {
color: #00f;
}
#monthlyCalendar td.today {
background: #f88
}
#monthlyCalendar td.highlight {
background: #fc6;
color:black
}
#monthlyCalendar td:hover {
color: white;
background: url('../images/generic/masthead-gradient-2.gif') repeat-x top left #202020;
cursor: default;
}
#monthlyCalendar td:hover .calendarLink{
color: black;
}
#monthlyCalendar a.calendarLink:hover {
color: white;
}
#monthlyCalendar th img {
margin:0px;
position: relative;
float: none;
}
#monthlyCalendar th {
display:block;
width:auto;
}
#monthlyCalendar th p {
margin:0px ;
padding:0px;
white-space: nowrap !important;
text-align:center
}

/* Infobox */
.tooltip {
background: #E1E1E1;
color: black;
border: 1px solid #000;
}
.tooltip p {
margin:1px;
padding:3px;
text-align:left;
}
.tooltip h4 {
font-size: 1em;
font-weight: bold;
color: #333;
background: url('../images/generic/masthead-gradient-2.jpg') repeat-x top left #fff;
margin: 0;
padding: 3px;
text-align:left;
border: 1px solid #fff
}
/* Pop-up Window Wrapper */
div.winWrapper {
position:relative
}
html>body div.winWrapper {
position: absolute
}	
div.winShadow {
height: 100%;
width: 100%;
filter:alpha(opacity=20);
opacity:0.20;
position: absolute;
left: 5px; 
top: 5px;	
background-color: #000
}
div.winContent {
background-color: #FFF;
position: relative;
left: 0px; 
top: 0px;
border: 1px solid #777
}
/* Menu System */
div#topNavigationBar ul.topmenu, 
div#topNavigationBar ul.topmenu ul, 
div#topNavigationBar ul.topmenu li, 
div#topNavigationBar ul.topmenu a, 
div#topNavigationBar ul.topmenu a:link, 
div#topNavigationBar ul.topmenu a:visited {
color: #666;
text-decoration: none;
text-transform: uppercase;
}	
div#topNavigationBar ul.topmenu li {
text-align: center;
} 
div#topNavigationBar ul.topmenu a:link, 
div#topNavigationBar ul.topmenu a:visited, 
div#topNavigationBar ul.dropmenu li, 
div#topNavigationBar ul.dropmenu a:link, 
div#topNavigationBar ul.dropmenu a:visited {
display: block;
}
div#topNavigationBar ul.topmenu a:hover {
background: #ddd;
color :#333;
}
/* layout styles */
/* remove standard HTML list indenting, and display as normal blocks */
div#topNavigationBar ul.topmenu ul, 
div#topNavigationBar ul.topmenu a, 
div#topNavigationBar ul.dropmenu ul, 
div#topNavigationBar ul.dropmenu a, 
div#topNavigationBar ul.submenu ul, 
div#topNavigationBar ul.submenu a {
background: url('../images/generic/masthead-gradient.jpg') repeat-x top left #e7e7e8;
display: block;
}
div#topNavigationBar ul.topmenu li {
float: left;
}
div#topNavigationBar ul.dropmenu li, 
div#topNavigationBar ul.submenu li {
background: #e3e3e3;
float: none;
}
/* use a fixed width for menu and submenus */
div#topNavigationBar ul.topmenu li , 
div#topNavigationBar ul.topmenu ul, 
div#topNavigationBar ul.dropmenu ul, 
div#topNavigationBar ul.dropmenu li, 
div#topNavigationBar ul.submenu ul, 
div#topNavigationBar ul.submenu li {
width: 200px;
}
/* make sure menus stack properly */
div#topNavigationBar ul.topmenu li , 
div#topNavigationBar ul.topmenu ul{
z-index: 1
}
div#topNavigationBar ul.dropmenu ul, 
div#topNavigationBar ul.dropmenu li, 
div#topNavigationBar ul.submenu ul, 
div#topNavigationBar ul.submenu li {
z-index:10
}
/* make li's into clean, moveable blocks */
div#topNavigationBar ul.topmenu li, 
div#topNavigationBar ul.dropmenu li, 
div#topNavigationBar ul.submenu li {
list-style-type: none; 
position: relative;
}
/* Make list items do what they're supposed to in IE */
div#topNavigationBar ul.topmenu a, 
div#topNavigationBar ul.dropmenu a,
div#topNavigationBar ul.submenu a {
border-right: 1px solid #fff;
padding: 5px;
}
/* make sure any ul inside an li (a submenu) takes up zero normal flow */
div#topNavigationBar ul.topmenu ul { 
position: absolute;  
top: 100%;
left: 0; 
display: none;
}
div#topNavigationBar ul.dropmenu ul,
div#topNavigationBar ul.submenu ul {
position: absolute;  
top: 0px;
left: 200px !important; 
display: none;
}
div#topNavigationBar ul ul,
div#topNavigationBar ul li:hover ul ul,
div#topNavigationBar ul ul li:hover ul ul {
display: none;
}
div#topNavigationBar ul li:hover ul,
div#topNavigationBar ul ul li:hover ul,
div#topNavigationBar ul ul ul li:hover ul {
display: block;
}

/*Left Main Navigation */
#leftMargin ul,  
#leftMargin li {
margin:0px;
}
#leftMargin li {
padding: 2px 0px 2px 30px;
background: url('../images/generic/masthead-gradient.jpg') repeat-x top left #e7e7e8;
}
#leftMargin ul.topmenu ul li {
width: 170px;
}
#leftMargin ul.topmenu, 
#leftMargin ul.topmenu ul, 
#leftMargin ul.topmenu li, 
#leftMargin ul.topmenu a, 
#leftMargin ul.topmenu a:link, 
#leftMargin ul.topmenu a:visited {
color: #666;
text-decoration: none;
text-transform: uppercase;
}
#leftMargin ul.topmenu li:hover {
background: #d3d3d3;
}
#leftMargin ul.topmenu li:hover a {
color :#00f;
}
#leftMargin ul.topmenu ul li:hover a, #leftMargin ul.topmenu ul li { 
color:#333
}
/* layout styles */
/* remove standard HTML list indenting, and display as normal blocks */
#leftMargin ul.topmenu ul, 
#leftMargin ul.topmenu a, 
#leftMargin ul.dropmenu ul, 
#leftMargin ul.dropmenu a, 
#leftMargin ul.submenu ul, 
#leftMargin ul.submenu a {
left: 0px;
display: block;
}
#leftMargin ul.topmenu ul, 
#leftMargin ul.topmenu a{
z-index:1
}
#leftMargin ul.dropmenu ul, 
#leftMargin ul.dropmenu a, 
#leftMargin ul.submenu ul, 
#leftMargin ul.submenu a {
z-index: 10
}
#leftMargin ul.topmenu li {
float: left;
}
#leftMargin ul.dropmenu li, 
#leftMargin ul.submenu li {
float: none;
}
/* use a fixed width for menu and submenus */
#leftMargin ul.dropmenu ul, 
#leftMargin ul.dropmenu li {
width: 170px !important;
margin-left:30px
}
#leftMargin ul.topmenu ul, 
#leftMargin ul.topmenu li, 
#leftMargin ul.submenu ul, 
#leftMargin ul.submenu li {
width: 170px !important;
margin-left: 30px
}
#leftMargin ul.topmenu ul, 
#leftMargin ul.topmenu li {
margin-left:0px
}
/* make li's into clean, moveable blocks */
#leftMargin ul.topmenu li, 
#leftMargin ul.dropmenu li, 
#leftMargin ul.submenu li {
list-style-type: none; 
position: relative;
}
#leftMargin ul.topmenu ul li {
left:200px;
}
/* Make list items do what they're supposed to in IE */
#leftMargin ul.topmenu a, 
#leftMargin ul.dropmenu a, 
#leftMargin ul.submenu a {
border-right: 0;
padding: 2px 0;
}
/* make sure any ul inside an li (a submenu) takes up zero normal flow */
#leftMargin ul.topmenu ul { 
position: absolute;  
top: 0;
left: 0; 
display: none;
}
#leftMargin ul.dropmenu ul, 
#leftMargin ul.submenu ul {
position: absolute;  
top: 0;
left: 0; 
display: none;
}
#leftMargin ul li {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff
}
div#leftMargin ul ul,
div#leftMargin ul li:hover ul ul,
div#leftMargin ul ul li:hover ul ul {
display: none;
}
div#leftMargin ul li:hover ul,
div#leftMargin ul ul li:hover ul,
div#leftMargin ul ul ul li:hover ul {
display: block;
top: -1px;
}

/* Footer Styling */
#footer p {
margin:0;
border:0;
padding:0px 5px;
}
#footer a {
text-transform:uppercase;
text-decoration:none;
padding: 5px;
}
#footer a:hover {
color: red;
}