/***********************************************************************************************************************
DOCUMENT: style/format.css
DEVELOPED BY: Ryan Stemkoski
COMPANY: Zipline Interactive
EMAIL: ryan@gozipline.com
PHONE: 509-321-2849
DATE: 2/26/2009
DESCRIPTION: This document contains the structural formatting files for the accordion style menu.
************************************************************************************************************************/
.wrapper_accordion {
	width: 100%  !important;
	border: 0px solid green !important;
	margin-left: 0% !important;
	margin-right: 0% !important;
	padding-left: 0%;
	padding-right: 0%;
	margin-top: 20px;
	padding-top: 10px;
	font-size: 100%;
	
	
	}

.accordionButton {	
	
	width: 94%;
	padding-left: 2%;
	padding-top: 2%;
	padding-right: 0%;
	padding-bottom: 2%;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	font-family:'Skoda Pro';
	color: #000;
	font-size: 125%;
	min-height: auto;
	cursor: pointer;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	margin-bottom: 3px;
	background-color: #f8f8f8;
	margin-left: 2%;
	margin-right: 2%;		
	
	
	}
	
	.accordionButton:before {	
	content: '+' ;
	float: left;
	margin-right: 10px;
	font-weight: bold;
	
	}
	
	.accordionButton.on:before {	
	content: "-";
	float: left;
	margin-right: 10px;
	font-weight: bold;
	
	}
/*.accordionButton:Active:after {	
    content: "-";
    float: left;
    margin-right: 10px;
    font-weight: bold;
	
}*/

	
.accordionButtonActive {	

	width: 94%;
	padding-left: 3%;
	padding-top: 2%;
	padding-right: 3%;
	padding-bottom: 2%;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	font-family:'Skoda Pro';
	color: #000;
	font-size: 125%;
	min-height: auto;
	cursor: pointer;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	margin-bottom: 3px;
	background-color: #000;
	
	
	
	
	}
	
	
	
	.accordionButtonNotactive {	
	
	width: 100%;
	padding: 15px 15px 15px 25px;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	font-family:'Skoda Pro';
	color: #000;
	font-size: 125%;
	min-height: auto;
	cursor: pointer;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	margin-bottom: 3px;
	background-color: #f8f8f8;
	
	
	
	}
	

	
.accordionContent {	
	width: 96%;
	float: left;
	_float: none; /* Float works in all browsers but IE6 */
	border-top: 0px solid #d8d8d8;
	border-right: 0px solid #d8d8d8;
	border-bottom: 0px solid #d8d8d8;
	border-left: 0px solid #d8d8d8;
	background-color: #fff;
	padding-left: 2%;
	padding-right: 2%;
	margin-bottom: 20px;
	display: none;
	}
	


	
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/


	
.headline_boxes_accordion {
font-family:'Skoda Pro';
font-size: 100%;
color: #000;
margin-left: 10px;
margin-right: 10px;
border: 0px solid red;
width: 95%;
height: 100%;


}

@media screen and (max-width : 1079px){
	
	.accordionButton {	
	content: "+";
	width: 94%;
	padding-left: 2%;
	padding-top: 2%;
	padding-right: 0%;
	padding-bottom: 2%;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	font-family:'Skoda Pro';
	color: #000;
	font-size: 100%;
	min-height: auto;
	cursor: pointer;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	margin-bottom: 3px;
	background-color: #f8f8f8;
	margin-left: 2%;
	margin-right: 2%;		
	
	
	}
}

@media screen and (max-width : 50em){
	
	.accordionButton {	
	content: "+";
	width: 96%;
	padding-left: 2%;
	padding-top: 2%;
	padding-right: 0%;
	padding-bottom: 2%;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	font-family:'Skoda Pro';
	color: #000;
	font-size: 100%;
	min-height: auto;
	cursor: pointer;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	margin-bottom: 3px;
	background-color: #f8f8f8;
	margin-left: 2%;
	margin-right: 2%;		
	
	
	}
}

@media screen and (max-width : 30em){
	
	.accordionButton {	
	content: "+";
	width: 96%;
	padding-left: 2%;
	padding-top: 2%;
	padding-right: 0%;
	padding-bottom: 2%;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	font-family:'Skoda Pro';
	color: #000;
	font-size: 100%;
	min-height: auto;
	cursor: pointer;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	margin-bottom: 3px;
	background-color: #f8f8f8;
	margin-left: 2.5%;
	margin-right: 2%;		
	
	
	}
}

@media screen and (max-width : 25em){
	
	.accordionButton {	
	content: "+";
	width: 96%;
	padding-left: 2%;
	padding-top: 2%;
	padding-right: 0%;
	padding-bottom: 2%;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	font-family:'Skoda Pro';
	color: #000;
	font-size: 100%;
	min-height: auto;
	cursor: pointer;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	margin-bottom: 3px;
	background-color: #f8f8f8;
	margin-left: 2.9%;
	margin-right: 2%;		
	
	
	}
}