/*--------------------------------------------------*

Name: style.css
Version: 1.7
Last Update: 2011-10-07
Author: Énhonlapom.hu

Chapters:	FONT-FACE
					GLOBAL STYLING
						TEXTS
						LINKS
						LISTS
						BLOCKQUOTES
						IMAGES
						TABLES
						FORM FIELDS
						BUTTTONS
						GLOBAL CLASSES
					SECTION STYLING
						HEADER SECTION
						MAIN CONTENT SECTION
						ASIDE SECTION
						FOOTER SECTION
						NAVIGATION SECTION
							HORIZONTAL NAVIGATION
							VERTICAL NAVIGATION
							PRODUCT NAVIGATION
							PAGINATION

*--------------------------------------------------*/



/*-------------------- $FONT-FACE --------------------*/

@font-face {
	font-family: 'FontName';
		src:url('type/font-name-webfont.eot');
		src:url('type/font-name-webfont.eot?#iefix') format('embedded-opentype'),
        url('type/font-name-webfont.woff') format('woff'),
        url('type/font-name-webfont.ttf') format('truetype'),
        url('type/font-name-webfont.svg#FontName') format('svg');
	font-weight: normal;
	font-style: normal;
}

@import url(http://fonts.googleapis.com/css?family=Font+Name:300,600|Font+Name);

/*-------------------- $GLOBAL STYLING --------------------*/

/*---------- $TEXTS ----------*/

body	{
	line-height: 1.25em;
	font-family: Arial, Verdana, sans-serif;
	font-size: 1em; /* 16px / 16px */
	text-align: justify;
	color: #333;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1em;
	font-family: Arial, Verdana, sans-serif;
	color: #888;
	margin-bottom: 20px;
}
h1 {
	font-size: 2em; /* 32px / 16px */
}
h2 {
	font-size: 1.75em; /* 28px / 16px */
}
h3 {
	font-size: 1.5em; /* 24px / 16px */
}
h4 {
	font-size: 1.25em; /* 20px / 16px */
}
h5, h6 {
	font-size: 1em; /* 16px / 16px */
}
p	{
	margin-bottom: 10px;
}
strong, b {
	font-weight: bold;
}
em, i {
	font-style: italic;
}
small {
	font-size: 0.875em; /* 14px / 16px */
}

/*---------- $LINKS ----------*/

a	{
	color: #666;
	text-decoration: none;
}
a:hover	{
	color: #000;
	text-decoration: underline;
}

/*---------- $LISTS ----------*/

ul, ol {
	margin-bottom: 10px;
	padding: 0 1.25em;
}
li {
	padding: 0;
	margin: 0;
}
li ul, li ol {
	margin-bottom: 0;
}
dl {
	margin-bottom: 10px;
}
dt {
	margin: 5px 0;
	font-weight: bold;
}
dd {
	margin-left: 1.25em;
}

/*---------- $BLOCKQUOTES ----------*/

blockquote  {
	margin: 10px 2%;
	color: #666;
	font-style: italic;
}
blockquote.alignleft, blockquote.alignright {
	width: 33%;
}

/*---------- $DROPCAPS ----------*/

.dropcap {
	display: block;
	float: left;
	margin: 10px 5px 5px 0;
	font-size: 2em;
}

/*---------- $IMAGES ----------*/

img.alignleft {
	margin: 0 2% 10px 0;
}
img.alignright {
	margin: 0 0 10px 2%;
}
img.aligncenter {
	margin: 2% auto;
}
figure {
	margin-bottom: 10px;
}
figcaption {
	clear: both;
	text-align: center;
	font-style: italic;
}

/*---------- $TABLES ----------*/

table	{
	width: 100%;
	margin-bottom: 1em;
}
caption {
	font-weight: bold;
	margin-bottom: 10px;
}
th, td {
	font-weight: normal;
	float: none !important;
	vertical-align: middle;
	padding: 5px 10px;
	border: 1px solid #999;
}
th	{
	font-weight: bold;
	background: #eee;
	color: #666;
}

/*---------- $FORM FIELDS ----------*/

form div {
	margin-bottom: 10px;
}
label {
	margin-bottom: 5px;
	display: block;
	font-weight: bold;
}
.input {
	margin: 0;
	padding: 5px 10px;
	display: block;
	border: none;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: #3D3D3D;
}
.input:focus {
	outline: none;
	border: none;
	background: #555;
	color: #fff;
}
select {
	margin: 5px 0;
	display: block;
}
textarea {
	margin: 0;
	padding: 5px 10px;
	display: block;
	border: none;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: #3D3D3D;
}
textarea:focus {
	outline: none;
	border: none;
	background: #555;
	color: #fff;
}

/*---------- $BUTTONS ----------*/

.button {
	margin: 0;
	padding: 3px 10px;
	display: inline-block;
	cursor: pointer;
	line-height: 20px;
	font-size: 12px;
	text-align: center;
	border: none;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: #555;
	color: #fff;
}
.button:hover {
	text-decoration: none;
	background: #000;
	color: #fff;
}

/*---------- $GLOBAL STYLING CLASSES ----------*/

.prepend {
	padding-left: 2%;
}
.prepend-small {
	padding-left: 1%;
}
.append {
	padding-right: 2%;
}
.append-small {
	padding-right: 1%;
}
.push {
	margin-bottom: 10px;
}
.pull {
	margin-top: -10px;
}
.unformatted {
	margin: 0;
	padding: 0;
	list-style: none;
}
.margin-none {
	margin: 0;
}
.padding-none {
	padding: 0;
}
.border-none {
	border: none;
}
.border {
	border: 5px solid #0000ff;
}
.border:hover {
	border: 5px solid #ff0000;
}

/*-------------------- $SECTION STYLING --------------------*/

html {}
body {}

/*---------- $HEADER SECTION ----------*/

/* Background */

#main-header {}
#inner-header {}
#title hgroup {
	margin-left: 20px;
}

/* Texts */

#main-header h1 {
	margin-bottom: 12px;
}
#main-header h2 {
	font-size: 18px;
}
#main-header p {}
#main-header blockquote {}

/* Links */

#main-header a {}
#main-header a:hover {
	text-decoration: none;
}

/* Lists */

#main-header ul, #main-header ol {}
#main-header li {}

/* Images */

#main-header img {}

/* Form fields */

#main-header label {}
#main-header .input {}
#main-header .input:focus {}
#main-header textarea {}
#main-header textarea:focus {}
#main-header .button {}
#main-header .button:hover {}

/* Logo */

#title a {
	color: #888;
}

/*---------- $MAIN CONTENT SECTION -----------*/

/* Background */

#content {}
#main-content {
	background: #fff;
	border: 1px solid #BBB;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

/* Texts */

#main-content h1, #main-content h2, #main-content h3 {}
#main-content p {}
#main-content blockquote {}

/* Links */

#main-content a {}
#main-content a:hover {}

/* Lists */

#main-content ul, #main-content ol {}
#main-content li {}

/* Images */

#main-content img {}

/* Form fields */

#main-content label {}
#main-content .input {
	width: 320px;
}
#main-content .input:focus {}
#main-content textarea {
	width: 320px;
	height: 200px;
}
#main-content textarea:focus {}
#main-content .button {}
#main-content .button:hover {}

/*---------- $ASIDE SECTION ----------*/

/* Background */

.aside {
	background: #fff;
	border: 1px solid #BBB;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.aside section {
	margin-bottom: 40px;
}
.aside nav {
	margin: -20px -20px 40px -20px;
}
#leftside {}
#rightside {}

/* Texts */

.aside h1, .aside h2, .aside h3 {}
.aside p {}
.aside blockquote {}

/* Links */

.aside a {}
.aside a:hover {}

/* Lists */

.aside ul, .aside ol {}
.aside li {}

/* Images */

.aside img {}

/* Form fields */

.aside label {}
.aside .input {
	width: 180px;
}
.aside .input:focus {}
.aside textarea {
	width: 180px;
}
.aside textarea:focus {}
.aside .button {}
.aside .button:hover {}

/*---------- $FOOTER SECTION ----------*/

/* Background */

#main-footer {
	background: #999;
}
#inner-footer {}

/* Texts */

#main-footer h1, #main-footer h2, #main-footer h3 {}
#main-footer p {}
#main-footer blockquote {}

/* Links */

#main-footer a {}
#main-footer a:hover {}

/* Lists */

#main-footer ul, #main-footer ol {}
#main-footer li {}

/* Images */

#main-footer img {}

/* Form fields */

#main-footer label {}
#main-footer .input {}
#main-footer .input:focus {}
#main-footer textarea {}
#main-footer textarea:focus {}
#main-footer .button {}
#main-footer .button:hover {}

/*---------- NAVIGATION SECTION ----------*/

/* HORIZONTAL NAVIGATION */

/* Level1 */

.h-nav-level1 {
	background: #F2F2F2;
	background: -moz-linear-gradient(top, #F2F2F2 1%, #D4D4D4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#F2F2F2), color-stop(100%,#D4D4D4));
	background: -webkit-linear-gradient(top, #F2F2F2 1%,#D4D4D4 100%);
	background: -o-linear-gradient(top, #F2F2F2 1%,#D4D4D4 100%);
	background: -ms-linear-gradient(top, #F2F2F2 1%,#D4D4D4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2F2F2', endColorstr='#D4D4D4',GradientType=0 );
	background: linear-gradient(top, #F2F2F2 1%,#D4D4D4 100%);
	border: 1px solid #bbb;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}
.h-nav-level1 li a {
	text-decoration: none;
	/*border-left: 1px solid #900; /* Navigation separator */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*background: #000;	/*Background color */
	color: #333;	/* Color */
}
.h-nav-level1 li a:before {
	/*border-left: 1px solid #090; /* Navigation separator */
}
.h-nav-level1 li:first-child a, .h-nav-level1 li:first-child a:before {
	/*border-left: none;*/
}
.h-nav-level1 li a:hover {
	background: #888; /* Hover background */
	color: #fff; /* Hover color */
}
.h-nav-level1 li.active a {
	background: #888;
	color: #fff;
}

/* Level 2 */

.h-nav-level2 {
	background: #000;
	border: 1px solid #666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.h-nav-level2 li a {
	color: #eee;
	text-align: center;
}
.h-nav-level2 li a, .h-nav-level2 li a:before {
	border: none;
}
.h-nav-level2 li a:hover {
	background: none;
	color: #eee;
	text-decoration: underline;
}

/* Level3 */

.h-nav-level3 {
	background: #888;
	border: 1px solid #666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.h-nav-level3 li a {
	color: #eee;
}
.h-nav-level3 li a:hover {
	background: none;
	color: #eee;
	text-decoration: underline;
}

/* VERTICAL NAVIGATION */

/* Level1 */

.v-nav-level1 {
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
}
.v-nav-level1 li a {
	text-decoration: none;
	/*border-top: 1px solid #990000; /* Navigation separator */
	background: none;
	color: #333;
	border-radius: 0;
	border-bottom: 1px solid #bbb;
}
.v-nav-level1 li a:before {
	/*border-top: 1px solid #090; /* Navigation separator */
}
.v-nav-level1 li:first-child a, .v-nav-level1 li:first-child a:before {
	/*border-top: none;*/
	border-radius: 10px 10px 0 0;
}
.v-nav-level1 li a:hover {
	background: #888;
	color: #fff;
}
.v-nav-level1 li.active a {
	background: #888;
	color: #fff;
}

/* Level2 */

.v-nav-level2 {
	background: #888;
	border: 1px solid #666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.v-nav-level2 li a {
	background: none;
	color: #eee;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.v-nav-level2 li a, .v-nav-level2 li a:before {
	border: none;
}
.v-nav-level2 li:first-child a, .v-nav-level2 li:first-child a:before {
	/*border-top: none;*/
	border-radius: 10px 10px 0 0;
}
.v-nav-level2 li:last-child a, .v-nav-level2 li:last-child a:before {
	/*border-top: none;*/
	border-radius: 0 0 10px 10px;
}
.v-nav-level2 li a:hover {
	background: none;
	color: #eee;
	text-decoration: underline;
}

/* Level3 */

.v-nav-level3 {
	background: #888;
	border: 1px solid #666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.v-nav-level3 li a {
	background: none;
	color: #eee;
}
.v-nav-level3 li a:hover {
	background: none;
	color: #eee;
	text-decoration: underline;
}

/* Right navigation */

.v-nav-right {
	text-align: right;
}

/* PRODUCT NAVIGATION */

#product-nav li a {
	background: #3d3d3d;
	color: #fff;
}
#product-nav li:first-child a {
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
}
#product-nav li a:hover {
	text-decoration: none;
	background: #555;
	color: #fff;
}
#product-nav li:first-child ul li a {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
#product-nav li ul li a {
	background: #ccc;
	color: #000;
}
#product-nav li ul li a:hover {
	text-decoration: none;
	background: #aaa;
	color: #000;
}

/* PAGINATION */

.pagination span, .pagination a {
	padding: 5px 10px;
}
.pagination span {}
.pagination a {
	text-decoration: none;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: #3D3D3D;
	color: #fff;
}
.pagination a:hover {
	text-decoration: none;
	background: #555;
	color: #fff;
}
.pagination .current {
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: #900;
	color: #fff;
}
.pagination .pages {}
.pagination .pages {}
.pagination .first {}
.pagination .previous {}
.pagination .next {}
.pagination .last {}
.pagination .dot {}
.pagination .page {}