*{margin:0; padding:0;}
body{font:90%/1.5 Arial, Helvetica, sans-serif;
	background-color:#ccf;
	color:#1b1b1b ;/*#272727*/
	text-align:center;
	 }

#wrapper{width:960px;background:#fdfab9;
	 margin:20px auto 20px;
	 text-align:left;
	 border:1px solid #800;
	 -moz-border-radius:10px;
	 -webkit-border-radius:10px;
	 border-radius:10px;
	}
	 
#wrapper{background-image:url(images/graphics/parchment.jpg);
	-moz-box-shadow: 3px 3px 3px rgba(255,255,255,.3),-3px -3px 3px rgba(255,255,255,.3); /* FF3.5+ */
  -webkit-box-shadow: 3px 3px 3px rgba(255,255,255,.3),-3px -3px 3px rgba(255,255,255,.3); /* Saf3.0+, Chrome */
          box-shadow: 3px 3px 3px rgba(255,255,255,.3),-3px -3px 3px rgba(255,255,255,.3); /* Opera 10.5, IE 9.0 */
              }

#header{border-bottom:2px solid #800;
	background:url(images/soc_logo_parchment.jpg) no-repeat 860px 0;
		}
#content{width:750px;
	float:right;
	padding-top:0px;
	padding-left:15px;
	background:url(images/graphics/vert-line.gif) repeat-y;-moz-box-shadow: -1px 0px 10px rgba(136, 0, 0,.05);
	overflow:hidden;}
	/*
  -webkit-box-shadow: 1px 0px 4px rgba(205, 205, 205,.15);
    box-shadow: 1px 0px 4px rgba(205, 205, 205,.15)*/
#maincontent{width:515px;
	float:left;
	padding-top:30px;
	}
	

#secondary{width:180px;
	float:right;
	padding:30px 30px 0 10px;
	background:url(images/graphics/vert-line.gif) repeat-y;-moz-box-shadow: -1px 0px 10px rgba(136, 0, 0,.05);
	}

#maincontent, #secondary{padding-bottom:9000px; margin-bottom:-9000px}

#menu{width:165px;
	float:left;
	padding-top:30px;
	}
	
	
#footer{clear:both;
	text-align:center;
	border-top:2px solid #800;}
	
#header{color:#800; text-align:center; font-weight:bold;}

a{outline:none;}
#maincontent a,#footer a, #maincontent a:visited,#footer a:visited{color:#800;}
#maincontent a:hover,#footer a:hover{text-decoration:none; background-color:#e6e6e6;}
h1{padding:.5em 0 0 0; margin:.5em 0 0 0; font-size:2.2em;
	letter-spacing:-.02em;
	text-shadow:1px 0 1px rgba(256,256,256,.8);}
	
p.tagline{text-shadow:1px 0 1px rgba(256,256,256,.8);}

h2{font-size:1.6em; line-height:1;margin-bottom:.5em;}

h3{font-size:1.4em;color:#4b4b4b; }
h3, p, li{margin-bottom:1em;}
#header p{font-size:1.6em;}
#footer p{margin:.2em 0; font-size:.85em;}
#secondary p{font-size:1.2em; color:#800; font-weight:bold; text-align:center;}

acronym{border-bottom:1px dotted; cursor:help;}

blockquote{padding-left:18px; background: url(images/quo_open1.png) no-repeat top left;
	margin:0 5px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.2em;
	font-size:.96em;
	text-align:left;
	}
blockquote div{padding-right:14px; background:url(images/quo_close1.png) no-repeat bottom right;}

.r{text-align:right;}

ol{padding-left:20px;}

ul{list-style-type:disc;}
ul li{margin-left:20px;}

ul#nav{margin-left:30px; list-style-type:none;}
ul#nav li{margin-left:0;}

#bself #maincontent ul{list-style-type:disc;}
#bself #maincontent ul li{margin:0 20px 1em 20px; font-family:"Times New Roman", Times, serif; letter-spacing:.1em;}

#menu a, #menu a:visited{padding-left:20px; background: url(images/button_red-png8.png) no-repeat 0 50%;
	color:#800; display:block; width:100%; font-size:1em;
	}
	
#menu a:hover{text-decoration:none;
	}

/*was colour #99f and background: url(images/button_lilac-png8.png) no-repeat 0 50%*/

#bhome a#home, #babouth a#abouth, #bfaq a#faq, #bself a#self, #bcourses a#courses, #baboutme a#aboutme, #bcontact a#contact, #blinks a#links, #bsuper a#super, #bnews a#news{background-image:none; font-weight:bold; text-decoration:none;
}
/*colour was #99f; */

#bhome a:hover#home, #babouth a:hover#abouth, #bfaq a:hover#faq, #bself a:hover#self, #bcourses a:hover#courses, #baboutme a:hover#aboutme, #bcontact a:hover#contact, #blinks a:hover#links, #bsuper a:hover#super, #bnews a:hover#news{cursor:default;}

#bcontact dl{margin:1em 0;}
#bcontact dl dt{font-weight:bold; float:left; margin-bottom:1.2em;}
#bcontact dl dd{padding:0; margin-bottom:1.2em;margin-left:9em;}


.imgcap{margin:0 auto 1em; text-align:center; border:1px solid #800; color:#000; background-color: #f4f4ee; width:165px;}
.imgcap img{display:block;}
img.nocap{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:1em;
	border:1px solid #800;}

.hide{display:none;}
#secondary p.author{text-align:right;
	font-size:1em;
	color:#000;
	font-weight:normal;
	font-style:italic;
	padding-top:.5em;
	}
dl{margin-bottom:2em; margin-top:1em;}

a[href $='.doc'] { 
   padding-right: 18px;
   background: transparent url(images/graphics/doc.gif) no-repeat center right;
}

/* for main form wrapping div */
div#gb_form_div {margin:0;
  margin-bottom:1em;
  } 

div#gb_form_div select{min-width:14em;}

/* id for the form itself */
form#gb_form {padding:0 10px; 
  /* not styled on demo page */
}

/* outer fieldset - it's common to make this border : 0; */
fieldset#formwrap { 
  background-color : transparent;
  border:0; 
}

/* section fieldsets - it's common to make this border : 0; */
fieldset {  background-color : #ffc;
  margin-bottom:20px;
  padding-bottom:10px;
  padding-top:10px;
  padding-left:10px;
  border:1px solid #ccc;
}


/* form legends and dt "heading" */
legend, dt { 
  font-weight : bold; 
  color : #666;
}

/* main legend at top of the form */
legend#mainlegend { 
  font-size : 1.1em;
  color : #000; 
}

/* form label text */
label { 
  color : #000;
}

/* all inputs, select, and textarea */
input.med, input.short, select.med, textarea.textbox { 
  font : 100% 'Trebuchet MS', sans-serif; 
  color : #666; 
  padding : 2px; 
  border : 1px solid #f90;
  background-color : #fffffa;
}
textarea.textbox{width:95%;}

/* to make focus stable in IE 6 */
* html input.button { 
  color : #000;  
  border : 1px solid #669900;
  background-color : #cc9900;
}
* html input.button.hover { 
  color : #000;  
  border : 1px solid #9f2978;
  background-color : #cc9900;
}
* html input.button.focus { 
  color : #000;  
  border : 1px solid #9f2978;
  background-color : #cc9900;
}

/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE */
input.med:hover, input.med:focus, input.short:hover, input.short:hover, select.med:hover, select.med:focus, textarea.textbox:hover, textarea.textbox:focus, input.med.hover, input.med.focus, input.short.hover, input.short.focus, select.med.hover, select.med.focus, textarea.textbox.hover, textarea.textbox.focus { 
  color : #000;  
  border : 1px solid #000;
  background-color : #fff;
}

/* for the checkbox input */
input.checkbox {
  /* not styled on demo page */
}

/* error heading weight and color - bold is for the error reason text */
span.error, dt.error { 
  color : #cd0000; 
  font-weight : bold; 
}

/* success heading color */
span.success { 
  color : #669900; 
  font-weight : bold; 
}

/* privacy and "Why?" small element link sizes (relative to their parent element */
small.privacy, small.whythis { 
  font-size : 80%; 
}

/* set up relativity to position small Why? text */
small.whythis { 
  position : relative; 
}

/* Why? link style */
small.whythis a { 
  text-decoration : underline; 
  font-size : 0.95em;
  color:#f90;
}

/* hide the Why? text span */
small.whythis a span { 
  position : absolute; 
  top : -9000px; 
  left : -9000px; 
  display : inline; 
  width : 17.1em; 
  height : auto; 
  border : 1px solid #000; 
  background-color : #eecc11;
  color:#000; 
  padding-left : 2px; 
}

/* bring back Why? text span (title attribute backs this up for borwsers it doesn't function in 
small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span { 
  position : absolute; 
  top : 0; 
  left : 6em; 
}*/

/* the link back to me for form credit */
p.creditline { 
  float : right; 
  margin : -17px 0; 
  padding-bottom : 1px; 
  font-size : 80%; 
}

/* used for abbreviation used relative to form. the .abbr class is for the span added for IE */
abbr, .abbr { 
  cursor : help; 
  border-bottom : 1px dotted #999;
}

/* set result color for blockquote dt "heading" */
dl#result_dl_blockq dt {
  color : #669900;
}

/* position result blockquote flush with parent */
dl#result_dl_blockq blockquote {
  margin-left : 0;
}

/* style the input names in the result */
div#gb_form_div span.items {
  font-weight : bold;
  color : #cc9900;
}

/*====Newsletter Navigation====*/
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}

#hnav{margin-top:1em;}
#hnav .ui-tabs-nav a, #hnav .ui-tabs-nav a:link, #hnav .ui-tabs-nav a:visited, #hnav .ui-tabs-nav a:hover, #hnav .ui-tabs-nav a:focus{border-bottom:none;} 

#hnav .ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}
#hnav .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
#hnav .ui-tabs-nav li {
    float: left;
    margin: 0 0 0 1px;
    min-width: 84px; /* be nice to Opera */
}

#hnav .ui-tabs-nav a, #hnav .ui-tabs-nav a span {
    display: block;
    padding: 0 10px;
    background: url(images/graphics/tab.png) no-repeat;
}
#hnav .ui-tabs-nav a {
    margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    color: #27537a;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
    outline: 0; /* prevent dotted border in Firefox */
}
#hnav .ui-tabs-nav, #hnav .ui-tabs-selected a {
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    color: #000;
}
#hnav .ui-tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
*>#hnav .ui-tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
#hnav .ui-tabs-nav, #hnav .ui-tabs-selected a span {
    padding-bottom: 1px;
}
#hnav .ui-tabs-nav .ui-tabs-selected a, #hnav .ui-tabs-nav a:hover, #hnav .ui-tabs-nav a:focus, #hnav .ui-tabs-nav a:active {
    background-position: 100% -150px;
}
#hnav .ui-tabs-nav a, #hnav .ui-tabs-nav .ui-tabs-disabled a:hover, #hnav .ui-tabs-nav .ui-tabs-disabled a:focus, #hnav .ui-tabs-nav #hnav .ui-tabs-disabled a:active {
    background-position: 100% -100px;
}
#hnav .ui-tabs-nav .ui-tabs-selected a span, #hnav .ui-tabs-nav a:hover span, #hnav .ui-tabs-nav a:focus span, #hnav .ui-tabs-nav a:active span {
    background-position: 0 -50px;
}
#hnav .ui-tabs-nav a span, #hnav .ui-tabs-nav .ui-tabs-disabled a:hover span, #hnav .ui-tabs-nav .ui-tabs-disabled a:focus span, #hnav .ui-tabs-nav .ui-tabs-disabled a:active span {
    background-position: 0 0;
}
#hnav .ui-tabs-nav .ui-tabs-selected a:link, #hnav .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, #hnav .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
#hnav .ui-tabs-nav a:hover, #hnav .ui-tabs-nav a:focus, #hnav .ui-tabs-nav a:active,
#hnav .ui-tabs-nav #hnav .ui-tabs-deselectable a:hover, #hnav .ui-tabs-nav .ui-tabs-deselectable a:focus, #hnav .ui-tabs-nav .ui-tabs-deselectable a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
/*#hnav .ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}*/
#hnav .ui-tabs-panel {
    border: 1px solid #97a5b0;
    padding: 1em 25px; margin-bottom:1em;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
	-moz-border-radius:4px;
	-webkit-border-radius: 4px;
     border-radius: 4px;
}

#hnav .ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}

/* Additional IE specific bug fixes... */
* html #hnav .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html #hnav .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}
/* End CSS */