/********* STRUCTURE *********/

/****************************/



/*

1. GENERAL TYPOGRAPHY:

	1. Reset CSS

	2. Body & html

	3. Headings

	4. Lists styles

	5. Links

	6. Text (paragraphs and colors)

	7. Buttons

	8. Input form



2. GENERAL LAYOUT:

	1. General

	2. Header (including navigation, logo)

	3. Middle

	4. Footer



3. SPECIFIC PAGES OR ELEMENTS:

	1. Box search

	2. Home page

	3. Blog

	4. Portfolio

*/



/************************ 1. GENERAL TYPOGRAPHY ****************************/

/***************************************************************************/



	/* 1. Reset CSS

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



	ul,ol,li,h1,h2,h3,h4,h5,h6,form,p,a,img{ margin: 0; padding: 0; border: 0; }

	ul,li{ list-style-type: none; }



	/* 2. Body & html

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



	body{ margin: 0; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; line-height: 14px; color: #565961; background-color: #fff; }

	html{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; }



	/* 3. Headings

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



	h1,h2,h3,h4,h5,h6{ letter-spacing: 0; padding: 10px 10px 3px 0; font-weight: normal; line-height: 0.2em; color: #DF1423; }



	h1{ height: 26px; font-size: 20px; }

	h2{ height: 24px; font-size: 18px; }

	h3{ height: 22px; font-size: 16px; }

	h4{ height: 18px; font-size: 14px; }

	h5{ height: 16px; font-size: 12px; } 

	h6{ height: 14px; font-size: 11px; }



	/* 4. Lists styles

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



	.categories-inside{ width: 100px; height: 135px; margin: 0 1px 0 0; float: right; line-height: 18px; background: url(../images/dropdown.png) top no-repeat; }

	.categories-inside ul{ width: 84px; padding: 0; margin: 8px 0 8px 8px; float: left; }

	.categories-inside ul li{ display: block; float: left; padding: 0; margin: 0; background:none; }

	.categories-inside ul li a:link, .categories-inside ul li a:visited{ display: block; float: left; padding:2px 0 4px 10px; margin: 0px; width: 66px; color:#f1f1f3; background:none; text-decoration:none; text-shadow: 0px -1px 0px #000;}

	.categories-inside ul li a:hover{ color: #fff; }



	.list-icon{ line-height: 14px; color: #565961; text-shadow: 0px 1px 0px #eeeef1; }

	.list-icon li{ padding: 7px; list-style-type: none; background:none; }

	.list-icon li img{ float: left; margin: 0 7px 0 0; }

	.list-icon li img, .list-icon li span{ vertical-align: middle; }



	/* 5. Links

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



	a:link, a:visited, a:hover{ text-decoration: none; }



	/* 6. Text

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



	.shadow{ text-shadow: 0px 1px 0px #e9e9ed;}

	.text_normal{ padding: 0px 0 15px 0; font-size: 11px; color: #565961; text-shadow: 0px 1px 0px #e9e9ed; }

	.text_center{ text-align: center; }

	.text_form{ width: 60px; float: left; padding: 0; font-size: 11px; line-height: 43px; color: #565961; text-shadow: 0px 1px 0px #e9e9ed; }

	.title_article{ height: 18px; font-size: 14px; letter-spacing: 0; font-weight: normal; line-height: 0.4em; color: #5e636d; }

	.text_article{ padding: 12px 0 2px 0; text-shadow: 0px 1px 0px #e9e9ed; }

	.title_item{ height: 18px; font-size: 14px; letter-spacing: 0; font-weight: normal; line-height: 0.2em; color: #5e636d; }

	.text_item{ padding: 4px 0 4px 0; text-shadow: 0px 1px 0px #e9e9ed; }

	ul,li{ list-style-type: none; }



	/* 7. Buttons

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



	.search{ margin: 9px 20px 0 0; float: right; }

	.butt_black{ margin: 8px 20px 0 20px; }

	.butt_black.right{ float: right; }

	.butt_black.left{ float: left; }

	.buttons{ width: 208px; margin: 0 auto; position: relative; }

	.prev_next{ width: 100%; position: relative; }

	.butt_right{ float: right; position: relative; }

	.button{ font-size: 17px; font-weight: bold; line-height: 34px; display: block; position: relative; padding: 4px; height: 42px; color: #9f9eac; text-shadow: 0 1px 0 #e0e0e3; background-image: url(../images/button_gray.png); }

	a.button{ cursor: pointer; }

	a.button:hover{ color: #4D4D4D; }

	.before, .after{ background-image: url(../images/button_black.png); display: block; position: absolute; top: 0; width: 21px; height: 34px; }

	.button .before{ background: url(../images/before_gray.png) no-repeat; left: -21px; }

	.button .after{ background: url(../images/after_gray.png) no-repeat; right: -21px; }

	.button.search_button{ float: right; margin: 10px 22px 10px 32px; }

	.button.right_top{ float: right; margin: -3px 21px 20px 0; }

	.button.left{ float: left; margin: 12px 0 20px 21px;  }

	.button.right{ float: right; margin: 12px 21px 20px 0;  }

	.button.submit{ float: left; margin: 80px 0 22px 91px; }



	/* 8. Input form

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



	.input{ width: 100%; margin: 0 0 5px 0; }

	.input_text, .contact_form, .text_area{ width: 194px; font-size: 11px; font-family: Arial, Verdana, Helvetica, sans-serif; }

	.input_text, .contact_form{ height: 30px; padding: 0 8px; border: 0; line-height: 30px; color: #9999a4; background: url(../images/input_text.png) center no-repeat; }

	.input_text{ margin: 6px; }

	.contact_form, .text_area{ margin: 5px 0 6px 0; float: right; }

	.text_area{ height: 96px; padding: 8px; border: 0; color: #9999a4; background: url(../images/text_area.png) center no-repeat; }



/************************** 2. GENERAL LAYOUT ******************************/

/***************************************************************************/



	/* 1. General

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



	#content_header, #content_navigation, #content_footer{ width: 300px; margin: 0 auto; }



	/* 2. Header

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



	#top{ width: 100%; height: 54px; background: url(../images/bg_header.png) repeat-x; }

	#navigation{ width: 100%; height: 49px; border-bottom: 1px solid #f1f1f3; background: url(../images/bg_navigation.png) repeat-x; }

	#header{ width: 100%; min-height: 54px; background: url(../images/bg_header_center.png) center no-repeat; }

	#categories-dropdown{ z-index: 100; width: 300px; height: 163px; position: absolute; margin: 0 auto; top: 96px; display: none; }

	.home{ border-bottom: 1px solid #f6f6f7; }

	.page_x{ border-bottom: 1px solid #5e5d63; }

	.phone {font-size:20px; float:right;vertical-align:middle;margin: 18px 20px;color:#fff; font-weight: bold; }



	/* 3. Middle

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



	.box_center{ margin: 0 auto; }

	#page_x{ width: 280px; padding: 20px 0 0 0;}

	.box_center ul,li{ list-style-type: circle; }



	/* 4. Footer

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



	#footer{ clear: left; width: 100%; height: 40px; margin: 24px 0 0 0; border-top: 1px solid #f1f1f3; font-size: 10px; color: #dcdce1; background-color: #DF1423; }

	#footer a{ color: #dcdce1; }

	#footer a:hover{ color: #ffffff; }

	#copyright{ float: left; margin: 12px 0 0  20px;  }

	#back_to_top{ float: right; margin: 11px 20px; }

	#back_to_top img, #back_to_top span{ vertical-align: middle; }



/************************** 3. SPECIFIC PAGES ******************************/

/***************************************************************************/



	/* 1. Box search

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



	#box{ width: 100%; height: 145px; position: absolute; top: -400px; margin: 0 auto; padding: 20px 0 0 0; z-index:999999; text-align: center; background: url(../images/search_box.png) center no-repeat; }



	/* 2. Home

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



	#menu_index{width:100%;padding:25px 0px 0px 0px;text-align:center;font-size:13px; }

	#menu_index ul{list-style:none;padding:0px;margin:0px;display:inline;line-height:25px;}

	#menu_index ul li{list-style:none;display:inline-block;width:85px; height:125px; margin:0px 20px 5px 6px; background:url(../images/icon_bg.png) no-repeat center top;}

	#menu_indexul li a{font-weight:bold; text-decoration:none; text-shadow:1px 1px #dcdcdc;}

	#menu_index a{color:#302f2f;}

	#menu_index a:visited{color:#302f2f;}

	#menu_index ul li a img{padding:0px; width:85px; height:85px;}



	/* 3. Blog

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



	.article{ padding: 6px 0; }

	.articles li{ clear: left; padding: 14px 0 4px 0; }

	.articles li img{ float: left; }

	.articles a:link, .articles a:visited{ color:#565961; font-weight: bold }

	.articles a:hover{ color: #6b6e76; }

	.img_left{ float: left; margin: 0 16px 12px 0; }

	.separator{ width: 100%; height: 2px; clear: left; margin: 8px 0 0 0; background: url(../images/separator.png) left repeat-x; }



	/* 4. Portfolio

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



	.item{ margin: 10px 0; }

	.items li{ clear: left; padding: 6px 0 6px 0; }

	.items li img{ float: left; margin: 6px 16px 16px 6px; }

	.items a:link, .items a:visited{ color:#565961; font-weight: bold }

	.items a:hover{ color: #6b6e76; }

	.more{ margin: 4px 0 4px 0; float: right; }

	.separator_port{ width: 100%; height: 2px; clear: left; margin: 8px 0 4px 0; background: url(../images/separator.png) left repeat-x; }

	.recaptchacss{
		height: 30px;
		padding: 0 8px;
		border: 0;
		line-height: 30px;
		color: #9999a4;
	}