/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box }
	
#navigation	{ font-size: 13px }
	
li.spacer { display: none }

/*MAIN MENU*/
.menu-toggle {
	display:block;
	padding: 4px;
	margin:20px 0 0;
	background:#520601;
	color:#ffffff;
	cursor:pointer;
	text-transform:uppercase;
	font-size:16px;
}
.menu-toggle.toggled-on {
	background: #800000
}
.srt-menu{
	display:none;
}	
.srt-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10;
	padding: 0 0 20px 20px;
	background:#fff;
}

.srt-menu{
	clear:both;
	margin-bottom:0px;
	
}
.srt-menu li a {
	text-align: left;
	background:#fff;
	display:block;
	/* margin:1px 0; */
	margin: 0;
	/* padding: 5px 30px; */
	padding: 5px;
	text-decoration:none;
	color:#800000;
}
.srt-menu li a:hover{
	background:#fff;
	color:#ebcb6f;
}
.srt-menu li li a {
	background:#fff;
	padding-left:40px;
	font-weight: normal;
}
.srt-menu li li li a {
	background:#fff;
	padding-left:80px;
}

/*SECONDARY MENU*/
#secondary-navigation{
	margin-bottom:60px;
}
#secondary-navigation ul{
	margin:0;
	padding:0;
}
#secondary-navigation ul li a{ 
	background:#E6E6E6;
	display:block;
	margin:5px 0; 
	padding:10px;
	text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
	background:#03498f;
	color:#fff;
}

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.rightfloat{
	float:right;
}
.leftfloat{
	float:left;
}

.menu-toggle {/*make menu float right, instead of sitting under the logo*/
	margin-top: 0; /*this depends on the height of the logo*/
	/* clear: both;
	float:left;  
	float: right;*/
	padding: 8px 20px;
}

.menu-toggle:hover { color: #ebcb6f }

.menu-toggle.toggled-on { background: #520601; color: #ebcb6f }

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 760px) {

/* NAVIGATION */
#nav-wrapper { background: #520601; width: 100% }
#nav-container { margin: 0 auto; max-width: 1136px }
#navigation	{ font-size: 13px; float: right; margin-top: 0 }
.spacer { color: #ebcb6f }

/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle {display:none;}
#menu-main-navigation {display:block;}

.srt-menu, .srt-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.srt-menu ul {
	position:		absolute;
	display:none;
	width: auto; /* left offset of submenus need to match (see below) */
}
.srt-menu ul li {
	width:			100%;
	white-space:nowrap;
}
.srt-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
	display: inline-block;
	float: none;
	position:		relative;
	margin-left:1px;
	height: 25px;
}
.menu-toggle .srt-menu li {
	text-align: left;
}
.srt-menu li li {
	margin-left:0px;
	height: auto;
}
.srt-menu a {
	display:		block;
	position:		relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
	display:block;
	left:			0;
	top:			25px; /* match top ul list item height */
	z-index:		99;
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {
	top:			-999em;
}
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
	left:			18.4em; /* match ul width */
	top:			0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
	top:			-999em;
}
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO1 SKIN ***/
#topnav, .srt-menu {
	margin-right: auto;
	margin-left: auto;
}
.srt-menu a {
	text-decoration:none;
}
.srt-menu li:hover { }
.srt-menu li a {
	color: #ffffff;
	background: transparent;
	letter-spacing: 0px;
	margin:0; 
	padding: 10px 10px;
	height: 30px;		/* match .srt-menu li:hover ul top */
}
.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color: #ffffff;
	text-transform: uppercase;
}
.srt-menu li li a {
		/* border-top:		1px solid rgba(255,255,255,.2);
		background:		#333; 
		background:rgba(0,0,0,.6);
		color:	#fff;
		background: #fff\9; 
		background: rgba(255, 255, 255, .6);
		color:	#777; */
	padding-left:20px;
	height:auto;
	background:#ffffff;
	color:	#ffffff;
	font-size: 16px;
	letter-spacing: 0px;
	text-transform: none;
	font-weight: normal;
	padding: 4px 10px;
}
.srt-menu ul li:first-of-type a { padding-top: 6px }
.srt-menu ul li:last-of-type a { padding-bottom: 6px }

.srt-menu li li a:visited { color: #ffffff }
.srt-menu li li li a,
.srt-menu li.current * li a{
	padding-left:20px;
	/* background:rgba(0,0,0,.6); */
	background:#cfd5e3;
}

.srt-menu li:hover > a,
.srt-menu li.current a{ 
	/* color:#ffffff;*/
	background: transparent; 
}
.srt-menu li li:hover > a,
.srt-menu li li.current a { color:#ebcb6f; background:#ffffff }
.srt-menu li li li:hover > a{ color:#ebcb6f; background:#ffffff }

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {

} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

  
}