/* 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 { background: url(../images/page.png) 0 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.3);
	border-bottom: 1px solid rgba(0,0,0,0.7);
	background: #646464;
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, #727272),
					color-stop(100%, #555555)
				);
	-webkit-box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.2),
		0 0 10px rgba(0,0,0,0.6);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.2),
		0 0 10px rgba(0,0,0,0.6);
}

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

.m-buttons {
	background: rgba(10,10,10,0.4);
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, rgba(15,15,15,0.4)),
					color-stop(100%, rgba(0,0,0,0.4))
				);
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.m-buttons > div {
	background: #6e6e6e;
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, #838383),
					color-stop(100%, #575757)
				);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

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

/* special toolbars */
#m-menu, #m-login, #m-search {
	border-bottom: 1px solid rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
	box-shadow: 0 0 10px rgba(0,0,0,0.6);
	color: rgba(255,255,255,0.8);
}

.m-content {
	background: #3c3c3c;
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, #494949),
					color-stop(100%, #353535)
				);
}

/* menu */
#m-navigation ul {
	border-bottom: 1px solid rgba(0,0,0,0.6);
	background: #3c3c3c;
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, #494949),
					color-stop(100%, #353535)
				);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
	box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

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

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

#m-navigation .button {
	border: 1px solid rgba(0,0,0,0.8);
	background: rgba(0,0,0,0.2);
	-webkit-box-shadow:
		0 1px 0 rgba(255,255,255,0.1),
		inset 0 2px 1px rgba(0,0,0,0.3),
		inset 0 0 6px rgba(0,0,0,0.4);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.1),
		inset 0 2px 1px rgba(0,0,0,0.3),
		inset 0 0 6px rgba(0,0,0,0.4);
	color: rgba(255,255,255,0.8);
	text-shadow: 0 -1px 1px rgba(0,0,0,1.0);
}

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

#m-top .module,
.noblog #m-content,
#page.isblog #system .item,
#m-bottom .module {
	background: rgba(70,70,70,0.8);
	-webkit-box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.06),
		0 1px 2px rgba(0,0,0,0.6),
		0 0 10px rgba(0,0,0,0.4);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.06),
		0 1px 2px rgba(0,0,0,0.6),
		0 0 10px rgba(0,0,0,0.4);
}

#m-desktop {
	border: none;
	background: #3c3c3c;
	background: -webkit-gradient( 
					linear,
					50% 0%,
					50% 100%,
					color-stop(0%, #494949),
					color-stop(100%, #353535)
				);
	-webkit-box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.06),
		0 1px 2px rgba(0,0,0,0.6),
		0 0 10px rgba(0,0,0,0.4);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.06),
		0 1px 2px rgba(0,0,0,0.6),
		0 0 10px rgba(0,0,0,0.4);
	color: rgba(255,255,255,0.6);
	text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}