/****************************************/
/*										*/
/*										*/
/*   Styles for "ShortiThemes.com"      */
/*										*/
/*										*/
/****************************************/



/*****************/
/* =   Reset   = */
/*****************/

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var,
	b, u, i, center, dl, dt, dd, ol, ul, li, label, legend, table, caption { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
	body { line-height: 1; }
	ol, ul, li { list-style: none; }
	blockquote, q { quotes: none; }
	blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
	:focus { outline: 0; }
	ins, a { text-decoration: none; }
	a, input[type=submit], button[type=submit] { cursor: pointer; }
	del { text-decoration: line-through; }
	table { border-collapse: collapse; border-spacing: 0; }
	
	

/****************/
/* =   Main   = */
/****************/

	* { margin: 0; }
	html, body { height: 100%; }
	
	body {
		background: url(images/bg.jpg) top center repeat;
	}
	
	body, textarea, input {
		font-family: "Droid Serif", Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: normal;
		color: #737373;
	}
	
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
	
	p, div { 
		font-size: 18px;
		color: #fff;
		line-height: 1.7em;
		text-shadow: 1px 1px 2px #702129;
	}
	p { margin-bottom: 30px; }
	a { color: #323232; }
	
	h1, h2, h3, h4, h5, h6 { color: #fff; text-shadow: 1px 1px 2px #702129; font-family: "Cinzel Decorative", serif; font-weight: normal; margin-bottom: 20px; line-height: 1.6em; }
	h1 { font-size: 44px; font-weight: bold; }
	h2 { font-size: 30px; font-weight: bold; }
	h3 { font-size: 20px; font-weight: bold; line-height: 1.4em; }
	h4 { font-size: 16px; }
	h5 { font-size: 12px; }
	h6 { font-size: 10px; }
	
	img { max-width: 100%; }
	
	sup { font-size: 50%; }
	
	.clear {
		clear: both;
		display: block;
		overflow: hidden;
		visibility: hidden;
		width: 0;
		height: 0;
	}
	
	.center { text-align: center; }
	
	.left { text-align: left; float: left; }
	.right { text-align: right; float: right; }
	
	.h_yellow, .h_orange, .h_red, .h_pink, .h_purple, .h_blue, .h_green { padding: 2px 5px; }
	
	.h_orange, .h_red, .h_pink, .h_purple, .h_blue, .h_green { color: #fff; }
	
	.h_yellow { background: #ffff4d; }
	.h_orange { background: #e87e29; }
	.h_red { background: #e82929; }
	.h_pink { background: #ee499a; }
	.h_purple { background: #9749ee; }
	.h_blue { background: #2987e8; }
	.h_green { background: #79c516; }
	
	button::-moz-focus-inner { padding:0; border:0 }
	button { padding: 0; border: none; background: none; }
	
	.full { width: 100%; clear: both; margin-bottom: 25px; overflow: hidden; }
	.one_half, .one_third, .two_thirds, .one_fourth, .one_fifth, .two_fifths, .three_fifths, .four_fifths, .one_sixth { color: #676d71; float: left; position: relative; margin-right: 4%; margin-bottom: 25px; }
	.one_half { width: 48%; }
	.one_third { width: 30.66%; }
	.two_thirds { width: 65.1%; }
	.one_fourth { width: 22%; }
	.one_fifth { width: 16.8%; }
	.two_fifths { width: 37.2%; }
	.three_fifths { width: 54.8%; }
	.four_fifths { width: 78.8%; }
	.column_last { margin-right: 0 !important; clear: right; }
	
	.inner { max-width: 920px; padding: 0 30px; margin: 0 auto; }
	
	#overlay {
		width: 100%;
		height: 100%;
		display: none;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		background: #000;
	}
	
	/* Button */
	
		.btn {
			height: 55px;
			padding: 0 11px 0 0;
			float: left;
			background: url(images/btn_right.png) top right no-repeat;
		}
		
		.btn span {
			font-family: "Cinzel Decorative", serif;
			font-size: 18px;
			font-weight: bold;
			color: #7f4710;
			text-shadow: 1px 1px 2px #ffd266;
			height: 55px;
			line-height: 58px;
			display: block;
			padding: 0 19px 0 30px;
			background: url(images/btn.png) top left no-repeat;
		}
		
		.btn:hover {
			background-position: bottom right;
		}
		
		.btn:hover span {
			background-position: bottom left;
		}
		
		.light {
			background: url(images/btn_right_l.png) top right no-repeat;
		}
		
		.light span {
			background: url(images/btn_l.png) top left no-repeat;
		}
	
	
/*******************/
/* =   Content   = */
/*******************/

	#wrap {
		/*margin-top: 140px;*/
		background: url(images/light.png) top center no-repeat;
	}

	/* Decorations */
		
		.garland_top {
			height: 165px;
			/*width: 100%;
			z-index: 100000;
			position: fixed;
			top: 0;
			left: 0;*/
			background: url(images/gar_01.png) top center repeat-x;
		}

	/* Header */
	
		#header {
		overflow: hidden;
		}
		
		#header #logo {
			width: 325px;
			height: 144px;
			display: block;
			margin: -24px auto 10px auto;
			background: url(images/logo.png) top left no-repeat;
		}
		
		#header #logo .screen-reader-text,
		#header #slogan {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		#header #tag {
			height: 57px;
			font-family: "Playfair Display SC", serif;
			font-size: 24px;
			text-align: center;
			padding-top: 15px;
			margin-bottom: 40px;
			background: url(images/tag.png) top center no-repeat;
		}
		
	/* Featured */
	
		#feat {
			overflow: hidden;
		}
		
		#feat .left {
			float: left;
			padding-top: 30px;
			margin-right: 4%;
		}
		
		#feat .left .grab {
			width: 170px;
			height: 108px;
			display: block;
			float: left;
			background: url(images/grab.png) top left no-repeat;
		}
		
		#feat .left .price {
			float: left;
			padding-top: 8px;
			margin-left: 25px;
		}
		
		#feat .left .original {
			float: left;
			padding-top: 15px;
			margin-left: 25px;
		}
		
		#feat .left .original p {
			color: #920d15;
			text-decoration: line-through;
			text-shadow: 1px 1px 1px #e56e73;
		}
		
		#feat .right {
			float: right;
		}
		
	/* Deals */
	
		#deals {
			width: 100%;
			clear: both;
			margin-bottom: 60px;
			overflow: hidden;
		}
		
		#deals ul {
			width: 100%;
		}
		
		#deals ul li {
			width: 204px;
			height: 154px;
			float: left;
			margin: 0 18px;
			position: relative;
			background: url(images/deal.png) top left no-repeat;
		}
		
		#deals ul li a {
			width: 180px;
			height: 130px;
			margin: 11px 12px 0 12px;
			display: block;
			position: relative;
		}
		
		#deals ul li a .caption {
			color: #fff;
			display: none;
			width: 180px;
			height: 110px;
			position: absolute;
			top: 0;
			left: 0;
			padding-top: 20px;
			background: #fff;
			z-index: 9999;
		}
		
		#deals .price h2 {
			color: #3c6231;
		}
		
		#deals .price p {
			color: #c92f37;
			text-decoration: line-through;
		}
		
		#deals .price h2,
		#deals .price p {
			text-shadow: none;
			text-align: center;
			margin-bottom: 0;
		}
		
		.box {
			width: 500px;
			display: none;
			position: fixed;
			top: 50px;
			bottom: 50px;
			left: 50%;
			padding: 50px;
			margin-left: -300px;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.36);
			-moz-box-shadow:    0px 1px 3px rgba(0, 0, 0, 0.36);
			box-shadow:         0px 1px 3px rgba(0, 0, 0, 0.36);
			background: #fff;
			overflow: auto;
			z-index: 10001;
		}
		
		.box .price {
			margin: 15px 0;
		}
		
		.box .price p,
		.box .price h2 {
			text-align: left !important;
		}
		
		.box .two_thirds h2,
		.box .two_thirds p {
			color: #4d4d4d;
			text-shadow: none;
		}
		
		.box .two_thirds p {
			color: #7a7a7a;
		}
		
		.box .two_thirds .note {
			font-size: 12px;
			font-style: italic;
		}
		
		
		
	/* Info */
	
		#info form #email {
			font-size: 18px;
			color: #444;
			line-height: 1.7em;
			width: 244px;
			height: 57px;
			float: left;
			padding: 0 15px;
			margin-right: 8px;
			border: none;
			outline: none;
			background: url(images/input.png) top left no-repeat;
		}
		
		#info #send_message {
			color: #fff;
			text-transform: uppercase;
		}
		
		#info form .error {
			color: #fff;
			height: 36px;
			line-height: 36px;
			font-size: 12px;
			padding: 0 15px;
			position: absolute;
			left: 0;
			bottom: -40px;
			display: none;
			z-index: 1;
			border-top-right-radius: 3px;
			-moz-border-top-right-radius: 3px;
			-webkit-border-top-right-radius: 3px;
		}
			
	/* Footer */
	
		#footer {
			width: 100%;
			height: 250px;
			clear: both;
			background: url(images/gar_02.png) bottom center repeat-x;
		}
		
		#footer .payment {
			width: 290px;
			height: 31px;
			margin: 0 auto;
			display: block;
		}
		
		#footer .copy {
			color: #920d15;
			text-shadow: 1px 1px 1px #e56e73;
			text-align: center;
			font-size: 10px;
			margin-bottom: 10px;
		}
		
		
		
/**********************/
/* =   Responsive   = */
/**********************/


@media only screen and (max-width : 500px) {

	.inner {
		margin: 0 auto 20px auto;
	}
	
	#header #tag {
		padding-top: 0;
		margin-bottom: 80px;
		background: none !important;
	}

}
		
@media only screen and (max-width : 720px) {
	
	.one_half, .one_third, .two_thirds, .one_fourth, .one_fifth, .two_fifths, .three_fifths, .four_fifths, .one_sixth {
		width: 100%;
		margin: 0 0 70px 0;
		clear: both;
	}
	
	#feat .one_half {
		width: 100%;
		margin: 0;
		float: left;
	}
	
	.box {
		width: 350px;
		margin-left: -225px;
	}
	
	.box .one_third img {
		max-width: 48%;
		float: left;
	}
	
	.box .one_third .price {
		width: 48%;
		float: right;
	}
			
}



@media only screen and (max-width : 920px) {
	
		#header #tag {
			height: 97px;
			background: url(images/tag_long.png) top center no-repeat;
		}
	
}



/* Начало стилей меню */
#menu{
width:100%;
margin:0;
padding:0;
}

#menu ul{
list-style:none;
}

#menu li{
list-style:none;
display:block;
float:left;
}

#menu li a{
font-family:sans-serif;
display:block;
float:left;
height:50px;
color:#F4F4F4;
font-size:18px;
font-weight:bold;
background:url(/images/menu_left.png) no-repeat left;
line-height:49px;
padding:0 0 0 20px;
text-decoration:none;
}

#menu li a span{
display:block;
float:left;
background:url(/images/menu_right.png) no-repeat right;
height:50px;
color:#F4F4F4;
line-height:49px;
padding:0 20px 0 0;
}

#menu li a:hover{
display:block;
float:left;
background:url(/images/menu_left_h.png) no-repeat left;
height:50px;
}

#menu li a:hover span{
display:block;
float:left;
background:url(/images/menu_right_h.png) no-repeat right;
color:#fff;
height:50px;
}
/* Конец стилей меню */
