/*   
*   ANSONICA  Template
*   
*   Author:  macoDesign
*   Date:    18 Janury 2011
*   Web:     http://www.macoDesign.com
*   Email:   macod@macodesign.com
*   Version: 1.0
* 
----------------------------------------------*/

/*		0. 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,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
ins{text-decoration:none;}
del{text-decoration:line-through;}

.hide {display:none;}
.top {padding-top:5px;}

.clear {clear:both;}
.clearfix {display:block;}
.clearfix:after, .portfolio_three_column:after {content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}	
* html .clearfix, * html #menu {height:1%;}
html[xmlns] .clearfix, html[xmlns] #menu {display:block;}

/*		1. CORE STYLES  -----------------------*/

body {
	background:url(../images/bg2.jpg) repeat-x;
	color:#333;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height: 25px;}

#bg {background:url(../images/bg_transparent.png) no-repeat center top;}

a, .black:hover {color:#ff3333;}
a:hover {color:#000;}
.black {color:#333; text-decoration:none;}

h1, h2, h3 {
	color:#2b2b2b;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-shadow: #cccccc 0 -1px 0;
	padding:0 0 10px 10px;}

h1 {font-size:24px; border-bottom:#eeeeee 1px solid; margin:0 0 9px 0;}
h2 {font-size:20px;}
h3 {font-size:18px; border-bottom:#d4d2cf 1px solid; margin:0 0 9px 0;}

/*		2. CORE ELEMENTS  ----------------------*/
		
#wrapper {
	background:#fff;
	margin:0 auto 20px auto;
	width:980px;}

#header {
	background:url(../images/line_under_logo2.gif) repeat-x left bottom;
	clear:both;
	float:left;
	height:135px;
	padding:0 0px;
	width:980px;}

#header.home {background:url(../images/bk_slogan.jpg) repeat-x left bottom;}

#header a.logo {
	background:url(../images/logo_optionview4.png) no-repeat top left;
	float:left;
	height:135px;
	margin-top:0px;
	overflow:hidden;
	position:absolute;
	width:698px;}
	
#content {
	background:url(../images/center_shadow_big.jpg) repeat-y left top;
	border:1px #d4d4d4 solid;
	border-top:0;
	float:left;}

#contentl {
	overflow:hidden;
	float:left; 
	padding:30px;
	width:669px;}

#contentl.padding_bottom {padding-bottom:0px;}

#contentr {
	float:left;
	padding:30px;
	width:189px;}

#contentc {
	border:1px #d4d4d4 solid;
	border-top:0;
	float:left; 
	padding:30px;
	position:relative;
	width:918px;}

/*		2.1 Colums  ----------------------------*/

.two_column, .three_column, .portfolio_three_column {
	clear:both;
	overflow:hidden;
	width:670px;}

.two_column .each, .three_column .each, .portfolio_three_column .each {
	float:left;
	margin:0 30px 0 0;
	width:320px;}

.three_column .each {width:200px;}
.portfolio_three_column {width:918px;}
.portfolio_three_column .each{width:286px;}

.two_column .last, .three_column .last, .portfolio_three_column .last {margin:0;}

.service {
	background-repeat:no-repeat;
	float:right;
	margin:0 0 10px 10px;
	width:48px;}

.service1 {background:url(../images/pic/service1.jpg);	height:48px;}
.service2 {background:url(../images/pic/service2.jpg);	height:44px;}
.service3 {background:url(../images/pic/service3.jpg);	height:39px;}


/*		3. MENU  -------------------------------*/

#menu {
	background:url(../images/menu2.jpg) no-repeat;
	clear:both;
	width:980px;}
	
#menu li {
	float:left;
	list-style:none;
	position:relative;
	z-index:100;}

#menu a {
	border-right:1px #182983 dashed;
	color:#fff;
	display:block;
	height:32px;
	font-weight:bold;
	padding:10px 40px 0 40px;
	text-align:center;
	text-decoration:none;
	text-shadow:0 1px 1px #666;}
		
#menu li .middle {border-right:1px #182983  dashed;}
#menu li .last {border:0;}

#menu li a:hover, #menu li .active {
	background:url(../images/menu_hover.gif) no-repeat center bottom;
	text-shadow:0 1px 1px #000;}
	
#menu ul li:hover a, #menu li:hover li a {
	color:#000;
	background:url(../images/menu-arow2.gif) no-repeat 177px;
	border-right:0;
	height:28px;
	padding-top:7px;}
	
#menu ul a:hover {
	background:#e50202 url(../images/menu-arow3.gif) no-repeat !important;
	border-bottom:solid 1px #8d0101;
	color:#fff !important;}

#menu li:hover > ul {display:block;}

#menu ul {
	background:#fff;
	border:solid 1px #e0e0e0;
	border-width:0 1px 1px 1px;
	display:none;
	left:0;
	position:absolute;
	top:42px;
	width:197px;}

#menu ul a {
	border-bottom:solid 1px #e0e0e0;
	color:#2b2b2b;
	padding:0 0 0 20px;
	text-align:left;
	text-shadow:0 1px 0 #fff;
	width:177px;}

#menu ul ul {
	border-width:1px;
	left:197px;
	top:-1px;}

#menu:after {
	clear:both;
	content:".";
	display:block;
	height:0;
	line-height:0;
	visibility:hidden;}


/*		4. SLIDER  -----------------------------*/

#slider-pic {
	float:left;
	height:350px;
	width:730px;}

.menu-slider {
	float:left;
	overflow:hidden;
	width:250px;}

.menu-slider li {
	display:block;
	float:left;}

.menu-slider li a {
	background:url(../images/slider_bg.jpg) no-repeat;
	color:#ff1302;
	display:block;
	font-weight:bold;
	float:left;
	height:55px;
	line-height:15px;
	padding:15px 0 0 20px;
	text-decoration:none;
	width:250px;}

.menu-slider li a:hover, .menu-slider li.active a, .menu-slider a.active {
	background:url(../images/slider_bg_active.jpg) no-repeat;
	border:1px #fff solid;
	border-width:1px 0 0 0;
	color:#fff;
	padding:14px 0 0 20px;}
	
.menu-slider li.first a {border:none; padding:15px 0 0 20px;}

.slider-small {
	border:1px #fff solid;
	float:left;
	margin-right:10px;
	width: 54px;
	height: 38px;
	}
	
.menu-slider small {
	color:#000;
	display:block;
	font-size:10px;}
	
.main_view, .window, .image_reel img {
	float:left;
	position:relative;}

.window {
	height:350px;
	overflow:hidden;
	width:730px;}

.image_reel {
	left:0;
	position:absolute;
	top:0;}

/*		5. PICTURE SETTINGS  -------------------*/

.left-pic, .right-pic, .central-pic {
	display:block;
	float:left;
	margin:6px 40px 30px 0;
	position:relative;
	width:100%;}

.right-pic {
	float:right;
	margin:5px 10px 60px 10px;}

.central-pic {
	float:left;
	margin:6px 0 25px 0;}

.left-pic a, .right-pic a, .central-pic a, .image, .map {
	background-color:#d4dce0;
	border:#b9c0c4 solid;
	border-width:0 1px 2px 1px;
	padding:4px 4px 0px 4px;
	-o-transition: all 0.3s linear;
	-moz-box-shadow:0px 1px 0px #9fa5aa;
	-webkit-box-shadow:0px 1px 0px #9fa5aa;
	-moz-transition:all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	box-shadow:0px 1px 0px #9fa5aa;}
	
.image{padding:4px;}

.left-pic a.picture, .right-pic a.picture, .central-pic a.picture{
	display:block;
	position:relative;
	overflow:hidden;
	width:100%;}

.left-pic a.picture span.zoom, .right-pic a.picture span.zoom, .central-pic a.picture span.zoom {
	background:#fff url(../images/zoom.png) center center no-repeat;
	display:block;
	left:0px;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0px;
	visibility:hidden;
	width:100%;}

.left-pic a.picture:hover span.zoom, .right-pic a.picture:hover span.zoom, .central-pic a.picture:hover span.zoom {
	filter:alpha(opacity=50);
	-khtml-opacity:0.5;
	-moz-opacity:0.5;
	opacity:0.5;
	visibility:visible;}

.left-pic a:hover, .right-pic a:hover, .central-pic a:hover {
	background-color:#d4dce0;
	border:#b9c0c4 solid;
	border-width:0 1px 2px 1px;
	box-shadow:0px 1px 0px #828a8f;}

.small-pic {height:130px; width:210px;}
.medium-pic {height:150px; width:670px;}
.big-pic {height:196px; width:659px;}
.portfolio-pic {height:170px; width:275px;}
.map {
	border:#d4dce0 4px solid;
	height:182px;
	width:174px;}
	
.big_map {
	height:400px;
	width:600px;}
	
.img_left_float {
	float:left;
	margin:6px 30px 30px 0;}

.img_right_float {
	float:right;
	margin:6px 0 30px 30px;}

/*		6. SOCIAL ICONS  -----------------------*/

ul.social-icons {height:35px; margin:0 0 20px 0;}
.social-icons li, .social-icons li a {
	display:block;
	float:left;
	list-style:none;
	margin:0 21px 0 0;
	height:35px;
	width:31px;}

.social-icons li.last {margin:0;}
.social-icons li span {display:none;}

.rss, .facebook, .twitter, .youtube, .rss a:hover, .facebook a:hover, .twitter a:hover, .youtube a:hover {background:url(../images/social_icons.gif) no-repeat;}
.rss {background-position:0 4px;}
.facebook {background-position:-60px 4px;}
.twitter {background-position:-120px 4px;}
.youtube {background-position:-180px 4px;}

.rss a:hover {background-position:0 0;}
.facebook a:hover {background-position:-60px 0;}
.twitter a:hover {background-position:-120px 0;}
.youtube a:hover {background-position:-180px 0;}

ul.tweets {margin:0 0 10px 0;}

.tweets li {
	border:1px dotted #d4d2cf;
	border-width:0 0 1px 0;
	font-size:11px;
	padding:5px 0;}
	
.tweets li.first {padding:0 0 5px 0;}

.tweets li.last {
	border:0;
	padding:5px 0 0 0;
	text-align:right;}
	
.tweets li span {display:block;}

ul.categories {margin:-9px 0 20px 0;}

.categories li a {
	background:url(../images/category_li.gif) no-repeat 10px center;
	border-bottom:#b9c0c4 1px Solid;
	display:block;
	padding:5px 0 5px 24px;margin:1px 0;}
	
.categories li a:hover, .categories li .active {background:#eaeced url(../images/category_li.gif) no-repeat 10px center;}


/*		7. BLOG  -------------------------------*/

.blog_article {
	clear:both;
	border:1px dotted #d4d2cf;
	border-width:0 0 1px 0;
	overflow:hidden;
	margin:0 0 15px 0;}

.blog_article h2 a {color:#2b2b2b; text-decoration:none;}
.blog_article h2 a:hover {color:#e50202;}

.blog_article p {padding:0;}

.blog_meta p {
	display:inline;
	font-size:10px;}

p.border-left {
	border:#5f5f5f 1px solid;
	border-width:0 0 0 1px;}

p.border-right, a.border-right {
	border:#5f5f5f 1px solid;
	border-width:0 1px 0 0;
	padding:0 5px 0 0;
	margin:0 2px 0 0;}

.blog_meta strong {font-style:italic;}
	
/*		8. COMMENTS  ---------------------------*/

#comments {
	background:#eaeced url(../images/center_shadow_comment.jpg) repeat-y top right;
	margin:10px 0 0 -30px;
	overflow:hidden;
	padding:0 30px 30px 30px;
	width:669px;}

#meta {
	background:url(../images/center_shadow_commenth.jpg) repeat-x;
	height:28px;
	margin:0 0 0 -30px;
	padding:0 30px;
	width:669px;}

.body {
	clear:both;
	padding:30px 0 0 0;}

.comment_picture {
	float:left;
	width:110px;}

.comment_picture p {padding:0;}

.comment_text {
	background-color:#fff;
	border:#d4dce0 1px solid;
	float:left;
	padding:30px;
	width:497px;}
	
#add_comment {
	padding:10px 0 0 0;
	clear:both;}

/*		9. PAGINATION  -------------------------*/

#search button { 
	background:#ff3333 url(../images/gradient.png) repeat-x 0 -35px;
	border:1px solid #ae0101;
	color:#fff;
	cursor:pointer;
	display:block;
	font-weight:bold;
	padding:5px 10px;
	position:relative;
	text-decoration:none;
	text-shadow:0 1px 1px #666;
	-moz-box-shadow:0 1px 0 #333;
	-webkit-box-shadow:0 1px 0 #333;
	box-shadow:0px 1px 0px #333;}

.button, #contact_form button { 
	background:#ff3333 url(../images/gradient.png) repeat-x 0 -35px;
	border:1px solid #ae0101;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	font-weight:bold;
	padding:3px 10px;
	text-decoration:none;
	text-shadow:0 1px 1px #666;
	-moz-box-shadow:0 1px 0 #333;
	-webkit-box-shadow:0 1px 0 #333;
	box-shadow:0px 1px 0px #333;}

.button em {
	background:url(../images/button_arow.gif) no-repeat right center;
	font-style:normal;
	padding-right:10px;}
	
.button:hover em  {background:url(../images/button_arow_hover.gif) no-repeat right center;}
	
a:hover.button, #contact_form button:hover {
	background:#ccc url(../images/gradient.png) repeat-x 0 -45px;
	border:1px solid #9fa5aa;
	color:#000;
	padding:3px 10px;
	text-shadow:0 1px 1px #eee;
	-moz-box-shadow:0 1px 0 #666;
	-webkit-box-shadow:0 1px 0 #666;
	box-shadow:0px 1px 0px #666;}
	
a.comments_link {
	background:url(../images/comment_pic.gif) no-repeat;
	color:#333;
	display:block;
	height:30px;
	padding:2px 0 0 0;
	text-align:center;
	text-decoration:none;
	width:28px;}
	
a:hover.comments_link {background:url(../images/comment_pic.gif) no-repeat bottom; color:#666;}
.entry_meta { overflow:hidden; padding:10px 0 0 0; clear:both; float:right; clear:both;}
.entry_meta li {float:left; background:#3FC;}
#contentl .entry_meta li {background:none; list-style:none;}

.pagination {
	clear:both;
	margin:0 auto;
	position:relative;
	text-align:right;
	text-decoration:none;}

.pagination .active, .pagination a:hover { 
	background:#ef0202 url(../images/gradient.png) repeat-x 0 -35px;
	border:1px solid #ae0101;
	color:#fff;
	cursor:pointer;
	display:inline;
	font-weight:bold;
	padding:3px 12px;
	text-decoration:none;
	text-shadow:0 1px 1px #666;
	-moz-box-shadow:0 1px 0 #333;
	-webkit-box-shadow:0 1px 0 #333;
	box-shadow:0px 1px 0px #333;}
	
.pagination a:hover { 
	background:#d4dce0 url(../images/gradient.png) repeat-x 0 -35px;
	border:1px solid #9fa5aa;
	color:#333;
	text-shadow:0 1px 1px #fff;
	-moz-box-shadow:0 1px 0 #666;
	-webkit-box-shadow:0 1px 0 #666;
	box-shadow:0px 1px 0px #666;}

#contact_form button {
	float:right;
	margin:10px 0 0 0;}

.pagination a { 
	border:1px solid #fff;
	color:#000;
	margin:0 0 0 10px;
	padding:3px 12px;
	text-shadow:none;}

/*		10. Search -----------------------------*/

#search {float:right; margin-top:29px;}

#search button {
	float:left;
	height:30px;
	-moz-box-shadow:0 0 #fff;
	-webkit-box-shadow:0 0 #fff;
	box-shadow:none;
	padding-top:2px;
	width:70px;}

#search input {
	background:#fff url(../images/gradient.png) repeat-x 0 -5px;
	border:1px solid #d3d2d0;
	color:#333;
	border-width:1px 0 1px 1px;
	float:left;
	height:18px;
	padding:5px 10px;
	width:128px;}
	
#search input:focus, #search input:hover {
	border:1px solid #e50202;
	border-width:1px 0 1px 1px;}

#search button:hover {
	background:#ef0202 url(../images/gradient.png) repeat-x 0 -65px;
	border:1px solid #333;}


/*		11. FOOTER  ----------------------------*/

#footer {
	background:url(../images/footer_shadow.jpg) no-repeat center top;
	clear:both;
	font-size:11px;
	margin:0px auto auto auto;
	overflow:auto;
	padding:10px 0 0 0;
	width:980px;}

#footer li {
	display:inline;
	float:left;}

#footer a, #footer a:hover.active {color:#666; text-decoration:none;}
#footer a.active, #footer a:hover {color:#ff3333; text-decoration:underline;}
#footer li span {padding:0px 10px; color:#999;font-size:3px;}
#footer .fr {color:#666;}

/*		12. Contact form -----------------------*/

#contact_form {width:669px;}

#contact_form fieldset {float:left;}
	
#contact_form .pt1 {width:220px;}
#contact_form .pt2 {width:420px; float:right;}
#contact_form .pt3 {width:669px;}

#contact_form fieldset input, #contact_form textarea {
	border:1px solid #d4d2cf;
	color:#373737;
	border-width:1px 0 1px 1px;
	float:left;
	height:18px;
	padding:5px;}

#contact_form fieldset label {
	display:block;
	font-weight:bold;}

#contact_form fieldset input {
	border-width:1px;
	margin-bottom:10px;
	width:208px;}
	
#contact_form input:focus, #contact_form input:hover, #contact_form input.hightlight {
	border:2px solid #b9c0c4;
	height:16px;
	width:206px;}
	
#contact_form input.hightlight {background:#fff url(../images/iconCaution.gif) no-repeat 190px 5px;}
	
#contact_form textarea:focus, #contact_form textarea:hover, #contact_form textarea.hightlight {
	border:2px solid #b9c0c4;
	height:138px;
	width:406px;}
	
#contact_form textarea.hightlight {background:#fff url(../images/iconCaution.gif) no-repeat 390px 5px;}

#contact_form textarea {
	border-width:1px;
	height:140px;
	overflow:hidden;
	width:408px;}
	
.loading {
	background:url(../images/ajax-loader.gif) no-repeat 1px; 
	display:none;
	float:right;
	height:28px; 
	margin:12px 10px 0 0;
	width:28px;}


#product_index	{	float: left; width: 182px; color: #ff3333; background:url(../images/center_shadow_big.jpg) repeat-y left top;
	border:1px #d4d4d4 solid;
	border-top:0;
	float:left; padding: 5px;	}


.box_index_product 
{       height: 250px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		-o-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
		background: #EEEEEE;
		border: 1px solid #CCCCCC;
		
		margin: 5px 10px 10px 0;
		padding: 3px 3px;
}

.title1
{       
	color:#ff3333;
	font-family:"Trebuchet MS", Arial, Tahomal, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 20px;
	padding:5 0 10px 5px;
	margin-bottom: 5px;
}

.title2
{       
	color:#ff3333;
	font-family:"Trebuchet MS", Arial, Tahomal, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 18px;
	padding:5 0 10px 5px;
	border-bottom: 1px solid #d2dcdf; 
	margin-bottom: 5px;
}

.box_index_product_each 
{      
	float: left; width: 120px; padding: 2px; margin-left: 6px;
	webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		height: 160px;
		overflow: hidden;
	
}

.box_index_product_image 
{      
	float: left; width: 105px; padding: 2px; 
	webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		background-color: #FFFFFF;
		
		
}

a.orange_button { background-color: #ff3333; border: 1px solid #de6e00; color: #FFFFFF; font-size: 11px; line-height: 16px; padding: 3px 5px; text-decoration: none; text-transform : none; -moz-border-radius: 3px 3px 3px 3px; }
a.orange_button:hover, a.orange_button:focus { background-color: #333333; text-decoration: none; font-size: 11px; -moz-border-radius: 3px 3px 3px 3px;}
a.orange_button:active { font-size: 11px; background-color:#303030; border: 1px solid #BDBDBD; color: #838383; line-height: 16px; padding: 3px 5px; text-transform : none; -moz-border-radius: 3px 3px 3px 3px; } 
	
a.add_to_cart { padding: 5px; background-color: #FF9900; color: #FFFFFF; text-decoration: none; }
a.add_to_cart:hover { padding: 5px; background-color: #FF6600; color: #FFFFFF; text-decoration: none; }
a.add_to_cart:active { padding: 5px; background-color: #FF6600; color: #FFFFFF; text-decoration: none; }

.cart_btn { padding: 2px; font-size: 14px; color: #ff6600; background-color: #FF9900; color: #FFFFFF; ; border: 1px solid #FF9900; }

.product_label { float: left; font-weight: bold; width: 100px; color: #006699; }
.product_detail { float: left; width: 150px; margin-left: 10px; }

#product_detail_page { }
#product_detail_page ul { margin-left: 40px; }
#product_detail_page ul li { list-style: square; }
#product_detail_page table { border: 1px solid #CCCCCC; }
#product_detail_page table tr { border: 1px solid #CCCCCC; }
#product_detail_page table tr td { border: 1px solid #CCCCCC; padding-left: 5px; }

a.product-link:link, a.product-link:visited, a.product-link:active {
		font-size: 14px;
		color: #053650;
		text-decoration: none; }
	
a.product-link:hover { color: #ff3333; }

.img_product_pix { border: 1px solid #CCCCCC; }

.img_product_list { width: 200px; height: 150px; border: 0px; }

.img_product_home { width: 100px; height: 100px; border: 0px; }

.img_category_home { width: 60px; height: 60px; border: 1px solid #FF3333; }