/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

@import url(../warp/css/mobile.css);

/*
 * Mobile Style Sheet - Styles the template for smart phones
 */

/* Style
----------------------------------------------------------------------------------------------------*/

body#page { background: url(../images/background/plain/page.jpg) 50% 0 repeat; }

#system > h1.title {
	margin: 0 24px;
	font-size: 22px;
}

/* Mobile Toolbar and Menu
----------------------------------------------------------------------------------------------------*/

/* toolbar */
.m-toolbar {
	border-top: 1px solid rgba(0,0,0,0.15);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, #f2f2f2),
					color-stop(100%, #d3d3d3)
				);
	-webkit-box-shadow:
		inset 0 1px 0 rgba(255,255,255,1.0),
		0 1px 0 rgba(255,255,255,0.6);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,1.0),
		0 1px 0 rgba(255,255,255,0.6);
}

.m-toolbar h1 {
	text-shadow: 0 1px 0 rgba(255,255,255,0.6);
	color: #555;
}

.m-buttons {
	background: #ccc;
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, #aaa),
					color-stop(100%, #999)
				);
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
	box-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.m-buttons > div {
	background: #ddd;
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, #ddd),
					color-stop(100%, #bbb)
				);
}

.m-buttons .m-button {
	border-right: 1px solid rgba(0,0,0,0.12);
	border-left: 1px solid rgba(255,255,255,0.3);
}

/* special toolbars */
#m-menu, #m-login, #m-search {
	border-bottom: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	color: #777;
}

.m-content { background: #e6e6e6; }

/* menu */
#m-navigation ul {
	border-bottom: 1px solid #ccc;
	background: #e6e6e6;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#m-navigation ul li {
	border-top: 1px solid rgba(255,255,255,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

#m-navigation li:not([class="goback"]) > a,
#m-navigation li:not([class="goback"]) > span {
	color: #777;
	text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

#m-navigation .button {
	border: none;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: #f7f7f7;
	-webkit-box-shadow:
		inset 0 0 0 1px rgba(255,255,255,1.0),
		0 0 0 1px rgba(0,0,0,0.2),
		0 1px 3px rgba(0,0,0,0.08);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,1.0),
		0 0 0 1px rgba(0,0,0,0.2),
		0 1px 3px rgba(0,0,0,0.08);
	color: #444;
	text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Mobile Content
----------------------------------------------------------------------------------------------------*/

#m-top .module,
.noblog #m-content,
#page.isblog #system .item,
#m-bottom .module {
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: #f7f7f7;
	-webkit-box-shadow:
		inset 0 0 0 1px rgba(255,255,255,1.0),
		0 0 0 1px rgba(0,0,0,0.2),
		0 1px 3px rgba(0,0,0,0.08);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,1.0),
		0 0 0 1px rgba(0,0,0,0.2),
		0 1px 3px rgba(0,0,0,0.08);
}

#m-desktop {
	border: none;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: #f7f7f7;
	-webkit-box-shadow:
		inset 0 0 0 1px rgba(255,255,255,1.0),
		0 0 0 1px rgba(0,0,0,0.2),
		0 1px 3px rgba(0,0,0,0.08);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,1.0),
		0 0 0 1px rgba(0,0,0,0.2),
		0 1px 3px rgba(0,0,0,0.08);
	color: #444;
	text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.m-buttons .m-button { background: url(../images/mobile/icon_menu.png) 50% 50% no-repeat; }
.m-buttons .m-button.m-search { background-image: url(../images/mobile/icon_search.png); }
.m-buttons .m-button.m-login { background-image: url(../images/mobile/icon_login.png); }
.m-buttons .m-button.m-close { background-image: url(../images/mobile/icon_close.png); }
#m-navigation ul li.parent { background: url(../images/mobile/arrow.png) 100% 50% no-repeat; }


/* High Resolution / Retina
----------------------------------------------------------------------------------------------------*/

@media all and (-webkit-min-device-pixel-ratio: 2) {
	
	.m-buttons .m-button {
		background-image: url(../images/mobile/icon_menu@2x.png);
		background-size: 30px 30px;
	}
	
	.m-buttons .m-button.m-search { background-image: url(../images/mobile/icon_search@2x.png); }
	.m-buttons .m-button.m-login { background-image: url(../images/mobile/icon_login@2x.png); }
	.m-buttons .m-button.m-close { background-image: url(../images/mobile/icon_close@2x.png); }
	
	#m-navigation ul li.parent { 
		background-image: url(../images/mobile/arrow@2x.png);
		background-size: 45px 40px;
	}
}