/*
Theme Name: Johnny's Petshop
Author: Steve Roelens
*/

/************************************************/
/******************** Reset ********************/
/************************************************/
* { margin:0; padding:0; }

body          { font-family:'lucida grande', 'lucida sans unicode', arial; font-size:12px; line-height:1.5em; background-repeat:repeat-x; }
body.page-popup { background:none; }

img           { border:0; vertical-align:top; }

a,
a:hover       { color:#5b3e2c; }
:focus        { outline: 0; }

/* Headings */
h1            { font-size:20px; font-weight:bold; line-height:1.3; }
h2            { font-size:18px; font-weight:normal; line-height:1.34; }
h3            { font-size:16px; font-weight:normal; line-height:1.375; }
h4            { font-size:14px; font-weight:bold; }
h5            { font-size:12px; font-weight:bold; }
h6            { font-size:11px; font-weight:bold; }
.category-content p	  { margin-bottom:18px; }
.category-content h1  { margin-bottom:18px; }
.category-content h2  { margin-bottom:18px; }
.category-content h3  { margin-bottom:18px; }
.category-content h4  { margin-bottom:18px; }

/* Forms */
form          { display:inline; }
fieldset      { border:0; }
legend        { display:none; }

/* Table */
table         { border:0; border-collapse:collapse; border-spacing:0; empty-cells:show; font-size:100%; }
caption,th,td { vertical-align:top; text-align:left; font-weight:normal; }

/* Content */
address       { font-style:normal; }
cite          { font-style:normal; }
q,
blockquote    { quotes:none; }
q:before, 
q:after       { content:''; }
small,big     { font-size:1em; }
sup           { font-size:1em; vertical-align:top; }

/* Lists */
ul,ol         { list-style:none; }

/* Tools */
.nobr         { white-space:nowrap !important; }
.wrap         { white-space:normal !important; }
.a-left       { text-align:left !important; }
.a-center     { text-align:center !important; }
.a-right      { text-align:right !important; }
.v-top        { vertical-align:top; }
.v-middle     { vertical-align:middle; }
.f-left,
.left         { float:left !important; }
.f-right,
.right        { float:right !important; }
.f-none       { float:none !important; }
.f-fix        { float:left; width:100%; }
.no-display   { display:none; }
.no-margin    { margin:0 !important; }
.no-padding   { padding:0 !important; }
.no-bg        { background:none !important; }
div.spacer    { clear:both; }

/************************************************/
/******************** Styles ********************/
/************************************************/

/* Layout ================================================================================= */
.wrapper { width:100%; }
.page-print { background:#fff; padding:18px; text-align:left; }
.page-popup { padding:18px; text-align:left; }
.main { clear:both; margin:0px auto; margin-top:16px; width:990px; }

/* Base Columns */ 
.col-left { float:left; width:188px; }
.col-main { float:left; margin-left:18px; width:532px; }
.col-right { float:right; width:234px; }

/* Content Columns */
.col2-set .col-1 { float:left; width:49%; }
.col2-set .col-2 { float:right; width:49%; }
.col2-set .narrow { width:33%; }
.col2-set .wide { width:65%; }

.col3-set .col-1 { float:left; width:32%; }
.col3-set .col-2 { float:left; width:32%; margin-left:2%; }
.col3-set .col-3 { float:right; width:32%; }

.col4-set .col-1 { float:left; width:23.5%; }
.col4-set .col-2 { float:left; width:23.5%; margin:0 2%; }
.col4-set .col-3 { float:left; width:23.5%; }
.col4-set .col-4 { float:right; width:23.5%; }

/* Header ================================================================================ */
.wrapper-top { clear:both; margin:0px auto; width:990px; height:298px; }
.wrapper-top .header { margin-top:100px; width:976px; height:220px; background-repeat:no-repeat; border:7px solid #ffffff; }
.wrapper-top .header ul { position:relative; margin-left:195px; list-style:none; }
.wrapper-top .header li { float:left; height:47px; line-height:47px; background-position:0px; background-repeat:no-repeat; }
.wrapper-top .header li a { display:block; padding:0px 25px; font-size:14px; text-decoration:none; text-transform:uppercase; }
.wrapper-top .header li.home { background-image:none; }
.wrapper-top .header li.home a { padding-left:30px; background-position:8px; background-repeat:no-repeat; }
.wrapper-top .header li.menu-sub div { display:none; position:absolute; top:47px; left:-20px; padding:18px; padding-right:0px; width:600px; }
.wrapper-top .header li.menu-sub div ul { float:left; margin-left:0px; margin-right:18px; }
.wrapper-top .header li.menu-sub div li { float:none; height:24px; line-height:24px; background-color:inherit; }
.wrapper-top .header li.menu-sub div a { display:inline; margin-left:10px; padding:0px; font-size:12px; text-decoration:none; text-transform:none; }
.wrapper-top .header-sub { margin-top:18px; }
.wrapper-top .search { float:right; margin-top:9px; margin-right:9px; height:30px; }
.wrapper-top .search input { float:left; }
.wrapper-top .search input.keyword { margin-right:3px; padding:5px; width:220px; }
.wrapper-top .menu-top { position:absolute; margin-left:230px; top:45px; font-size:12px; }
.wrapper-top .menu-top a { text-decoration:none; }
.wrapper-top .logo { position:absolute; top:0px; width:212px; height:185px; background-image:url('images/top-logo.png'); background-repeat:no-repeat; }
.wrapper-top .logo a { display:block; width:100%; height:100%; }
.wrapper-top .languages { position:absolute; top:18px; width:990px; }
.wrapper-top .languages ul { float:right; list-style:none; }
.wrapper-top .languages ul li { float:left; }
.wrapper-top .languages ul a { padding:5px; font-size:16px; font-weight:bold; color:#BAAD9E; }
.header-sub .breadcrumbs { float:left; line-height:18px; }
.header-sub .website { float:right; font-size:14px; font-weight:bold; line-height:18px; }
.header-sub .website a { text-decoration:none; }

/* Left ================================================================================== */
.col-left .category { margin-bottom:13px; padding:7px; }
.col-left .category div { margin-bottom:0px; padding:0px; background:none; }
.col-left .category div img { border:0px; }
.col-left .category ul { list-style:none; }
.col-left .category li { line-height:30px; background-position:6px 13px; background-repeat:no-repeat; }
.col-left .category li a { display:block; padding-left:15px; font-size:12px; text-decoration:none; background-position:bottom; background-repeat:no-repeat; }
.col-left .category li li a { padding-left:25px; font-size:11px; font-style:italic; }
.col-left .last { margin-bottom:0px; }

/* Global Styles ========================================================================= */
/* Form Elements */
input,select,textarea,button { padding:3px; font:12px 'lucida grande', 'lucida sans unicode', arial; vertical-align:middle; color:#000; background:#ffffff; border:1px solid #bbbbbb; }
select { padding:1px; }
select option { padding-right:10px; }
select.multiselect option {}
textarea { overflow:auto; }
input.radio { margin-right:3px; }
input.checkbox { margin-right:3px; }
input.qty { width:2.5em !important; }
/*button::-moz-focus-inner { padding:0; border:0; }*/
button.button { overflow:visible; padding:3px 10px; width:auto; border:0px; cursor:pointer; /*-webkit-border-fit:lines;*/ }
button.button span { display:block; margin:0; padding:0 8px 1px; font-weight:bold; text-align:center; white-space:nowrap; }
button.disabled {}
button.disabled span {}

/* Global Messages  */
.success { color:#3d6611; font-weight:bold; }
.error { color:#f00; font-weight:bold; }
.notice { color:#ccc; }

.messages,
.messages ul { list-style:none !important; margin:0 !important; padding:0 !important; }
.messages { margin-bottom:8px; width:100%; overflow:hidden; }
.messages li { margin:0 0 10px; }
.messages li li { margin:0 0 3px; }
.error-msg,
.success-msg,
.note-msg,
.notice-msg { border-style:solid !important; border-width:1px !important; background-position:10px 10px !important; background-repeat:no-repeat !important; min-height:24px !important; padding:8px 8px 8px 32px !important; font-size:12px !important; font-weight:bold !important; }
.error-msg { border-color:#f16048; background-color:#faebe7; background-image:url('images/error_msg_icon.gif'); color:#df280a; }
.success-msg { border-color:#446423; background-color:#eff5ea; background-image:url('images/success_msg_icon.gif'); color:#3d6611; }
.note-msg,
.notice-msg { border-color:#fcd344; background-color:#fafaec; background-image:url('images/note_msg_icon.gif'); color:#3d6611; }

/* Sidebar =============================================================================== */
.block { margin:0 0 18px; }
.block .block-title { padding-left:30px; background-image:url('images/block-title.jpg'); background-position:bottom; background-repeat:no-repeat; }
.block .block-title.my-account,
.block .block-title.opc { padding-left:8px; }
.block .block-title strong { line-height:28px; font-size:13px; font-weight:bold; text-transform:uppercase; }
.block h3 { font-size:12px; line-height:1.5; }
.block .block-content { padding:8px; }
.block .block-content li { margin:4px 0px; }
.block .block-content li.current { font-weight:bold; }
.block .actions { text-align:right; }
.block .actions a { float:left; font-weight:bold; }

/* Category Page ========================================================================= */
.category-intro { margin-bottom:18px; padding:18px; padding-top:9px; }
.category-intro h1 { line-height:36px; font-size:18px; font-weight:bold; }
.category-intro p { margin-bottom:9px; }
.category-tip { margin-top:18px; padding:18px; padding-top:9px; background-position:490px 10px; background-repeat:no-repeat; }
.category-tip h3 { line-height:36px; font-size:18px; font-weight:bold; }
.category-image { display:block; margin:0 auto; }
.category-content { padding:0px 18px; }

/* Promotions */
.promotions { padding:18px; padding-bottom:0px; color:#E1E2D9; background-color:#2f1a0c; }
.promotions-grid.products-grid { margin-top:0px; color:#E1E2D9; background-color:#2f1a0c; }
.promotions-grid.products-grid .product-name a { color:#E1E2D9; }

/* Tooltip */
.tool-tip { border:1px solid #ddd; background-color:#f6f6f6; padding:5px; position:absolute; z-index:9999; }
.tool-tip .btn-close { text-align:right; }
.tool-tip .tool-tip-content { padding:5px; }

/* Print Pages */
.page-print .print-head {}
.page-print .print-head img { float:left; }
.page-print .print-head address { float:left; margin-left:15px; }

/* Footer ================================================================================ */
.footer { clear:both; margin:0px auto; padding:10px 0px; margin-top:18px; width:100%; color:#949494; text-align:center; background-color:#232323; }
.footer a { color:#949494; }
/* ======================================================================================= */

/************************************************/
/******************** Clears ********************/
/************************************************/
.clearer:after,
.header:after,
#nav:after,
.main:after,
.footer:after,
.col-main:after,
.col2-set:after,
.col3-set:after,
.col4-set:after,
.block-related li:after,
.block-related .item:after,
.block .actions:after,
.title-buttons:after,
.page-print .print-head:after { display:block; content:"."; clear:both; font-size:0; line-height:0; height:0; overflow:hidden; }