/* @media queries override other styles */

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
	{
	#controls {position: absolute; top: 0; left: 0; height: 100%;}
    #content { background-color: #fff;}
	}

 /* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px)
	{
	#controls {position: absolute; top: 0; left: 0; height: 600px;}
    #content { background-color: #fff;}
    }

/*** ESSENTIAL STYLES ***/

 	.sf-menu, .sf-menu * {
 		margin: 0;
 		padding: 0;
 		list-style: none;
 	}

 	.sf-menu {
 		line-height: 1.0;
 	}

 	.sf-menu ul {
 		position: absolute;
 		top: -999em;
 		width: 140px;
 		margin: 4px 0 0 0;
 		-moz-box-shadow: 2px 2px 5px #888;
 		-webkit-box-shadow: 2px 2px 5px #888;
 		box-shadow: 2px 2px 5px 0 #888888;
 	}

 	.sf-menu ul li {
 		width: 140px;
 	}

 	.sf-menu li:hover {
 		visibility: inherit;
 		/* fixes IE7 'sticky bug' */
 	}

 	.sf-menu li {
 		float: left;
 		position: relative;
 	}

 	.sf-menu a {
 		display: block;
 		position: relative;
 	}

 	.sf-menu li:hover ul,
 	.sf-menu li.sfHover ul {
 		left: 0;
 		top: 2.5em;
 		/* match top ul list item height */
 		z-index: 99;
 	}

 	ul.sf-menu li:hover li ul,
 	ul.sf-menu li.sfHover li ul {
 		top: -999em;
 	}

 	ul.sf-menu li li:hover ul,
 	ul.sf-menu li li.sfHover ul {
 		left: 140px;
 		/* match ul width */
 		top: 0;
 	}

 	ul.sf-menu li li:hover li ul,
 	ul.sf-menu li li.sfHover li ul {
 		top: -999em;
 	}

 	ul.sf-menu li li li:hover ul,
 	ul.sf-menu li li li.sfHover ul {
 		left: 140px;
 		/* match ul width */
 		top: 0;
 	}

 	/*** DEMO SKIN ***/
 	.sf-menu {
 		float: left;
 		margin-bottom: 1em;
 	}

 	.sf-menu a {
 		margin: 0 0 0 0;
 		border-bottom: 1px #cc9900 solid;
 		padding: 8px 0 8px 0;
 		text-decoration: none;
 	}

 	.sf-menu a, .sf-menu a:visited {
 		/* visited pseudo selector so IE6 applies text colour*/
 		color: #700;
 	}

 	.sf-menu li {
 		background: none;
 	}

 	.sf-menu li li {
 		text-align: left;
 		background-color: #f6f2e2;
 		text-indent: 10px;
 		line-height: 12px;
 		font-size: 13px;
 		width: 100%;

 		/*-moz-box-shadow: 2px 2px 5px #888;
 		-webkit-box-shadow: 2px 2px 5px #888;
 		box-shadow: 2px 2px 5px 0 #888888;*/

 	}

 	.sf-menu li li a {
 		padding: 5px 0 5px 0;
 	}

 	.sf-menu li li a:hover {
 		background-color: #700;
 		color: #fff;
 	}

 	.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
 		color: #000000;
 		text-decoration: none;
 		outline: 0;
 	}

 	.sf-menu li.sfHover, .sf-menu li:hover


 		color: #000000;
 		text-decoration: underline;
 		outline:		0;
 		background: #f0f;
 	}




 	/*** shadows for all but IE6 ***/
 	.sf-shadow ul {
 		background: url('../images/shadow.png') no-repeat bottom right;
 		padding: 0 8px 9px 0;
 		-moz-border-radius-bottomleft: 17px;
 		-moz-border-radius-topright: 17px;
 		-webkit-border-top-right-radius: 17px;
 		-webkit-border-bottom-left-radius: 17px;
 	}

 	.sf-shadow ul.sf-shadow-off {
 		background: transparent;
 	}

 	/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
 	.sf-vertical, .sf-vertical li {
 		width: 140px;
 		text-align: right;
 	}

 	/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
 	.sf-vertical li:hover ul,
 	.sf-vertical li.sfHover ul {
 		left: 140px;
 		/* match ul width */
 		top: 0;
 	}