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


/* tabs */
/* different than phone */
	#gen_tabs{
		width: 90%;
		border: 1px solid #AAA;
		margin: 2% 1% 0 3%;
		float: left;
		background: white;
	}
	
	#tab2_selector, #tab1_selector, #tab3_selector{
		padding: 0;
		background: #FFF url(../../images/graybar.jpg) no-repeat right top;	
		float: left;
		width: 33%;
		height: 2.5em;
	}
	
	#tab2_selector a, #tab1_selector a, #tab3_selector a{
		color: #AAA;	
	}
	
	#tab2_selector.selected, #tab1_selector.selected, #tab3_selector.selected{
		border-bottom: none;	
	}
	
	#tab2_selector.selected a, #tab1_selector.selected a, #tab3_selector.selected a{
		color: #000;	
	}
	
	#tab2_selector, #tab1_selector, #tab3_selector{
		border-bottom: 1px solid #AAA;
	}	

	#tab2_selector, #tab1_selector{
		border-right: 1px solid #AAA;
	}

	#tab2_selector h3, #tab1_selector h3, #tab3_selector h3{
		font-size: 1.2em;	
		font-weight: bold;
		text-align: center;
	
	}	
	
	#tab2_content, #tab1_content, #tab3_content{
		position: absolute;
		left: -2000%;
		bottom: -2000%;
		width: 0;
		display:none;
	}
			
	#tab2_content.selected, #tab1_content.selected, #tab3_content.selected{
		position: relative;
		left: 0;
		bottom: 0;
		width: 94%;
		clear: both;	
		padding:10px;
		display: inline-block;
	}

	#tab2_content .featured_tab2{
		
		width: 97%;
		padding: 4% 3% 4% 0%;	
		overflow: hidden;
		border-bottom: 1px solid #AAA;
	}
	
	#tab2_content .featured_tab2 img{
		width: 33%;
		float: right;
		margin: 0 0 3% 3%;
	}
	
	#tab2_content .featured_tab2 .tab2_details{
		width: 100%;	
		float: left;
	}
	
	#tab2_content .featured_tab2 .tab2_date{
		color: #AAA; 
		font-size: 0.9em;
		float: left;
	}
	
	#tab2_content .featured_tab2 .headline{
		font-size: 1.4em;
		font-weight: bold;
		padding-top: 2%;
		clear: left;
		line-height: 120%;
	}
	
	#tab2_content .featured_tab2 .headline a{
		color: black;
	}
	
	#tab2_content .featured_tab2 .teaser{
		color: black; 
		font-size: 1.0em;
		padding-top: 2.5%;
		clear: left;
		line-height: 150%;
	}
	
	#tab2_content .featured_tab2 .teaser a{
		color: black;	
	}
	
	#tab1_content .featured_event{
		
		width: 97%;
		padding: 4% 3% 4% 0%;	
		overflow: hidden;
		border-bottom: 1px solid #AAA;
	}	

/* Mobile Selectors */

#tab1_mselector, #tab2_mselector, #tab3_mselector{
		display:none;
	}

#tab1_mselector a, #tab2_mselector a, #tab3_mselector a{
		color: #AAA;	
	}

#tab1_mselector.selected, #tab2_mselector.selected, #tab3_mselector.selected{
		border-bottom: none;	
	}
	
	#tab1_mselector.selected a, #tab2_mselector.selected a, #tab3_mselector.selected a{
		color: black;	
	}
	
	#tab1_mselector, #tab2_mselector{
		border-bottom: 1px solid #AAA;
	}	


	#tab1_mselector h3, #tab2_mselector h3, #tab3_mselector h3{
		font-size: 1.2em;	
		font-weight: bold;
		text-align: center;
		padding: 0 !important;
	}	
	
	/* different than tablet */
	#tab1_content .featured_event .event_date{
		float: left;
		margin: 0 3% 0 0;
		font-size: 2em;
		max-width: 33%;
		width: 33%;
		text-align: center;
	}
	
	#tab1_content .featured_event .event_date{
		line-height: 150%;	
	}
	
	#tab1_content .featured_event .event_date a{
		font-weight: bold;
		color: #639;	
	}
	
	#tab1_content .featured_event .event_title{
		line-height: 150%;	
		font-size: 1.4em;
	}
		
	#tab1_content .featured_event .event_title a{
		font-weight: bold;
		color: black;	
	}
	
	#tab1_content .featured_event .event_details_container{
		max-width: 	64%;
		float:left;
	}
	
	#tab1_content .featured_event .event_time,.event_location{
		line-height: 150%;
	}

#tab3_content .featured_event{
		
		width: 97%;
		padding: 4% 3% 4% 0%;	
		overflow: hidden;
		border-bottom: 1px solid #AAA;
	}	
	
	
table.2col {

	width:500px;
	border:none;
	
}

table.2col tr, td{

	border:none;
	
}

table.2col td{

	width:50%;
	background-color:#663399;
	
}

table.2col p{

	text-align:center;
	
}

img.border {
	border: 1px solid black;
}

img.button {
	border:3px solid black;
	border-radius:10px;
}


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.two-col, thead, tbody, th, td, tr { 
		display: block; 
		border: none !important; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.two-col thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.two-col tr { border: none; }
	
	table.two-col td { 
		/* Behave  like a "row" */
		width:90%;
		padding: 10px auto;
		border: none;
		position: relative;
	}

	table.two-col img {
	
	width:100%;
	height:auto;
	
	}

	table.two-col p{
	
	text-align:center;
	
	}

}

/* phones */

@media 
only screen and (min-width: 320px) and (max-width: 736px){
	
	#contact_tabs{
		width: 100%;
		border: 1px solid #AAA;
		margin-left: auto;
		margin-right: auto;
		float: none;
		background: white;
		font-size: .8em;
	}
	
	#tab1_selector, #tab2_selector, #tab3_selector, #tab4_selector, #tab5_selector{
		display:none;
	}
	
	#tab1_mselector, #tab2_mselector, #tab3_mselector, #tab4_mselector, #tab5_mselector{
		padding: 1.0em 0;
		background: #FFF url(../../images/graybar.jpg) no-repeat right top;	
		float: left;
		display:inline-block;
		clear:both;
		width: 100%;
		height: .8em;
	}
	
	#tab1_mselector a, #tab2_mselector a, #tab3_mselector a{
		color: #AAA;
		font-size: 1em;
	}
	
	#tab1_mselector.selected, #tab2_mselector.selected, #tab3_mselector.selected, #tab4_mselector.selected, #tab5_mselector.selected{
		border: none !important;	
	}
	
	#tab1_mselector.selected a, #tab2_mselector.selected a, #tab3_mselector.selected a{
		color: black;	
	}
	
	#tab1_mselector, #tab2_mselector{
		border-bottom: 1px solid #AAA;
	}	

	#tab1_mselector h3, #tab2_mselector h3, #tab3_mselector h3{
		font-size: 1em;	
		font-weight: bold;
		text-align: center;
		padding: 0 !important;
	
	}	
	
	#tab1_content, #tab2_content, #tab3_content{
		position: absolute;
		left: -2000%;
		bottom: -2000%;
		width: 0;
		display:none;
	}
			
	#tab1_content.selected, #tab2_content.selected, #tab3_content.selected{
		position: relative;
		left: 0;
		bottom: 0;
		width: 100%;
		clear: both;	
		padding: 3%;
		display: inline-block;
		font-size:.8em;
	}
	
	#tab1_content, #tab2_content, #tab3_content{
		position: absolute;
		left: -2000%;
		bottom: -2000%;
		width: 0;
		display:none;
	}
			
	#tab1_content.selected, #tab2_content.selected, #tab3_content.selected{
		position: relative;
		left: 0;
		bottom: 0;
		width: 94%;
		clear: both;	
		padding: 3%;
		display: inline-block;
	}

	#tab1_content .tab1_left{
		width:100%;
	}
	
	#tab1_content .tab1_left img{
		width:100%;
	}
	
	#tab1_content .tab1_right{
		width:100%;
	}

	.tab1_right iframe{
		width:75%;
		margin: 0 auto !important;
		float:none;
	}


	#tab1_content, #tab2_content, #tab3_content, #tab4_content table{
		width:90%;
		margin-left:auto;
		margin-right:auto;
	}

	#tab1_content table, td, tr{
		border:none;
	}
	
	#tab2_content table, td, tr{
		border:none;
	}
	
	
	#tab3_content table, td, tr{
		border:none;
		margin:0 !important;
	}

	#tab3_content td {
		margin: 0 !important;
	}

	#tab4_content table, td, tr{
		border:none;
	}
	

	#tab3_content img{
	width:75%;
	margin:0 auto;
	
	}

	#tab3_content .tab3_left, .tab3_right{
	width:100% !important;
	margin: 15px auto;
	}

	.tab2_bottom td{
		width:100% !important;
		display:block;
	}

	.tab4_content td{
		width:100% !important;
		display:block;
	}

}