/*
Webkit Text Size Adjust:
Use -webkit-text-size-adjust:none to disable text size adjust on the iPhone. 
*/
html {
	-webkit-text-size-adjust: none;
}


/*
Main Structure CSS

Again, I'm not going to get into the details. The main "pagewrap" container is 1024px wide. Header has a fixed height 160px. The "content" container is 700px wide floated left. The "sidebar" content is 300px wide floated right.
*/

#pagewrap {
	width: 1024px;
	margin: 0 auto;
	background-color:#FFF;
}

/* error 404 container  */
#error-404 {
		width: 100%;
		background-color:#FFF;
	}
#error-404-a {
		width: inherit;
		display:none;
	}
#error-404-b {
		width: inherit;
	}
	
	
/* main header container  */
#header {
	/*	height: 160px;	*/
		height: auto;
	}
	#header-top
		{
		width: 100%;
		float: left;
		background-color:#de7f23;
		}
		#header-text
			{
			float: left;
			background-color:#de7f23;
			}
		#header-search
			{
			float: right;
			background-color:#de7f23;
			padding-top: 5px;
			padding-right: 5px;
			}
		#header-social
			{
			float: right;
			background-color:#de7f23;
			}
	/*  end of header-top containeers  */
	#header-middle
		{
		width: 100%;
		height: 170px;
		float: left;
		background-image:url(../_images/header_newsletter_fill.jpg);
		background-repeat:repeat-x;
		}
		#header-logo
			{
			width: auto;
			float: left;
			background-image:url(../_images/header_newsletter_fill.jpg);
			}
		#header-text1
			{
			width: auto;
			float: none;
			background-image:url(../_images/header_newsletter_fill.jpg);
			}
		#header-right
			{
			width: auto;
			float: right;
			background-image:url(../_images/header_newsletter_fill.jpg);
			}
	/*  end of header-middle containeers  */
	#header-nav
		{
		width: 100%;
		height:auto;
		background-color:#7c4b04;
		float: left;
		vertical-align: top;
		}
		#header-nav-1
			{
			width: 100%;
			height:auto;
			background-color:#7c4b04;
			float: left;
			}
		#header-nav-1a
			{
			width: 100%;
			height:auto;
			background-color:#7c4b04;
			float: left;
			}
		#header-nav-2
			{
			display: none;
			}
		#sign-in-out
			{
			float: right;
			vertical-align:top;
			}
			
			
	/*  end of header-nav containeers  */
/*  end of header containeers  */

/*		start of main body content section  */
#message_area {
	width: 100%;
	margin: auto;
	height: auto;
	clear: both;
	background-color:#e8deb7;
}


/*		start of main body content section  */
#main-body {
	width: 100%;
	background-color:#FFF;
	/*	height: 100%;
		clear: both;		
	background-color:#FFF;
	border: medium;
	border-style:dashed;	*/
}
#main-body-top {
	width: 100%;
	background-color:#FFF;
	/*	height: 100%;
		clear: both;		
	background-color:#FFF;
	border: medium;
	border-style:dashed;		*/
}
	#main-body-special-1 {
		float: none;
		background-color:#FFF;
		height: auto;
	}
	#main-body-special-2 {
		float: none;
		background-color:#FFF;
		height: auto;
	}
	#main-body-special-3 {
		float: none;
		background-color:#FFF;
		height: auto;
		display: none;
	}
	
	
	#disp-pic {
		background-color:#FFF;
		width: 100%;
		height:auto;
	}
	#disp-pic-1 {
		float: left;
		width:25%;
		background-color:#FFF;
		padding-left:10px;
	}
	#disp-pic-2 {
		float: right;
		width:70%;
		background-color:#FFF;
	}
		
/*		end of main body content section  */
/*  start of help text containers that will NOT be displayed under 600 px wide		*/
.help_display
	{
	}
/*  end of help text containers that will NOT be displayed under 600 px wide		*/
/*		start of footer section  */

#footer {
	width: 100%;
	clear: both;
	height: auto;
	background-color:#de7f23;
	}
	#footer-links {
		width: 100%;
		font-size:12px;
	}
	#footer-text {
		width: 100%;
	}
	#footer-logos-big {
		width: 100%;
	}
	#footer-logos-small {
		width: 100%;
		display: none;
	}

/*
Flexible Images

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8. 
*/
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/*
Flexible Embedded Videos

To make the embedded videos flexible, use the same trick as mentioned above. For unknown reason, max-width:100% (for embed element) doesn't work in Safari. The work around is to use width:100% instead.
*/
.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

/*
- video-container from: http://avexdesigns.com/responsive-youtube-embed/#sthash.QJYARALo.dpuf
*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*
The CSS for the navigation (desktop view) is pretty straight forward, so I'm not going to get into the details. Note that I specified display:inline-block instead of float:left for the nav <li> element. This allows the menu buttons to be able to align left, center or right by specifying text-align on the <ul> element.
*/


/* nav */
.nav {
	position: relative;
	margin: 20px 0;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	font-family: 'Roboto Condensed', sans-serif;
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #e8deb7;
	font-weight: 300;
	line-height: 100%;
}
.nav a:hover {
	color: #e8deb7;
	text-decoration: underline;
	font-weight: 600;
}
.nav .current a {
	background: #999;
	color: #fff;
	border-radius: 5px;
}


/*
Center and Right Alignment

As mentioned above, you can change the alignment of the buttons by using text-align property.
*/
/* right nav */
.nav.right ul {
	text-align: right;
}

/* center nav */
.nav.center ul {
	text-align: center;
}








/*
Viewport Smaller Than 980px (Fluid Layout)

For viewport narrower than 980px, the following rules will apply:

    pagewrap = reset width to 95%
    content = reset width to 60%
    sidebar = reset width to 30%

Tips: use percentage (%) value to make the containers fluid.
*/

@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;				/*  95%  */
	}

	#main-body-left {
		width: 60%;				/*  60%  */
	}

	#main-body-right {
		width: 35%;			/*  30%  */
	}
	
	#main-body-right-pic {
		width: auto;
	}
#header-right
	{
	display: none;
	}
	
}
/*
Viewport Smaller Than 700px (One-Column Layout)
*/
@media screen and (max-width: 860px) {

#header-text
	{
	display: none;
	}
#header-social
	{
	float: right;
	}
#header-search
	{
	float: left;
	padding-left: 5px;
	}
}
	
/*
Viewport Smaller Than 700px (One-Column Layout)
*/
@media screen and (max-width: 770px) {

#header-logo
	{
	float:none;
	display: none;
	}
#header-text1
	{
	float:none;
	}
#main-body-special-1
	{
	display: none;
	}
#main-body-special-2
	{
	display: none;
	}
#main-body-special-3
	{
	display: block;
	}
#footer-links {
	font-size:14px;
	}
#error-404 {
	width: auto;
	float: none;
}
}





/*
Viewport Smaller Than 650px (One-Column Layout)

Next I have another set of CSS for viewport narrower than 650px:

    header = reset height to auto
    searchform = re-position the searchform to 5px top
    content = reset the width to auto (this will make the container to expand fullwidth) and get rid of the float
    sidebar = reset width to 100% and get rid of the float
*/

@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#header-nav {
		height: auto;
	}

	#main-body-left {
		width: auto;
		float: none;
	}

	#main-body-right {
		width: auto;
		float: none;
	}
	
	.help_display	{		
		display: none;
	}

	#main-body-right-pic {
		display: none;
	}
	
}


/*
On 600px breakpoint, I set the nav element to relative position so I can place the <ul> menu list on top with absolute position. I hide all <li> elements by specifying display:none, but keep the .current <li> displaying as block. Then on the nav hover, I set all <li> back to display:block (this will produce the dropdown list result). I added a check icon graphic on the .current element to indicate it is the active item. For the center and right alignment menu, use left and right property to position the <ul> list. View the demo to see the final result.
*/
@media screen and (max-width: 565px) {
	#header-nav-1a	{
		display: none;
	}
	#header-nav-2	{
		display: block;
	}
	.nav {
		position: relative;
		min-height: 40px;
	}	
	
	.nav {
		position: relative;
		min-height: 40px;
	}	
	.nav ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 3px #de7f23;
		background: #7c4b04 url(/_images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: none; /* hide all <li> items */
		margin: 0;
	}
	.nav .current {
		display: block; /* show only current <li> item */
	}
	.nav a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.nav .current a {
		background: none;
		color: #e8deb7;
		font-weight: 600;
	}

	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		background: url(/_images/icon-check.png) no-repeat 10px 7px;
	}

	/* right nav */
	.nav.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	.nav.center ul {
		left: 50%;
		margin-left: -90px;
	}
	
	.body { 
	font-size:16px;
	line-height:28px;
	}
	
	
}




/*
CSS Media Queries:
The trick for creating an adaptive design is to use CSS to override the layout structure based on the viewport width. 
*/

@media screen and (max-width: 560px) {

	#main-body-left {
		width: auto;
		float: none;
	}

	#disp-pic-1 {
		width: auto;
		float: none;
	}

	#disp-pic-2 {
		width: auto;
		float: none;
	}

	#footer-links {
		font-size:16px;
	}
	#footer-logos-big {
		display: none;
	}
	#footer-logos-small {
		display: block;
	}

#error-404-a {
		display: block;
	}
#error-404-b {
		display:none;
	}
	.body { 
	font-size:16px;
	line-height:28px;
	}
	
	

}

/*
Viewport Smaller Than 480px

The following CSS will apply if the viewport is narrower than 480px which is the width of the iPhone screen in landscape orientation.

    html = disable text size adjustment. By default, iPhone enlarges the text size so it reads more comfortably. You can disable the text size adjustment by adding -webkit-text-size-adjust: none;
    main-nav = reset the font size to 90%
*/
@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;
	}

}