/* CSS Document */
/* onlinecandidate.com */
/* Mobile CSS  */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

#headerWRAP { width: 100%}

	/* pagewrap */
	#maincontainer { width: 100%; }

	/* content */
	#content {
		width: 60%;
		/* padding: 3% 4%; */
		padding-left: 5px;
	}

#contentnosidebar {
	padding-top: 20px;
		width: 85%;
	padding-left: 5px;
	padding-right: 5px;
}


/* sidebar */
#sidebar {
	width: 35%;
	padding-right: 5px;
}
#sidebar .widget {
	margin-bottom: 10px;
}

/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		width: 100%;
		height: auto;
		min-height: 300px;
	}


/* BEGIN Mobile */
.nivoSlider { width: 100% !important; } 

.nivoSlider img { width: 100% !important; height: auto; }


}



/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 770px) {


	/* main nav */
	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}


	/* search form */
	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
		z-index: 100;
		height: 40px;
	}
	#searchform #s {
		width: 70px;
	}
	#searchform #s:focus {
		width: 150px;
	}

	/* main nav */
	#main-nav {
		position: static;
	}

	/* content */
	#content {
		width: auto;
		float: none;
		margin: 0;
	}

	/* sidebar */
	#sidebar {
		width: 100%;
		margin: 0;
		float: none;
	}
	#sidebar .widget {
		padding: 3% 4%;
		margin: 0 0 10px;
	}

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		min-height: 250px;
	}


#main {
	padding-left: 10px;
     padding-top: 20px;
}


#main-no-sidebar {
	padding-left: 5px;
     padding-top: 20px;
}


/* - NEW CODE FOR OC - using existing divs */

#header img {
    max-width:100%;
    height:auto !important;
width: auto\9 !important; /* ie8 */
}

#sitetitle {
font-size: 24px;
height: 26px;  
}


#siteslogan {
font-size: 18px;
height: 20px;  
margin-top: 0px;
padding-bottom: 20px;
}

#footer {
		width: 100%;
		margin: 0;
		float: none;
/*	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
     border-left-width: 0px;
     border-right-width: 0px; */
}

#footertext {
		width: 80%;
		margin: 0;
		float: none;
		font-size: 90%;
}
.disclaimer {
		width: 90%;
}
#tagline {
		width: 100%;
		margin: 0;
		float: none;
text-shadow: none;
}



	/* menu icon */
	#menu-icon {
		color: #000;
		width: 42px;
		height: 30px;
		background: #ecebeb url(../images/icon-menu.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #666;
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		background-color: #f8f8f8;
	}
	#menu-icon.active {
		background-color: #bbb;
	}
	


/* OC CODE REPLACEMNT nav dropdown */

#navbar {
/*	text-align: left;
	margin-left: auto;
	margin-right: auto;
	z-index: 15000; */
}

#navbar ul li a {
	display:inline;
	text-align: left;
	margin:0px;
	white-space:nowrap;
	border-radius: 0px;
	text-decoration: none;
	line-height:20px;
	color: #000000;
	font-weight:normal;
	clear: both;
	float: left;
	margin: 5px 0 5px 5px;
	padding-left: 90px;
	position:relative; right:0%;
}


#navbar ul li a:hover { color: #000000; text-shadow: none; text-decoration: underline;}

#navbar a {
	padding: 0px;
	display: block;
	color: #000000;
	background: none;
}

#navbar ul {
position: absolute; 
	top: 38px;
left: 0px;
	color: #000000;
text-align: left;
		width: 180px;
		z-index: 10000;
		padding: 0px;
		background: #EFEFEF;
		border: 0;
		border: solid 1px #999;
 		display: none; /* visibility will be toggled with jquery */
	margin:0px; 

}


#navbar ul ul li a { color:#000000; 	}
#navbar ul ul {
		z-index: 10000;
		width: auto;
		position: static;
		display: block;
		border: none;
		background: none;
		clear: both;
		float: left;
}

#navbar ul ul ul {
	color: #000000;
		z-index: 10000;
		width: auto;
		position: static;
		display: block;
		border: none;
		background: none;
		clear: both;
		float: left;
}

#navbar ul li:hover>ul{ opacity: 1; position:relative; top:99%; left:0; }
#navbar ul ul li:hover>ul{ position:relative; top:0; left:100%; opacity: 1; z-index:1000; background:none; }

#navbar a.navarrow {
display: hidden;
color: #EFEFEF;
height: 0px;
margin:0px;
text-decoration: none;
}


/* END OC CODE REPLACEMNT nav dropdown */


	/* ensure #nav is visible on desktop version */
	#navbar {
		display: block !important;
	}


	/* nav-wrap */
	#navbar {
		position: relative;

	}


	/* images */
img {
    max-width:100%;
    height:auto !important;
	width: auto\9 !important; /* ie8 */
}



#content {
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #fff; 
}



/* Force table to not be like tables anymore */
	.main table, .main thead, .main tbody, .main th, .main td, .main tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
.main 	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
.main 	tr {  }
	
.main 	td { 
		/* Behave  like a "row" */
		border: none;
 		position: relative;
		padding-left: 10%; 
	}
	
.main 	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}



	.main table, .main thead, .main tbody, .main th, .main td, .main tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
.main 	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
.main 	tr {  }
	
.main 	td { 
		/* Behave  like a "row" */
		border: none;
 		position: relative;
		padding-left: 10%; 
	}
	
.main 	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}




 


/* END NEW CODE FOR OC - using existing divs */


}


/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {

}


/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 560px) {

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}

	/* main nav */
	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

#header {

}
#header img {
    max-width:100%;
    height:auto !important;
width: auto\9 !important; /* ie8 */
}

#sitetitle {
font-size: 20px;
height: 24px;  
}

#sitespacer {
visibility: hidden;
}

#siteslogan {
font-size: 14px;
height: 25px;  
 padding-bottom: 10px;
}

#content {
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #fff; 
}


input {
display: inline;
  margin: 0;
  width: 100px;
text-align: left;
}

	#poll input { 
  width: 20px;

	}
.textarea {
  display: inline;
  margin: 0;
  width: 150px;
text-align: left;
}

label {
    display: block;
    float: left;
    width: 100px;
}

checkbox {
    float: left;
}


#Security-Question input {
  width: 15px;
}

/* BEGIN ENHANCED CALENDAR */
#calendar{ display: block;	 }
#calendar table { font-size: 10px;}
#calendar td { width: 50px; height: 50px; }
#calendar th { width: 50px; height: 30px; font-weight: bold; font-size: 10px; }
#calendar td:hover, #calendar th:hover { background-position: 0px -81px; color: #222;}
#calendar td.date_has_event { background-position: 162px 0px; 	color: white;}
#calendar td.date_has_event:hover { background-position: 162px -81px;}
#calendar td.padding { background: url("images/calendar/calpad.jpg");}
#calendar td.today { background-position: 81px 0px; color: white;}
#calendar td.today:hover { background-position: 81px -81px;}
.daysfont {  font-size: 10px; font-style: normal; font-weight: bold; }
.month {  font-size: 12px; font-style: normal; line-height: normal; font-weight: normal;}
.number {  font-size: 10px; font-style: normal; font-weight: bold; }
.event {  font-size: 10px; color: #000000; text-decoration: none;}
.viewEvent {  font-size: 10px; font-weight: bold; color: #000000; text-decoration: none;}
.eventLink {  font-size: 10px; font-weight: bold; color: #000000; text-decoration: none; font-weight:bold;}
/* END ENHANCED CALENDAR */


/*   / SPLIT TO MEDIA CSS FILE */




.align-left {
    max-width:100%;
    height:auto !important;
	width: auto\9 !important; /* ie8 */
	float: none;
    margin: 0 auto;
 padding-bottom: 15px;
display:block; 
}

.align-right {
    max-width:100%;
    height:auto !important;
	width: auto\9 !important; /* ie8 */
	float: none;
    margin: 0 auto;
display:block; 
 padding-bottom: 15px;
}

.align-center {
    max-width:100%;
    height:auto !important;
	width: auto\9 !important; /* ie8 */
	float: none;
    margin: 0 auto;
display:block; 
 padding-bottom: 15px;
 }
}