@charset "utf-8";



/* hide from IE mac \*/
body { 
overflow: scroll; 
} 
/* end hiding from IE5 mac */

/*normal text for grey text box*/
p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	margin-top: 5px;
	
	
}
	
	/*section title for black bar*/
h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 24px;
	font-weight: bold;
	color: #FFF;
	margin: 0px;
	padding-bottom: 5px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;

}



/*removes underline from all links*/
a {
	text-decoration: none;
}

/*removes border from image links*/
a img {
	border: none;
}

/*removes bulletpoints and spacing modifications from list*/
ul {
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

/*centers entire page*/
#container {
	width: 980px;
	margin: 0 auto;
}


/*box holding photo of child on left, first positioning box larger so that float works correctly with oversized image*/
#photobox {	
	height: 150px;
	width: 182px;
	float: right;
} 

/*actual area that photo will occupy*/
#photobg {
	height: 130px;
	width: 182px;
	background-color: #000000;
	float: right;
	margin-top: 20px;
	overflow: hidden;
}



/*GREY TEXT BOX*/

#textbox {	
	height:540px;
	width: 608px;
	background-color: #dcdcdc;
	float: left;
	margin-top: 10px;
	margin-right: 10px;
	overflow: visible;
	color: #000000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 40px;
} 

/*allows for wider text box. alternate id shouldn't be necessary.*/
#alttext {	
	height:520px;
	width: 788px;
	background-color: #dcdcdc;
	float: left;
	margin-top: 10px;
	margin-right: 10px;
	overflow: visible;
	color: #000000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 40px;
} 

/*allows for a minimum height of grey text box, which stays no matter what text length is.
minimum height is specified in #textbox and #overflow box is variable height to incorporate any length of text. */
#overflowbox {
	background-color: #dcdcdc;
	margin-bottom: 40px;
}

/*black line for section title*/
#textline {	
	height: 25px;
	background-color: #000000;
	overflow: hidden;
} 

/*positions text within grey box*/
#texttype{
	width: 85%;
	padding-top: 20px;
	padding-bottom: 40px;
	padding-left: 7%;
	clear: both;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	margin-top: 5px;
}

/*positions columns of names on staff page*/
#staff1 {
	padding-top: 20px;
	padding-bottom: 40px;
	padding-left: 9%;
	float: left;
}

#staff2 {
	padding-top: 20px;
	padding-bottom: 40px;
	padding-right: 11%;
	text-align: right;
	float: right;
}

	

/*header for sections within main text*/
#texttype h1 {
	font-family:"Times New Roman", Times, serif;
	font-size: 18px;
	color: #000000;
	border-bottom-width: 6px;
	border-bottom-style: solid;
	border-bottom-color: #a4563f;
	line-height: 18px;
	margin-bottom: 10px;
	margin-top: 30px;
}

/*header minus red bar underneath*/
#texttype h2 {
	font-family:"Times New Roman", Times, serif;
	font-size: 18px;
	color: #000000;
	margin-bottom: 0px;
	margin-top: 30px;
}

/*links within main text*/
#texttype a, #staff1 a, #staff2 a {
	font-weight: bold;
	color: #000000;
}

#texttype a:hover, #staff1 a:hover, #staff2 a:hover {
	color: #FFFFFF;
}

/*lists within textbox*/
#texttype ul, #staff1 ul, #staff2 ul {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 20px;
}


/*miniheader*/
#texttype strong {
	font-size: 14px;
	font-family:"Times New Roman", Times, serif;
	color: #000000;
	font-weight: bold;
}

/*underline, used in "systemic advocacy" to cite journals where reports were published*/
.underline {
	text-decoration: underline;
}

/*phone number on "contact" page*/
.phonebold {
	font-weight: bold;
	color: #a4553f;
}

/*position linked names at top of staff page*/
#staff1 {
	
}

#staff2 {
	float: right;
}


/*positions adobe pdf image*/
#pdf {
	padding-right: 10px;
}
	

/*light grey text at very bottom: "Children's Law Center of Massachusetts, 2010" 
currently not included due to problems interacting with minimum height fix. */
#bottomtext {
	width: 608px;
	height: 30px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #767676;
	background-color: #FFF;
	text-align: center;
}


/*RED LINKS BOX*/

#linksbox {	
	width: 170px;
	background-color: #a4553f;
	float: left;
	margin-top: 10px;
	margin-right: 10px;
} 

/*black line for section title*/
#linksline {	
	height: 25px;
	width: 170px;
	background-color: #000000;
	overflow: hidden;
	margin-bottom: -5px;
	padding-bottom: 0px;
} 

/*moves section title over*/
#linksline h1 {
	text-align: right;
}
	
/*positions type within links box. links text is an unordered list.*/
#linkstype{
	width: 150px;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 20px;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #FFF;
	line-height: 16px;
}

/*formatting of actual text (non-link formatting shouldn't show up because this is meant to be a list of links)*/
#linkstype a{
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #FFF;
	line-height: 16px;
}
#linkstype a:hover {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #000;
	line-height:16px;
}

/*increases the line height between list items to differentiate between two different list items and two lines of one list item */
#linkstype li {
	padding-top: 6px;
}

/*nested lists, for "what we do" under "individual legal representation" and "CLCM programs"*/
#linkstype ul ul, #linkstype ul ul a {
	font-size: 12px;
	line-height: 12px;
	margin-left: 10px;
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
	padding: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-indent: -10px;
	
}

#linkstype ul ul a:hover {
	font-size: 12px;
	line-height: 12px;
	margin-left: 10px;
	color: #000000;
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
	padding: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-indent: -10px;
}

/*denotes the link to the page the user is already on*/
.onpage {
	text-decoration: underline;
}


/*GREEN NEWS BOX*/

#newsbox {	
	width: 182px;
	background-color: #6ca44a;
	float: right;
	margin-top: 10px;
} 

/*black line for section title*/
#newsline {	
	height: 25px;
	width: 182px;
	background-color: #000000;
	overflow: hidden;
} 

/*positions type and provides style for date text*/
#newstype{
	width: 150px;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	color: #FFF;
}

/*format of link text underneath dates*/
#newstype a {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFF;
}
#newstype a:hover {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #000;
}

/*increases the line height between list items to differentiate between two different list items and two lines of one list item */
#newstype li {
	padding-top:10px;
}


/*PURPLE INFO BOX*/

#infobox {	
	width: 182px;
	background-color: #4a4094;
	font-weight: bold;
	float: right;
	margin-top: 10px;
} 

/*black line for section title*/
#infoline {	
	height: 25px;
	width: 182px;
	background-color: #000000;
	overflow: hidden;
} 

/*positions text and includes formatting for non-link text*/
#infotype{
	width: 160px;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 20px;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #000;
}

/*formatting for link text*/
#infotype a{
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FFF;
}

#infotype a:hover{
	font-size: 12px;
	color: #000;
	
}

/*increases the line height between list items to differentiate between two different list items and two lines of one list item */
#infotype li {
	padding-top:4px;
}


/*HEADER*/
/*box for positioning, this is not actually visible. larger than header size to allow oversized header image to fit.*/
#headerbox {	
	height: 150px;
	width: 788px;
	float: left;

}

/*visible banner background*/
#headerbg {
	height: 130px;
	width: 617px;
	background-image: url(images/title.png);
	float: left;
	margin-top: 20px;
	
}
 
/*"Children's Law Center of Massachusetts" header text, currently replaced by image due to positioning differences on IE7*/
#headernametype{
	width: 786px;
	margin-bottom: 12px;
	text-align: right;
	font-family: "Times New Roman", Times, serif;
	font-size: 36px;
	color: #FFF;
	line-height: 28px;
	padding-top: 15px;
	padding-right: 2px;
	position: relative;
	float: right;


}
/*header link formatting, links are in an unordered list*/
#headerlinktype, #headerlinktype a:hover{
	width: 788px;
	text-align: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	color: #000;
	padding-right: 0px;
	margin-bottom: 0px;
	margin-top: 110px;
	
}
#headerlinktype a {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	color: #FFF;
	padding-right: 0px;

}


/*forces list horizontal and adds space between list items*/
#headerlinktype ul, #headerlinktype li {
	display: inline;
	margin-left: 34px;
}

/*CLCM logo*/
#headerimage {
	float: left;
}

@media screen and (max-device-width: 480px){
 /* All iPhone only CSS goes here */
 #headerlinktype, #headerlinktype a, #headerlinktype a:hover {
	 font-size: 16px !important;
 }