@charset "utf-8";

/*################################################################################################
setting up the defaults for all content in the body of our HTML document
#################################################################################################*/
body  {
	font-family:Verdana, Arial, Helvetica, sans-serif; /* unless specified elesewhere, default fonts*/
	color:#333; /* unless specified elesewhere, this is default text color*/
	font-size:78%; /*default font size*/
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	background-color: #F3f3f3; /* specify a color in case bg image fails*/
	/*background-image: url(ART/bgGrad.jpg); *//*uses a Gradient background image*/
	background-image:url(ART/bg_tile.gif);
	/*background-repeat: repeat;*/ /* the gradient image is only 2 pixels wide but 1600 pixels high (to fit in big monitors) and repeated accross the page*/
}

/*################################################################################################
The following styles are for positioning the DIVS (panels that act as containers for the header, footer and other columns
#################################################################################################*/
 
 #container {
	/*
	IMPORTANT THIS IS THE OUTER CONTAINER, It defines the width of the web page and the background color of all other elements inside it.*/
	
	/*using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	/* the auto margins (in conjunction with a width) center the page */
	width: 957px;
	background-color:#FFF;
	
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding: 20px;
} 
#inner
{
width:auto;
background-color:#FFF;
	

}
/* Header */
#logo
{
	height:100px;
	/*display: block;*/
	/*width: 957px;*/
	/*margin: 0em auto;*/
	text-align:right;
	padding:0px 10px 0 0px;
	background-image: url(ART/Logo.png);
	background-repeat: no-repeat;
	background-position: left center;	/*background-color:#FFFFFF;*/
}
 #contactnumber {
	text-align:right;
	
	color:#333;
	font-size:18px;
	font-weight:bold;
	padding-top: 35px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 0;	/*margin-right:25px;	*/
	
	} 
/* Content */
 #AccessabiltyHolder {
	text-align:right;
	color:#333;
	font-size:24px;
	font-weight:bold;
	padding-top: 25px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 0;	/*margin-right:25px;	*/
	background-image: url(ART/Telephone.gif);
	background-repeat: no-repeat;
	background-position: left center;
	} 

 #header {
	height:auto;
/*	padding:1px;*/
	margin-bottom:25px;
	/*text-align:right;*/
	color:#FFFFFF;
	/*background:#333;*/
	/*border-top:#FF6600 2px solid; */
	/*border-bottom:#FF6600 4px solid;*/
	

}
#header h1, #header h2
{
	
	display:none;
} 

 #leftColumn {
	float: left; /* since this element is floated, a width must be given */	
	width: 190px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding-top:0px;
	padding-bottom:10px;
	
	/*border: 1px solid #25578E;*/
	/*border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #333;*/
}
 #rightColumn {
		
	margin-left: 220px; /* the left column is 500 pixels wide so we started the right column at 520 pixels from the left to leave a margin*/
	/*padding-top:0px;
	padding-right: 0px;
	padding-bottom:10px;*/
	/*padding-left: 10px;*/
	/*border: 1px solid #25578E;*/

} 
.divHeader{
	/*width: 180px;*/
/*background: black url(ART/titlebarGrad.png) repeat-x center left;*/
/*background-color:#CCCCCC;*/
	border: 1px dotted #333;
	color:#333;
	font-size:10px;
	font-weight:bold;
	padding:5px 5px 5px 5px;
}
.infoPanel
{
	/*this is a reusable class and can be applied anywhere you want to make a bordered panel*/

	border: 1px solid #25578E;  
	padding:5px 5px 5px 5px;
	/*background-color:#FF6600;*/
	/*color:#FFFFFF;*/
	margin-bottom:1em;
	
}
.infoPanel li
{
	margin-left:1em;
	margin-bottom: 0.5em;
	font-style:italic;
	list-style-type: disc;	
	
}
.infoPanel h2{font-size:12px; font-weight:bold; color:#FF3300; }
div.panel{ border:1px dotted #666666;
padding-top: 5px;
	padding-right:5px;
	padding-bottom: 5px;
	padding-left: 5px;
	margin-bottom:10px;
	
	}
 #footer {
	/*padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
/*	background-color:#DFDFDF;*/
	padding:10px 0px 20px 0px;
	/*border-top:#333 1px double;*/
	/*border-top-style: double;
	border-top-color: #333;
	border-top-width: 1px;*/
	text-align:center;
	height:auto;
	/*
	border-bottom-style: dashed;
	border-bottom-color: #CCCCCC;*/
	margin-top:25px;/*creates a gap btween the footer and anything above it*/
} 
 #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 1px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	
	
	
}


/*################################################################################################
The following styles are for FORMATTING the content i.e Images, Headings, paragraphs, reuseable classes for text etc

#################################################################################################*/

.post {
	margin-top: 10px;
	
}

.post .date {
	float: left;
	width: 76px;
	height: 58px;
	margin: 0;
	margin-right: 20px;
	padding-top: 2px;
	background: #514F42;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}

.post .date b {
	margin: 0;
	padding: 0;
	display: block;
	margin-top: -5px;
	font-size: 40px;
}

.post .title {
	margin: 0;
	padding: 0  0 0 0;
	/*margin-left: 10px;
	padding-left: 50px;*/
	font-size: 1.4em;
}
.post  h3 {
	padding: 0 0 2px 0px;
	margin: 0;
	width:auto;
	/*background-color:#CCCCCC;*/
	
	color:#333;
	font-size: 1em;
	font-weight:bold;
}

/*.post .title h2 {
	padding: 0;
	margin: 0;
	width:auto;
	background-color:#666666;
	color:#FFFFFF;
}*/

.post .hr1 {
}

.post .meta {
	padding: 0;
	color: #6B6F81;
	line-height:normal;
	margin-top: 8px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0px;
}

.post .meta a {
	color: #828170;
}

.post .entry {
	margin: 0;
	padding: 0 0 5px 0;
	border-bottom: 1px dashed #666633;
}

.post .entry blockquote
{
	/*padding-left: 1em;*/
	margin-bottom: 1.5em;
	border:#333 1px dotted;
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #FF6600;
	padding: 0.5em 0.5em 0.5em 1.5em;
	background-color:#EAEAEA;
	color:#333333;
	
	font-style:italic;

	
}
.post .entry li
{
	
	margin-bottom: 0.5em;
	font-style:italic;
	list-style-type: disc;	
	
}
.sjfMedia{ color:#FF3300; font-size:1em; font-weight:bold;}
/*INLINE DIVS##########################################################
###############################################################################*/

div.float {
	float: left;
	width:225px;
	height:100px;
	margin-left:10px;
	border: 1px solid #333;
	background-color: #f6f6f6;
  }
  div.floatFooter {
	float: left;
	width:30%;
	height:100px;
	padding:5px;
	margin-left:1.5%;
	border: 1px dotted #333;
	text-align:left
	
  }
 
 .floatheader{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	height:30px;
	background-color:#5A5E67;
	color:#333;
	font-size:12px;
	padding:4px;
	border-bottom:#FF0000 2px solid;
	font-weight: bold;
	vertical-align: middle;
   }
  
div.float p {
	text-align: left;
	padding:0 3px 0 3px;
	color: #333;
	
   }
   div.floatFooter p {
	
	padding:0 3px 0 3px;
	color: #333;
	font-size:11px;
   }
   div.floatFooter h3 {
	font-size:14px;
	font-weight:bold;
	padding:0;
	color: #333;
	margin:0;
	line-height: normal;
   }
  

div.spacer {
  clear: both;
  }
  div.container {
  border: 2px dashed #333;
  width:550px;
  background-color: #ffe;
  }
  /*end##########*/

h1{font-size:36px;}
h2{font-size:24px;}
h3{font-size:18px;}
.fltrt { 
/* this class can be used to float an image or div holding an image right in your page. 
The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px; /*creates a space around the floated element and text that will flow around it*/
	margin-bottom:8px; /*creates a space around the floated element and text that will flow around it*/
}

.fltlft { 
/* this class can be used to float an element left in your page */
	float: left;
	
	margin-right: 5px; /*creates a space around the floated element and text that will flow around it*/
	margin-bottom:5px; /*creates a space around the floated element and text that will flow around it*/
}
.clearfloat { 
/* this class should be placed on a div or break element and should be the final element 
before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.infoPanel
{
	/*this is a reusable class and can be applied anywhere you want to make a bordered panel*/
	
	font-size:10px;
	font-style:normal;
	border: 1px dashed #CCCCCC;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

/* LIST TAG FORMATING*/
ul
{
	list-style-type:none;

}

/*ACCORDIAN MENU ############################################################
###############################################################################*/
.arrowlistmenu{
width: auto; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
	color: #FFF;
	background: black url(ART/titlebarGrad.png) repeat-x center left;
	/*background-color:#333;*/
	margin-bottom: 10px; /*bottom spacing between header and rest of content*/
	text-transform: uppercase;
	padding: 4px 0 4px 10px; /*header text is indented 10px*/
	cursor: hand;
	cursor: pointer;
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-size: 12px;
	font-weight: bold;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(ART/titlebar-activeGrad.png);
/*background-color:#FF6600;*/

}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #333;

background: url(art/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

/*THIS IS THE STYLE FOR THE MENU IN THE HEADER #################################################################
###############################################################################################################*/
#navcontainer
{
/*this is the div that holds the menu*/
	margin-top:20px;
	overflow: hidden;
	
}


#navlist
{

list-style-type: none;
margin: 0;
padding: 0;
color:#FFFFFF;
}

#navlist li
{
border-left: 1px solid #FFFFFF; /*PIPE Between menus*/
float: right;
line-height: normal;


margin: 0 8px 0 -8px;
padding: 0 8px 0 8px;
text-transform:uppercase;
}




/*HYPERLINKS must be in this order IMPORTANT###########################################################
#############################################################################################################################*/

a 
{
	text-decoration: underline;
	
}

a:link 
{
	color: #FF0000; /*red*/
}
a:visited
{
	color: #FF0000;
}
a:hover 
{
	color: #000; /*blue*/
	text-decoration: underline;
	font-weight: bold;
}
a:active 
{
	color: #FF0000;
	
}
/*ALTERNATIVE HYPERLINK FOR DARK DIVS ########################################################
###########################################################################################*/
a.DkMenuLink
{
	
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 8pt;
	
	
}	

a.DkMenuLink:link
{
	color: #FFFFFF;
	
}
a.DkMenuLink:visited 
{
	color: #FFFFFF;	
	
	}
a.DkMenuLink:hover 
{
	color: #FF0000;
	text-decoration: underline;
	}
a.DkMenuLink:active 
{
	color: #FFF;	
	
	}


/*FORM STYLES##################################################################################
##############################################################################################*/

/*###FORMS##################################################
###################################################################*/
form{text-align:left;}
label{
float: left;
width: 200px;
font-weight: bold;
}

input, textarea{
width: 200px;
margin-bottom: 5px;
}

textarea{
width: 300px;
height: 150px;
}

.boxes{
width: 1em;
}

.submitbutton{
margin-left: 200px;
margin-top: 5px;
width: 90px;
}


/*fieldset
{
	border:none; 
	margin-bottom:4px;
}	
legend
{
	color:#ffffff; 
	font-style:italic;
}

input {
	background-color: #CCCCCC;
	
}

textarea { 
	 background-color: #CCCCCC; 
	 
}*/