@charset "utf-8";
/* CSS Document */

/* this is a list of colors used within the site
blue color: #4f607a
gold color: #fecc73
light gray: #c8c8c8
dark gray: #373737
green: #52b696
almost black: #0d0d0d
*/


/*wildcard selector for html, body, ul, ol, li, etc */
* { 
margin: 0;
padding: 0;
border: 0;
}

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:#4f607a;
	color: #333333;
	font-size: 75%;
	margin: 0;
	padding: 0;
	text-align:center; /*fix IE5 bug for left/right value */
}

h1, h2, h3, h4, h5, h6  {
	font-family: Arial, Helvetica, sans-serif;
	font-size:115%;
	color: #52b696;
	margin: 0;
	padding: 0;
}

h1 {
font-size:140%;
color:#4f607a;
/*color:#373737;*/
}


h2 {
color:#373737;
}

h3 {
color:#4f607a;
font-size:180%;
}

h4 {
color:#fecc73;
background-color:#c8c8c8;
margin:5px 0 0 15px;
padding:5px;
}




h6 {
font-size:200%;
margin:0 0 5px 0;
color:#4f607a;
}


.clearit {
clear: both;
}

/*the wrapper contains all the web page elements */
#wrapper {
width: 800px;
background-color: #4f607a;
margin: 0px auto;
padding:0;
text-align:left /* the only reason this is here is to compensate for the text-align:center IE5 fix in the body selector */
}

/*the header contains the .banner and .logo elements as the top most items*/
#header {
width:800px;
height:94px;
background-color:#fecc73;
}

.banner {
float:left;
width:321px;
height:94px;
background-image:url(../img/banner.gif);
background-repeat:no-repeat;
}

.logo {
float:right;
width:319px;
height:94px;
background-image:url(../img/logo.gif);
background-repeat:no-repeat;
}

/*calling thie masternav because it sounds really cool "MASTER NAV AWAY! - that and it contains more than just the nav. It also contains that one box that declares Free Advice on the left hand, vertical nav menu called probono, and goldmargin, and the navbar*/
#masternav { 
	width:800px;
	height:38px;
	margin:0;
	padding:0;
}

.probono {
	float:left;
	width: 170px;
	height:38px;
	background-color:#373737;
}

.probono p {
	float:left;
	color:#fecc73;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 95%;
	margin:0;
	padding:11px 0 11px 55px;
}

.goldmargin {
	float:right;
	width: 35px;
	height:38px;
	background-color:#fecc73;
}

.navbar {
	float:right;
	background-color:#4f607a;
	width:400px;
	height:38px;
	margin:0 210px 0 0;
	padding:0;
}

.navbar ul {
	padding: 9px 0 2px 0;
	margin: 0;
	list-style:none;
}


.navbar ul li {
	display: inline;
	padding: 0;
	margin: 0;
}

.navbar ul li a {
	color: #E2E2E2;
	background-color:#4f607a;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 100%;
	margin:0px;
	padding:11px 10px 12px 10px; /* left and right values will expand the nav buttons out, so adjust this value if you add a menu item - don't mess with top and bottom padding:11px 15px 12px 15px; */
	text-align:center;
	font-family: sans-serif;
}

.navbar ul li a:hover, #nav ul li a:focus {
	background-color: #E8ECEF;
	color:#4f607a;
}


/*maincontent is a master container that holds the actual probono Free Advice navigation, textbox, and the textbar which is the thing separating the previous two - textcontent is what the actual body copy goes into*/

#maincontent {
	width:755px;
	background-color:#fecc73;
	float: left;
	margin:0;
	padding:0;
}

#probononav {
	float:left;
	list-style:none;
	width: 135px;
	height:auto;
	background-color:#373737;
}

#probononav ul {
list-style:none;
	padding: 0px;
	margin: 0;

}


#probononav ul li {
	display:block;
	text-align:right;
	padding: 10px;
	margin: 0;
}

#probononav ul li a {
	color: #FFFFFF;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 80%;
	margin:0;
	padding:0;
	font-family: sans-serif;
}

#probononav ul li a:hover, #nav ul li a:focus {
	color:#fecc73; 
}

#probononav hr {
border: solid 1px #fecc73;
}


#textcontent {
	width: 620px;
	background-color:#FFFFFF;
	padding: 0;
	margin:0;
	float: right;
}

.textbar {
	float:left;
	width: 35px;
	height:100%;
	background-color:#FEFAEF;
}

.textbox {
	width:545px;
	background-color:#E8ECEF;
	padding:20px;
	margin:0;
	float: right;
	height: 100%;
}

.textbox p, ul, li {
line-height:150%;
}

.texbox ul, li {
padding:0;
margin: 5px 0 0 15px;
}

.textbox a:link {
	color:#4f607a;
	text-decoration:none;
}

.textbox hr {
border: solid 1px #B7C1D0;
} 

.textbox a:hover, a:focus ,a:visited {
color:#52b696;
text-decoration:none;
padding: 2px 0;
}

#bottomspacer {
	float:left;
	width:755px;
	height:40px;
}

.bottombluemargin {
float:left;
width:135px;
height:40px;
background-color:#4f607a;
}

.bottomtextboxmargin {
	float:right;
	width:620px;
	height:40px;
	background-color:#E8ECEF;
}


#footer {
	text-align:center;
	padding: 0;
	margin: 20px 0;
}

#footer p {
font-size:75%;
color:#999999;
}

#footer p a {
	padding:5px;
	color:#999999;
	text-decoration:none;
}

#footer a:hover, #footer a:focus {
	color: #fecc73;
}


.leftimage {
float: left;
margin: 0 10px 10px 0;
border: 1px solid #000000;
}

.rightimage {
float: right;
margin: 0 0 10px 10px;
border: 1px solid #000000;
}

.lefttextbox {
float:left;
width:200px;
background-color:#fecc73;
color:#373737;
font-size:80%;
line-height:150%;
margin: 10px 25px 10px 0px;
padding:10px;
}

.righttextbox {
float:right;
width:200px;
background-color:#fecc73;
color:#373737;
font-size:80%;
line-height:150%;
margin:0px 0px 10px 10px;
padding:10px;
}

.leftimagebox {
float:left;
width:auto;
border: solid 1px #373737;
color:#373737;
font-size:80%;
line-height:150%;
margin: 0 10px 0 0;
padding:5px;
text-align:center;
}

/*the headlinebox is reserved for section headlines like home: or about:  */
.headlinebox {
	width:525px;
	background-color:#E8ECEF;
	border-left:solid 2px #B7C1D0;
	color:#4f607a;
	font-size:200%;
	font-weight:100;
	margin:0 0 5px 0;
	padding:0 0 0 8px;
}

.headlinebox a:link {
text-decoration:none;
color:#4f607a;
}

.headlinebox a:hover {
	color:#52b696;
}

.headlinebox a:focus {
color:#4f607a;
text-decoration:none;
}

.headlinebox a:visited {
color:#52b696;
text-decoration:none;
}

/* articles is a basic top of page navigation scheme for anchor elements within the page */
.articles {
	list-style:none;
}

.articles ul {
	list-style:none;
	padding: 0;
	margin: 0 0 25px 25px;
}


.articles ul li {
	display:block;
	background-color:#c8c8c8;
	text-align:left;
	width:250px;
	padding: 5px;
	margin: 5px 0;
}

.articles ul li a {
	color: #FFFFFF;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 110%;
	margin:0;
	padding:0;
	font-family: sans-serif;
}

.articles ul li a:hover, #nav ul li a:focus {
	color:#FFFFFF;
}

/* splash is for the "specials" announcements or new information that we want to direct folks to */

.splash {
float:right;
width:250px;
height:200px;
background-image:url(../img/splash.png);
background-repeat:no-repeat;
}

.splash p {
font-size:180%;
/*font-weight:bold;*/
text-align:center;
line-height:100%;
padding:60px 20px 20px 20px;
}




/* this is a list of colors used within the site
blue color: #4f607a
gold color: #fecc73
light gray: #c8c8c8
dark gray: #373737
green: #52b696
almost black: #0d0d0d
*/