@charset "UTF-8";
/* CSS Document */

/* RESET */
html, body {
    padding: 0;
    margin: 0;
    }
html {
    font-size: 1em;
    }
body {
    font-size: 100%;
    }
a img, :link img, :visited img {
    border: 0;
    }
ul, ul li, p {margin: 0; padding: 0; list-style: none}
a:active {outline: none;}
a:focus {-moz-outline-style: none;}


/* ---------------- JANE DESIGN ------------------- */


/* GLOBAL */
body {background: url(../imgs/janedesign_bkg_full2.jpg) no-repeat top center fixed #f8f8e0; font-family: Arial, Helvetica, sans-serif;}
br.clearabove {clear: both;}
#header {width: 1150px; height: 270px; margin: auto; top: 0; position: relative;}
#maincontent {height: 400px; width: 1150px; margin: auto;}

/* MAIN NAVIGATION */
a#home {width: 200px; height: 200px; position: absolute; top: 30px; left: 475px; display: block;}
ul.main_nav li {float: left;}
ul.main_nav li a {width: 110px; height: 0; padding-top: 100px; display: block; background: url(../imgs/nav_sprite.png) no-repeat; overflow: hidden;}
#left_nav {position: absolute; left: 62px; top: 36px;}
ul.main_nav #collection a {background-position: 0px 0px;}
ul.main_nav #collection a:hover, ul.main_nav #collection.active a {background-position: 0 -98px;}
ul.main_nav #stores a {background-position: -110px 0px;}
ul.main_nav #stores a:hover, ul.main_nav #stores.active a {background-position: -110px -98px;}
#right_nav {position: absolute; right: 62px; top: 36px;}
ul.main_nav #about a {background-position: -195px 0px;}
ul.main_nav #about a:hover, ul.main_nav #about.active a {background-position: -195px -98px;}
ul.main_nav #contact a {background-position: -308px 0px;}
ul.main_nav #contact a:hover, ul.main_nav #contact.active a {background-position: -308px -98px;}


/* CARD CSS3 ROTATIONS */
.rotate1 {-webkit-transform: rotate(2deg); -moz-transform: rotate(2deg);}
.rotate2 {-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg);}
.rotate3 {-webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg);}
.rotate4 {-webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg);}
.rotate5 {-webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);}


/* CARD LAYOUT */
#allcards {padding: 0 30px; height: 450px;}
#allcards div {float: left; position: relative; width: 150px; padding: 30px 30px 0px 30px; margin: 0 30px; height: 370px;}
#allcards div img {width: 150px; height: 200px; cursor: move; -webkit-box-shadow: 0px 0px 6px #6b9ebd; -moz-box-shadow: 0px 0px 6px #6b9ebd; box-shadow: 0px 0px 6px #6b9ebd;}
#allcards div span.holder {display: block; z-index: 100; background: url(../imgs/cardholder.png) center bottom no-repeat; width: 34px; height: 210px; position: absolute; bottom: 0; left: 88px;}
a#scrollright {position: fixed; right: 20px; bottom: 20px; color: #ca3360; text-decoration: none; padding: 7px; text-transform: uppercase; font-weight: bold; border-radius: 3px; -moz-border-radius: 3px; background: #fff; font-size: 80%; border: solid 1px #ca3360;}
a#scrollleft {position: fixed; left: 20px; bottom: 20px; color: #ca3360; text-decoration: none; padding: 7px; text-transform: uppercase; font-weight: bold; border-radius: 3px; -moz-border-radius: 3px; background: #fff; font-size: 80%; border: solid 1px #ca3360;}
#allcards div.category_box {float: left; width: 110px; padding: 110px 0 0 0; margin: 0; height: 300px; text-align: center;}
span.category {position: relative; color: #1c528c; text-decoration: none; padding: 7px; text-transform: uppercase; font-weight: bold; border-radius: 3px; -moz-border-radius: 3px; font-size: 80%; border: solid 1px #fff;}

/* CART ENVELOPE */
#cart {position: absolute; top: 125px; right: 67px; width: 180px; background: #fff; opacity: 0.98}
.cart_up {z-index: 400;}
#cart_data {position: absolute; font-family: 'Cantarell', arial, serif; font-size: 75%; top: 110px; z-index: 1; display: none; right: 0; width: 270px; line-height: 1.2; background: url(../imgs/wavy_bkg.jpg) no-repeat top #fff; border: 5px solid #fff; border-radius: 10px; -moz-border-radius: 10px; padding: 40px 10px 10px 10px;}
#envelope {position: absolute; top: 0; cursor: pointer; z-index: 2; right: 0px; height: 140px; width: 180px; background: url(../imgs/envelope_cart_sprite_new.png) no-repeat; background-position: 0 -140px;}
.simpleCart_quantity {position: absolute; right: 8px; font-family: 'Reenie Beanie', arial, serif; text-shadow: 0px 0px 4px #cb3360;  width: 40px; text-align: center; font-size: 240%; top: 15px; color: #fff;}

/* CART LISTING STRUCTURE */
.cartHeaders {height: 25px; border-bottom: 1px solid #e3729d; text-transform: uppercase; color: #ca3360; font-weight: bold;}
.cartHeaders div {float: left;}
.itemContainer div {float: left; height: 40px; margin-top: 5px;}
.cartHeaders .itemName {width: 130px; margin-left: 50px;}
.cartHeaders .itemQuantity {margin-left: 12px;}
.itemContainer .itemName {margin-left: 10px; width: 130px; padding-top: 13px; height: 27px; color: #666;}
.itemThumb {height: 40px; width: 40px; border-radius: 5px; -moz-border-radius: 5px; overflow: hidden;}
.itemContainer .itemdecrement, .itemContainer .itemincrement {width: 15px; margin-left: 10px; padding-top: 13px; margin-top: 5px; height: 27px;}
.itemContainer .itemQuantity {width: 20px; margin-left: 10px; text-align: center; padding-top: 13px; height: 27px; margin-top: 5px;}
.itemContainer .itemincrement a {display: block; background: url(../imgs/increment_sprite.jpg) no-repeat; height: 0; padding-top: 15px; width: 16px; overflow: hidden;}
.itemContainer .itemdecrement a {display: block; background: url(../imgs/decrement_sprite.jpg) no-repeat; height: 0; padding-top: 15px; width: 16px; overflow: hidden;}
.itemContainer .itemincrement a:hover, .itemContainer .itemdecrement a:hover {background-position: 0 -16px;}
#total {width: 255px; background: #F9CDDE; margin: 5px 0 5px 0; height: 30px; padding: 5px; border-radius: 5px; -moz-border-radius: 5px; text-align: right;}
.shipping {font-size: 80%;}
.simpleCart_total {font-weight: bold;}
a.simpleCart_checkout {border: 1px solid #ca3360; background: #fff; color: #ca3360; text-decoration: none; padding: 7px; text-transform: uppercase; font-weight: bold; border-radius: 3px; -moz-border-radius: 3px; float: right;}
#numbers {float: right; margin-right: 5px;}

/* CONTACT PAGE */
.postcard {width: 570px; height: 370px; margin: auto; margin-top: 20px; background: url(../imgs/contact_card.png) no-repeat; position: relative;}
#address {position: absolute; top: 145px; color: #204B56; left: 310px; width: 230px; font-family: 'Reenie Beanie', arial, serif; font-size: 150%; line-height: 1.5;}
#phone {position: absolute; top: 277px; color: #204B56; left: 385px; width: 150px; font-family: 'Reenie Beanie', arial, serif; font-size: 150%; line-height: 1.5;}
#phone a, #phone a:visited {color: #C7325F; text-decoration: none;}
#phone a:hover {border-bottom: 1px dotted #C7325F;}

/* ABOUT PAGE */
.plain_postcard {width: 570px; height: 370px; margin: auto; margin-top: 20px; background: url(../imgs/about_card.png) no-repeat; position: relative;}
#about_text {position: absolute; top: 35px; color: #204B56; left: 40px; width: 380px; font-family: 'Cantarell', arial, serif; font-size: 90%; line-height: 1.5}
#signature {position: absolute; top: 315px; color: #204B56; left: 420px; width: 80px; font-family: 'Reenie Beanie', arial, serif; font-size: 150%;}
.lead_in {font-family: 'Cantarell', arial, serif; text-transform: uppercase; color: #ca3360;}

/* STORES PAGE */
#store_container {margin-left:235px; line-height: 1.1; font-size: 75%; width: 950px; background-color:#9C3;}
#store_container a {text-decoration: none;}
#store_container p {color: #204B56;}
.third_col {float: left; width: 200px;}
#store_container h2 {font-family: 'Reenie Beanie', arial, serif; font-size: 200%; color: #204B56; margin: 0;}
#store_container h2 a {color: #204B56;}
#store_container h2 a:hover {border-bottom: 1px dotted #204B56;}
#store_container #last_col h2 {padding-bottom: 10px;}
#store_container #last_col p {padding-bottom: 15px;}
#store_container h3 {margin-bottom: 0.3em; font-size: 95%; font-family: 'Cantarell', arial, serif; text-transform: uppercase; color: #ca3360;}
#store_container h3 a {color: #ca3360;}
#store_container h3 a:hover {border-bottom: 1px dotted #ca3360;}