@charset "utf-8";

/* --------------------------
 * Define the Mobile Styles
 * --------------------------
*/

#mobile_header {
	display: none;
}
#mobile_header .menu_bar {
	background-color:#000;
	padding:10px;
}
#mobile_header .menu_icon {
	float:left;
}
#mobile_header .logo {
	float:left;
	margin:5px 0px 0px 10px;
}
#mobile_header .tagline {
	float:right;
	color:#fff;
	margin:0px 0px 0px 10px;
}

/* ----------------------------------
 * Define the Mobile Navigation Menu
 * ----------------------------------
*/

#mobile_menu {
	display:none;
	margin: 5px 10px 0px 10px ;
		background-color:	#D8D8D8;
}
#mobile_menu .switch {
	font-size:0.8em;
	border-top:1px solid #fff;
	padding:10px 0px 10px 20px;
}
#mobile_menu .switch  a {
	color: #000;
}
#mobile_menu .switch  a:hover {
	text-decoration: none;
}

#mobile_collapse_nav {
	display: none; 
	border-width: 1px;
	border-style: solid;
}

/* Expandable List Styles */

#expList {
    clear: both;
}
#expList ul {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList li {
	  list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
    line-height:2.5em;  /* change height of each menu item */
    text-indent:0px;
    background-position: 3px 14px;  /* position the + or - icon */
    padding-left: 20px;
    background-repeat: no-repeat;
		border-top:1px solid #fff;
		font-weight:normal;
}
/* Collapsed state for list element */
#expList .collapsed {
   /* background-image: url(/images/menu/collapsed.png); */ 
		font-weight:normal;
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    /* background-image: url(/images/menu/expanded.png); */ 
		font-weight:bold;
}
#expList a {
	color: #000;
}
#expList a:hover {
	text-decoration: none;
}

/* -------------------------
 * Define Mobile Footer 
 * -------------------------
*/

#mobile_footer {
	display: none;
}
#mobile_footer a {
	color:#fff; 
}

#mobile_footer_menu {
	margin-top:5px;
	background-color:#555;
	color:#fff;
	padding:10px 10px;
}
#mobile_footer_menu .items {
	width:100%;
}

#mobile_footer_copyright {
	font-size:90%;
	background: #000;
	color:#fff;
	padding:20px 10px;
	margin-top:5px;
}

/* ------------------------------------------
 * Activate mobile styles with a media query
 * ------------------------------------------
*/


@media screen and (max-width:980px){	/*we set this value to swap from desktop menu to mobile menu */
/* Note: Portrait ipad is 768px (W) x 1024px (H)
/* These styles override the global styles when it is a mobile (small screen) */
/* redefine the basic page layout for mobile */
	
#layout {
	margin-left:0px;  /*make all menu elements use the entire screen width*/
	margin-right:0px;
	/*margin-bottom:5px;
	margin-top:5px;*/
}
#desktop_header {
	display: none;	/*hide the desktop menu */
}
#desktop_tab_menu {
	display: none;	/*hide the desktop menu */
}
#desktop_footer {
	display:none;		/*hide the desktop footer */
}
#mobile_header {
	display:block;	/*show the mobile header*/
}
#mobile_menu {
	display:block;	/*show the mobile menu bar*/
}
#mobile_menu_close_icon {
	display:none;		/* hide the mobile menu close icon */
}
#mobile_footer {
	display:block;	/*show the mobile footer*/
}
#mobile_collapse_nav {
		display:none;
}
#mobile_collapse_nav.showme {
	 display:block;
}

/* redefine standard tags for mobile */
h1, h2, h3, h4, h5, h6 {
    font-weight:bold;
    /* color: rgb(75, 75, 75); */
}
h1 {
		font-size:1.3em;
}
h2 {
    font-size: 1.2em;
}

/* -------------------------------------------------
 * Re-Define Desktop styles for breadcrumb bar
 * -------------------------------------------------
*/

#breadcrumb_bar {
	padding-left:15px;
}

#breadcrumb_bar li {
	 display: block; 
}
	
/* -------------------------------------------------
 * Re-Define Desktop styles for multiple content pages
 * -------------------------------------------------
*/
	
.content {
	margin-top: 10px;
}

.content_padding {
	padding-left:15px;
	padding-right:15px;
}

.welcome_box {
	padding: 15px;
	background-color: #006dc3;
	color: #fff;
	line-height: 1.5em;
}
	
.error_message_box {
	margin-top:20px;
	padding: 15px;
	background-color:#FDB0B1;
}
.error_message_box .heading
{
	font-size:1em;
	font-weight:bold;
}


} /* End of Media Query Styles */