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

   reset.css
   * Resets default browser CSS.

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

html {
  margin:0;
  padding:0;
  border:0;
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {
    display:block;
}

/* Line-height should always be unitless! */
body {
  line-height: 1.5;
  background: white;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
  border-collapse: separate;
  border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
  text-align: left;
  font-weight: normal;
  float:none !important;
}
table, th, td {
  vertical-align: middle;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* Remember to define your own focus styles! */
:focus { outline: 0; }

/*rest finished*/

body {font: 12px/18px  Helvetica, Arial, Verdana, sans-serif}
.clear {clear: both;}
#wrap {margin: 20px  auto 0px;width:950px;}

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 77%;}
#footer {padding: 10px;background: #333;text-align: center;color: #f1f1f1;}

h3{font-size: 1.3em;}
#nav {background: #f4f4f4;padding: 10px;}
#logo {margin: 10px 20px 10px 10px;}
#menu{float: left;width:250px;list-style-type: none;font-family: arial, serif; padding-left: 20px;font-size: 20px;}
#menu li {margin-top:8px;padding-left:30px;padding-top:5px;}
#menu li a {text-decoration: none;background-image:url('/images/menu.png');background-repeat:no-repeat;width:180px;height:30px;display: block;}
#menu .aboutus a {background-position: 0 -89px;}
#menu .products a{background-position: 0 -3px}
#menu .contact a{background-position: 0 -32px;}
#menu .feedback a {background-position: 0 -60px;}

#menu li a:hover{background-color:yellow;}

#content {margin-left:270px;}

#categories_list {list-style-type:none;}
#categories_list li{float: left;width:160px;height: 160px;text-align: center;}
#categories_list li img{width:120px;}
#categories_list li a{text-decoration: none;}

#products_div h3{margin-bottom: 15px;font-weight:bolder;background: #055FFB;padding:8px 8px 8px 15px;color:#f0f0f0}
#products_list {list-style-type:none;clear: both;float: left;}
#products_list li{float:left;width:180px;height:170px;text-align: center;margin-left: 20px;margin-right: 20px;margin-bottom: 10px;border:1px solid silver;}
#products_list li img{max-width:150px;max-height: 150px;}


.pagination_control {margin: 20px;text-align: center;}
.pagination_control a{border: 1px solid #3079ED;
text-decoration: none;
padding:5px 5px 5px 8px;
margin-right: 10px;
color: white;
background: #4D90FE;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
background-image: -ms-linear-gradient(top,#4D90FE,#4787ED);
background-image: -o-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4D90FE,#4787ED);}

.pagination_control .current_page{
border: 1px solid #C079ED;
background: #D14836;
background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#D14836));
background-image: -webkit-linear-gradient(top,#DD4B39,#D14836);
background-image: -moz-linear-gradient(top,#DD4B39,#D14836);
background-image: -ms-linear-gradient(top,#DD4B39,#D14836);
background-image: -o-linear-gradient(top,#DD4B39,#D14836);
background-image: linear-gradient(top,#DD4B39,#D14836);
}

.article h2,#feedback_form h2{ font-size:30px;margin-bottom: 20px;}
.article p {font-size: 18px;line-height: 30px;color: #666;}

#contact_us {font-size:18px;color:#666;line-height:30px;}
#contact_us li{list-style-type: none;}

#feedback_form dl{margin-bottom: 15px;}
#feedback_form .required_tip{color:red;margin:30px 30px 30px 300px;font-size:12px;}
#feedback_form .customer_name input,#feedback_form .company input,#feedback_form .email input{width:500px;height:25px;font-size:18px;}
#feedback_form .content textarea{width:500px;height:100px;font-size:18px;}
#feedback_form .safecode input {width:80px;height:50px;font-size:30px;float: left;}

#feedback_form input:focus,#feedback_form textarea:focus { border: 1px solid #055FFB; }
#feedback_form input.error,#feedback_form textarea.error { border: 1px solid red; }
#feedback_form label.error {color:red;}

#return_message {list-style-type: none;}
#return_message .error {background: red; padding: 5px 0px 5px 10px;color:#f1f1f1;font-size:16px;}
#return_message .success {background: green;padding: 5px 0px 5px 10px;color:#f1f1f1;font-size:16px;}