/* v1: Mobile menus kick in at mobile breakpoint 
- NB SECOND SECTION IS SHARED with v2, which just has different @media break points 
*/

@media screen and (max-width: 1000px) { /* Sub-desktop */

	/*********************** START Styles SHARED with v1-with-subnav *************************/

	#leaderboard {
		width: 100%;
	}
	#leaderboard-ad {
		position: relative;
	}	
	#leaderboard-ad .adunit-leaderboard {
		float: none;
		padding-left: 0;
		padding-right: 0;
		margin-left: auto;
		margin-right: auto;
		background: transparent none;
		position: relative;
		width: 728px;
		height: auto;
	}
	.adunit-leaderboard img,
	.adunit-leaderboard noscript > embed,
	.adunit-leaderboard > embed,
	.adunit-leaderboard noscript > object,
	.adunit-leaderboard > object {
		max-width: 100%;
		height: auto;
	}
	body #constrain-header div.wrapper ul.user-services {
		right:0;
		margin-bottom: 0;
		width:auto;
	}
	body #leaderboard  ul.user-services {
		position: absolute;
		bottom: -27px;
	}
	body #leaderboard ul.user-services li {
		float: left;
		background: transparent;
		border: 0 none;
	}
	body #leaderboard ul.user-services li a,
	body #leaderboard ul.user-services li a:visited {
		color: #fff;
	}
	body #leaderboard ul.user-services li a {
		display: block;
		padding: 0 10px;
	}
	body #constrain-header div.wrapper ul.user-services li a {
		background: url(/view/images/bg_register_list.png) no-repeat 0 100%;
	}
	body #constrain-header div.wrapper ul.user-services li a:hover {
		background: url(/view/images/bg_register_list_hover.png) no-repeat 0 100%;
	}
	body #header .logon {
		top: 20px;
	}
	
	#constrain-header div div p.access a.show span i,
	#constrain-header div div p.access a.no-touch:hover span i,
	#constrain-header div div p.access a span {
		display:none;
	}
	#constrain-header div div p.access a span i,
	#constrain-header div div p.access a.show span,
	#constrain-header div div p.access a span:first-child,
	#constrain-header div div p.access a.no-touch:hover span {
		display:inline;
	}
}

@media	screen and (max-width : 520px),
		screen and (-webkit-min-device-pixel-ratio : 1.3) and (max-width : 640px) and (orientation : landscape),
		screen and (-webkit-min-device-pixel-ratio : 1.3) and (max-width : 480px) and (orientation : portrait),
		screen and (-o-min-device-pixel-ratio: 13/10) and (max-width : 640px) and (orientation : landscape),
		screen and (-o-min-device-pixel-ratio: 13/10) and (max-width : 480px) and (orientation : portrait),
		screen and (min-resolution: 1.3dppx) and (max-width : 640px) and (orientation : landscape),
		screen and (min-resolution: 1.3dppx) and (max-width : 480px) and (orientation : portrait) {
			
	/*********************** START Styles SHARED v1/v2 *************************/
	
	body #header .logon {
		width: 75%;
	}
	.leaderboard {
		padding: 0;
	}
	#foreword p.access span,
	body #header div.logon p span {
		background: transparent;
	}
	#foreword p.access,
	#constrain-header div.wrapper div.logon p.access {
		max-width: 50%;
		max-height: 44px;
		overflow: hidden;
		margin: 0 10px 0 0;
		padding: 5px 0 0 0;
	}
	#foreword p.compact a.show,
	#foreword p.compact a:hover,
	#header div.logon p.compact a.show,
	#header div.logon p.compact a:hover {
		width: 240px;
	}
	#constrain-header div.wrapper div.logon p.access,
	#foreword p.compact {
		overflow:visible;
	}

	/*
	****
	* JS Navigation
	* Everything for the js enabled navigation
	****
	*/
	#js-menu {
		display: block;
		border: solid #fff;
		border-width: 1px 0 0 0;
	}
	
	#js-menu a {
		background: url(/view/images/stack.png) 9px 50% no-repeat #069;
		color: #fff;
	}
	
	#js-menu a:hover {
		background: url(/view/images/stack-inv.png) 9px 50% no-repeat #fff;
		color: #069;
	}
	
	#js-menu a span {
		display: block;
		padding: 6px 0 6px 25px;
	}

	#js-menu a {
		z-index: 101;
		left: 0;
		display: inline-block;
		clear: none;
		font-size: 100%;
		margin: 0;
		padding: 0 10px;
		font-weight: bold;
	}
	
	body #header {
		height: auto;
		min-height: 0;
	}
	
	#header #main-navigation {
		display: none;
	}
	
	#responsive-menu {
		position: relative;
		background-color: #ececec;
	}
	
	#responsive-menu.empty {
		height: 1.6em;
		padding: 6px 0;
	}
	
	#responsive-menu:target #main-navigation {
		display: block;
	}
	#responsive-menu:target #js-menu a.menu-down {
		display: inline-block;
	}
	
	#responsive-menu #js-menu a.menu-down,
	#responsive-menu:target #js-menu a.menu-up {
		display: none;
	}
	
	body.blackberry #main-navigation {
		display: block;
	}
	
	html.js-enabled body div#responsive-menu.menu-showing ul#main-navigation {
		display: block;
	}
	
	#header #main-navigation li {
		display:block;
		float: none;
		width:auto;
		left: 0;
		padding:0;
		position: static;
	}
	body #header #main-navigation li a,
	body #header #main-navigation li a.active {
		border: 0;
		display: block;
		float:none;
		font-size: 100%;
		padding: 6px 0 6px 8px;
		background: #666;
		border: solid #fff;
		border-width: 1px 0 0 0;
		color: #fff;
		width: auto;
		margin:0;
		font-weight: normal;
	}

	#header #main-navigation li a:hover,
	#header #main-navigation li a:focus {
		text-decoration: none;
	}
	#header #main-navigation li.active a {
		background: #888;
	}

	#header #main-navigation li a:hover,
	#header #main-navigation li a:focus {
		background: #777;
	}

	#header #main-navigation li a:hover span,
	#header #main-navigation li a:active span,
	#header #main-navigation li.active span,
	#header #main-navigation li.active a {
		filter: alpha(opacity=100);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		-moz-opacity: 1;
		-webkit-opacity: 1;
		opacity: 1;
	}
	
	#header #main-navigation {
		background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
		padding: 0;
		position: static;
		width: 100%;
	}
	
	/* 
	****
	* Header Search
	****
	*/
	#constrain-header form.search-form input.txt {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}

	#constrain-header form.search-form button#header-search-submit {
		color: #fff;
		background: #069;
		border: 1px solid #998;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		margin: 0 5px 0 2px;
		padding: 0 4px;
	}
	#constrain-header form.search-form button#header-search-submit:hover {
		color: #069;
		background: #fff;
	}
	#constrain-header form.search-form label span {
		color: #333;
		font-weight: normal;
	}
	
	#constrain-header form.search-form {
		background: transparent;
		padding: 6px 0;
		text-align: right;
		z-index: 103;
	}
	#constrain-header form.search-form fieldset {
		display: inline;
		float: right;
	}
	#constrain-header form.search-form fieldset a {
		background: url(/view/images/arrow_small_right.gif) no-repeat 0 50% transparent;
		padding: 0 0 0 12px;
		color: #333;
		text-decoration: none;
	}
	#constrain-header form.search-form a:hover {
		text-decoration: underline;
	}

	#constrain-header form.search-form input.txt {
		border: 1px solid #998;
	}
	
	#constrain-header form.search-form label {
		margin-right: 0;
	}

	/*********************** END Styles SHARED v1/v2 *************************/
	
	#header h1.block-anchor {
		margin:0;
		width:53%;
		top:0;
	}
	#header h1.block-anchor a {
		height: 50px;
	}
	
	#foreword h1.home,
	#constrain-header ul.global-nav li.home a {
		font-size:120%;
		padding: 1px 10px;
		background: none;
	}
	
	#constrain-header ul.breadcrumbs {
		padding-left: 10px;
		padding-right: 10px;
		margin: 10px 0 0;
	}

	ul.global-nav {
		background: #CBCBCB url(/view/images/top-gradient.png) 50% 0 repeat-x;
		background: -webkit-gradient(linear, 0 0, 0 310, from(#202020), to(#CBCBCB));
		background: -webkit-linear-gradient(top, #202020, #CBCBCB 310px);
		background: -moz-linear-gradient(top, #202020, #CBCBCB 310px);
		background: -o-linear-gradient(top, #202020, #CBCBCB 310px);
		background: linear-gradient(to bottom, #202020, #CBCBCB 310px);
		width:100%;
	}

	#constrain-header {
		margin-bottom: 0;
	}

	/* Cant be removed fully as it contains my account links */
	#leaderboard {
		height: 0;
		margin:0;
	}

	body #header.compact div.logon,
	body #header div.logon {
		padding: 0;
		position: absolute;
		top: -30px;
		right: 0;
	}

	#header div.logon p span {
		padding:0;
	}

	#header div.logon p.user-actions {
		clear:none;
		height: 24px;
		margin: 0 5.4em 0 0;
		line-height: inherit;
		padding: 5px 0 0 0;
	}

	body #header .logon p.user-actions span {
		float:right;
		padding:0;
		margin:0;
	}
	#header div.logon p.user-actions a {
		margin-left: 0;
		padding-left: 10px;
		padding-right: 10px;
	}
	body #constrain-header ul.user-services {
		margin: 5px 0 0 0;
		top: -30px;
	}

	body #header div.logon a,
	body #header div.logon a.login,
	body #header div.logon a.logout,
	body #header div.logon a.login:hover,
	body #header div.logon a.logout:hover,
	body #constrain #constrain-header div.wrapper ul.user-services li a,
	body #constrain #constrain-header div.wrapper ul.user-services li a:hover {
		background: url(/view/images/divider-dotted.png) no-repeat 0 50% transparent;
		color: #eee;
		font-weight: normal;
		padding: 0 0.83em;
	}

	body #constrain-header div.logged-in ul.user-services {
		right: 4.8em;
	}
	
	ul.global-nav {
		height: 30px;
	}

	ul.global-nav li.home a {
		background-image:none;
		color:#eee;
		padding:2px 0 5px 5px;
		font-weight: normal;
		line-height: 24px;
	}

	body ul.global-nav li a:hover {
		color:#FFF;
	}

	#header .header-tabs {
		width:100%;
		padding:0;
	}

	#header {
		margin: 0;
	}
	
	#constrain-header .logged-in ul.user-services li.my-account,
	#constrain-header ul.user-services li.register {
		display:block;
	}
	
	#constrain-header ul.user-services,
	#constrain-header #header div.logon a {
		color: #eee;
		font-weight: normal;
		font-size: inherit;
	}
	#constrain-header ul.user-services a:hover,
	#constrain-header #header div.logon a:hover {
		color: #fff;
	}
	#constrain-header ul.user-services {
		position: absolute;
	}
	#constrain-header ul.user-services,
	#constrain-header div.logon p {
		font-size: 93%;
	}
	#constrain-header .logged-in div.logon p {
		margin: 0;
	}
	#constrain-header .logged-in div.logon p.user-actions span:first-child {
		margin: 0;
	}
	#constrain-header .logged-in div.logon p.user-actions span {
		margin: 0 7em 0 0;
	}

	body #constrain-header div.wrapper ul.user-services a {
		font-size: inherit;
	}
	
	.logon .access {
		position:absolute;
		right:0;
		top: 30px;
	}
	
	/* Removed items from header v1 */

	#leaderboard-ad,
	#constrain-header ul.user-services li,
	#constrain-header form.search-form fieldset.search-advanced,
	#constrain-header .logged-in ul.user-services li.register,
	.a-z,
	.browse {
		display:none;
	}

	.smallscreen-remove {
		display: none;
	}
	
	/*********************** END Styles SHARED with v1-with-subnav *************************/

	#constrain-header form.search-form {
		font-size: 100%;
		top: 50px;
	}
	
}