﻿/* 1. GENERAL
---------------------- */

#yourshoppingcart
{
    text-align: left;
    float:left;
    font-size: 14px;
    font-family: Sans-Serif;
    margin: 5px 0 5px 0;
    vertical-align: middle;
    width: 200px;
}

* {margin:0; padding:0;}

html, body {margin:0; padding:0; width:100%; height:100%;}

body {background: White url('../images/template/bg.jpg') repeat-x 50% 0; color: #222; font-family: Verdana, "Geneva CE", lucida, sans-serif; font-size: medium; text-align: center;/* for older browsers */}

p {line-height: 140%; margin: 0.3em 0; padding: 0.3em 0;}

hr {display: none;}

input, textarea {color: Black; font-family: sans-serif; font-size: 100%;}

/*
Google Chrome hack - breaking that Chrome border styling. Adding border to every input type=text and password, every textarea and all select boxes. Works for: Opera 9.6+, Safari 3.1 and Chrome
*/
body:nth-of-type(1) input[type="text"], body:nth-of-type(1) input[type="password"], body:nth-of-type(1) textarea, body:nth-of-type(1) select {border: 1px solid #AAA;}

fieldset {border: none;}

.clear {clear: both; height: 0px; display: block; visibility: hidden;} /* modern browsers dont need this, IE 6 + 7 does - so they have special treatment in own IE.CSS stylesheet */

/* links */
a {color: #5CA5CC; outline: none;}
a:hover {color: #CD1B45;}
a img {border: none;}

/* headlines */
h1 {color: Black; font-size: 200%;}
h2 {color: #5CA5CC; font-size: 123.1%;}
h3 {color: #CD1B45; font-size: 115.4%;}

/* align */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

dl dt a {color: #444; text-decoration: none;}
dl dt a:hover {color: #CD1B45; text-decoration: underline;}

table {border-collapse: collapse; font-size: 100%;}

/* 2. CONSTRUCTION
---------------------- */
#all {font-size: 81.3%;}

.inside, .inside1, .inside2, .inside3, .inside4, .inside5, .inside6 {margin: 0 auto; position: relative; text-align: left; width: 960px; z-index:2000;}

/* 3. HEADER */
#header { background: #EEF9FF url('http://www.lulyboo.com/includes/images/template/bg.jpg') repeat-x 50% 0; height: 257px;}
#header .inside {background: url('http://www.lulyboo.com/includes/images/header/headertemplate3.png') no-repeat 0 100%; height: 257px;}
#header .inside1 {background: url('http://www.lulyboo.com/includes/images/header/headertemplate3b_4.png') no-repeat 0 100%; height: 257px;}
#header .inside2 {background: url('http://www.lulyboo.com/includes/images/header/headertemplate3b_3.png') no-repeat 0 100%; height: 257px;}
#header .inside3 {background: url('http://www.lulyboo.com/includes/images/header/headertemplate3b_2.png') no-repeat 0 100%; height: 257px;}
#header .inside4 {background: url('http://www.lulyboo.com/includes/images/header/header_new4.jpg') no-repeat 0 100%; height: 257px;}
#header .inside5 {background: url('http://www.lulyboo.com/includes/images/header/header_new5.jpg') no-repeat 0 100%; height: 257px;}
#header .inside6 {background: url('http://www.lulyboo.com/includes/images/header/header_new6.jpg') no-repeat 0 100%; height: 257px;}

#header h1 a, #header h1 a span {color: Black; cursor: pointer; display: block; float: left; overflow: hidden; width: 264px; height: 73px; padding: 24px 0 0 80px; position: absolute; left: 22px; top: 32px; z-index: 10;}
#header h1 a span {background: url('../images/template/lulyboo-logo.png') no-repeat 0 0; top: 5px; left: 0; height: 81px; width: 264px; padding: 0;}
/*#header h1 a:hover, #header h1 a:hover span {background-position: 0 -81px; color: #666;}
*/
/* 4. MAIN - content, left column */
#main {min-height: 340px;}
#main:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* clearfix */

#main #content {float: right; margin: 20px 22px 20px 310px; text-align: justify; width: 632px;}
#main #left-column {position: absolute; top: -3px; left: 6px; width: 268px;}

/* 4.1 CONTENT */

body.subpage #content {min-height: 780px;}

#content div.breadcrumbs {color: #8AC9ED; font-size: 84.6%; margin: -5px 0 25px 0;}
#content div.breadcrumbs strong {color: #CD1B45; font-weight: normal;}

#content h2 {color: #3496CA; font-size: 192.3%; font-weight: normal; margin: 0 0 25px 0; padding: 0;}
#content h3 {margin: 2em 0 0.2em 0;}

#content strong {color: #336699;}

#content ul {margin: 0.5em 0 0 1.2em;}
#content ul li {padding: 0.2em 0 0.2em 0.2em;}


/* catalog */
#content dl.toy {background: url('../images/template/catalog/toy.jpg') no-repeat 0 0; float: left; margin: 1em 0 1em 0; margin-right: 25px; height: 220px; width: 190px; overflow: hidden; text-align: center;}
#content dl.toy.nospace {margin-right: 0;}

#content dl.toy dt {background: url('../images/template/catalog/img.jpg') no-repeat 0 0; margin: 20px 0 5px 20px; height: 160px; width: 150px;}
#content dl.toy dt img {font-size: 90%; margin-top: 4px; vertical-align: middle;}

#content dl.toy dd span {color: #D4EDFA;}

#content dl.toy dd a {font-weight: bold;}
#content dl.toy dd a.detail {background: url('../images/template/catalog/detail.gif') no-repeat 0 50%; padding-left: 20px;}

#content dl.toy dt a:hover img {filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;}

/* detail */
#content div.detail {background: url('../images/template/catalog/detail.jpg') no-repeat 0 0; position: relative; height: 460px;}

#content div.detail div.big {position: absolute; left: 4px; top: 5px;}

#content div.detail div.small {background: url('../images/template/catalog/detail-small.jpg') no-repeat 0 0; margin: 20px 0 0 0; height: 170px; width: 150px; position: relative; left: 482px; width: 150px;}
#content div.detail div.small a {display: block; padding-top: 4px;}
#content div.detail div.small a.detail {padding-top: 6px; text-align: right; visibility: hidden;}
#content div.detail div.small img {margin: 0 0 5px 4px; width: 142px; height: 142px;}

#content div.detail p {color: White; font-weight: bold; font-size: 123.1%; position: absolute; top: 379px; right: 33px; text-align: center;}
#content div.detail p strong {color: Black; display: block; height: 20px;}

#content div.order {margin: 1.5em 0 0.25em 0; text-align: center;}
#content div.order a {background: #EAF8FF url('../images/template/order.jpg') no-repeat 0 0; color: #336699; cursor: pointer; font-size: 153.8%; position: relative; float: left; height: 42px; left: 230px; padding: 0 0 0 3px; overflow: hidden; text-decoration: none;  text-shadow: 1px 1px 1px White;}
#content div.order a span {background: #EAF8FF url('../images/template/order.jpg') no-repeat 100% -42px; display: block; float: left; height: 35px; margin: 0; padding: 7px 0 0 0; width: 143px;}

#content div.order a:hover {background-color:#E881B5; background-position: 0 -84px; color: White; text-shadow: 1px 1px 1px #333;}
#content div.order a:hover span {background-color:#E881B5; background-position: 100% -126px;}

/* kontakt */
#content address {font-style: normal; line-height: 220%; margin: 1em 0;}

/* news */
#content.news dl {border-bottom: 1px dashed #EEE; margin: 1em 0 2em 0; padding: 0 0 2em 0;}
#content.news dl dt strong {color: #CD1B45; font-size: 115.4%;}
#content.news dl dt small {color: #666; display: block; font-size: 100%; margin: 3px 0 0 0;}
#content.news dl dd {margin: 1em 0 0 0;}

/* order */
#content .order fieldset {padding: 0.5em 0;}
#content .order table td, #content .order table th {padding: 0.3em 0;}
#content .order legend strong {color: #CD1B45; font-size: 115.4%;}
#content .order legend strong small {color: #666; display: block; margin: 3px 0 10px 0; font-size: 73.3%; font-weight: normal;}
#content .order input {padding: 1px 3px;}
#content .order input[type="text"]:focus {border: 1px solid #5CA5CC;}

.category {
    text-align:right;
    font-size: 70%;
    font-style: italic;
    padding: 0;
}

/* address */
#content fieldset.address table {width: 93%;}
#content fieldset.address table .a1 {width: 75px;}
#content fieldset.address table .a2 {width: 270px;}
#content fieldset.address table .a3 {width: 75px;}
#content fieldset.address table .a4 {width: 200px;}
#content fieldset.address table td {padding: 0.5em 0;}
#content fieldset.address table tfoot td {vertical-align: top; padding-top: 1.5em;}
#content fieldset.address table tfoot td textarea {padding: 3px; width: 473px;}

#content fieldset.address.other {margin: 2em 0 0.5em 0;}
#content fieldset.address.other legend strong {padding-left: 5px;}

/* choose zoobie */
#content fieldset.choose {margin: 3em 0 1em 0;}
#content fieldset.choose table th {color: #333; padding: 0.5em 3em 0.5em 0;}
#content fieldset.choose table td {height: 45px; padding-right: 1.5em; vertical-align: middle;}
#content fieldset.choose table td small {display: block; padding-right: 3em;}
#content fieldset.choose table td img {margin: 0 2em 0 2em;}

#content fieldset.choose table thead th {border-bottom: 1px solid #CCC; font-size: 80%;}

#content fieldset.choose table tbody td {border-bottom: 1px solid #F9F9F9;}
#content fieldset.choose table tbody td input {width: 30px;}

#content fieldset.choose table tfoot td {padding: 1.5em 6.3em 2em 0; text-align: right;}
#content fieldset.choose table tfoot td strong {color: #CD1B45; font-size: 115.4%;}
#content fieldset.choose table tfoot td small {display: inline; padding: 0; font-size: 73.3%; font-weight: normal;}
#content fieldset.choose table tfoot td input {margin-left: 0.3em; width: 45px;}

#content fieldset.choose .right {padding-right: 0; text-align: right;}

#content fieldset.choose p {color: #444; font-size: 84.6%;}

/* send */
#content fieldset.send legend {display: none;}
#content fieldset.send input {background: #EAF8FF url('../images/template/order-button.gif') no-repeat 0 0; border: none; color: #336699; cursor: pointer; font-size: 153.8%; margin: 1.2em auto 0 auto; width: 233px; height: 42px; overflow:hidden; text-align: center; text-shadow: 1px 1px 1px #333;}
#content fieldset.send input:hover {background: #E881B5 url('../images/template/order-button.gif') no-repeat 0 -42px; color: White;}
#content fieldset.send p {text-align: center;}

/* 4.2 LEFT COLUMN */

/* menu */
menu {margin-top: -58px; z-index:1000;}
menu li {display: block; font-weight: normal; font-size: 153.8%; list-style: none; height: 61px;}
menu li a {background: url('../images/template/menu/bg.png') no-repeat 0 0; color: #3496CA; cursor: pointer; display: block; height: 43px; padding-top: 18px; text-align: center; text-decoration: none; width: 282px;}
menu li a.active {background-position: 0 -61px; color: #006699; font-size: 110%;}
menu li a.active:hover {color: #006699;} /* IE */


marketing {margin-top: 5px; margin-left:8px; margin-bottom:10px;}
marketing .field {
    height: 30px;
    width: 180px;
}

marketing .btn {
   height: 30px; 
}
/* news in subpages */
#left-column #news {background: #EBF8FF url('../images/template/news/bg.jpg') no-repeat 0 100%; margin-top: 20px; padding-bottom: 9px; width: 296px;}
#left-column #news h2 {background: url('../images/template/news/h2.jpg') no-repeat 0 100%; height: 42px; padding: 22px 28px 0 0; text-align: right; text-shadow: 1px 1px 0 White;}

#left-column #news dl {background: url('../images/template/news/dl.jpg') no-repeat 0 50%; font-size: 92.3%; margin: 0; padding: 0 25px; min-height: 320px; width: 246px; overflow: hidden;}
#left-column #news dl dt {margin: 1px 0 0 0;}
#left-column #news dl dt small {display: block; padding-top: 2px;}
#left-column #news dl dd a {color: #666;}
#left-column #news dl dd a:hover {color: #333;}

/* 5. MIDDLE SECTION */

/* 5.1 3 in 1 */
a.three-products {text-decoration: none;}
#three-products {width: 920px; text-align:left; min-height:239px; height:239px;}
#three-products .product
{
    max-width:305px;
    min-height:150px;
}

/* 5.2 EXTRA INFO */
#extra-info {background: #EBF8FF url('../images/template/extra/bg.jpg') no-repeat 50% 100%; height: 254px; margin-bottom: 1em; padding: 0 0 9px 0; width: 960px;}
#extra-info:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* clearfix */
#extra-info div {background: url('../images/template/extra/div.jpg') no-repeat 50% 0; float: left; height: 247px; width: 320px;}
#extra-info h2 {margin: 0; padding: 20px 25px 0 0; text-align: right; text-shadow: 1px 1px 0 White;}
#extra-info small {color: #67797C;}

#extra-info dl {font-size: 92.3%; clear: left; margin: 0 25px 0 32px; overflow: hidden;}
#extra-info dl dt {margin: 1px 0 0 0;}
#extra-info dl dt small {display: block; padding-top: 2px;}
#extra-info dl dd, #left-column #news dl dd {border-bottom: 1px solid #D4EDFA; margin: 8px 0 10px 0; padding-bottom: 8px; text-align: justify;}
#extra-info dl dd span {cursor: help; display: block; height: 28px; line-height: 110%; overflow: hidden;}
#extra-info dl dd a.more, #left-column #news dl a.more {color: #666; cursor: pointer; display: block; font-size: 91.7%; margin-top: 3px; text-align: right; text-decoration: none;}
#extra-info dl dd a.more:hover, #left-column #news dl a.more:hover {color: #CD1B45; text-decoration: underline;}

/* 5.2.1 news */
#extra-info .news {background-position: -37px 0;}
#extra-info .news h2 {background: url('../images/template/extra/h2-news.gif') no-repeat 29px 0; height: 41px;}
#extra-info .news dl  {margin-top: 2px;}

/* 5.2.2 bestseller */
#extra-info .bestseller {background-position: -41px 0;}
#extra-info .bestseller h2 {background: url('../images/template/extra/h2-bestseller.gif') no-repeat 25px 3px; height: 38px; padding-right: 30px;}
#extra-info .bestseller ol {margin: -5px 0 0 20px; padding-left: 60px; width: 190px;}
#extra-info .bestseller li {border-bottom: 1px solid #D4EDFA; color: #5CA5CC; font-size: 115.4%; font-weight: bold; padding: 5px 0 5px 10px;}
#extra-info .bestseller li a {color: #333; display: block; padding: 5px 0; text-decoration: none;}
#extra-info .bestseller li a:hover {color: #CD1B45;}

/* 5.2.3 feedback */
#extra-info .feedback {background-position: -45px 0;}
#extra-info .feedback h2 {background: url('../images/template/extra/h2-feedback.gif') no-repeat 20px 0; height: 45px; padding-right: 35px;}
#extra-info .feedback dl {margin: 0 32px 0 25px;}
#extra-info .feedback dl dt {display: none;}
#extra-info .feedback dl dd {margin-top: 5px; margin-bottom: 15px; padding-bottom: 1em;}
#extra-info div.clear {display: none;}

/* 7. FOOTER */
#footer {background: url('../images/template/footer/bg.gif') repeat-x 0 0; margin-top: 10px;}
#footer .inside {background: url('../images/template/footer/inside.gif') no-repeat 50% 100%; height: 35px; padding-top: 10px;}
#footer ul {margin-left: 5px;}
#footer ul li {background: url('../images/template/footer/li.gif') no-repeat 100% 95%; display: block; float: left; list-style: none; padding: 0.5em 1.1em 0 1em;}
#footer ul li a {padding: 0 0 0 0;}
#footer a {color: #777;}
#footer a:hover {color: Black;}

#footer p {color: #777; float: right; padding-top: 2px; margin-right: 22px; position: relative;}
#footer p span {padding: 0; visibility: hidden;}
#footer p a {margin-right: 42px;}

#footer p a.faceit, #footer p a.faceit span {background: url('../images/template/footer/faceit.jpg') no-repeat 0 0; cursor: pointer; display: block; font-size: 77.4%; float: right; margin: 0; position: absolute; top: -5px; right: 0; width: 39px; height: 28px;}
#footer p a.faceit span {position: absolute; top: 0; left: 0; visibility: visible;}
#footer p a.faceit:hover span {background-position: 0 -28px;}