# Design By Lauren. Copyright ShopSite Inc.
div#container {min-height: 70%}
div#topbar {background: #[-- STORE.Color1 --]; color: #FFFFFF; padding: 8px 0px; font-size: 90%; line-height: 120%}
div#topbar > .valign > div {max-width: 50%}
div#topbar > .valign > div.float-left {float: left; clear: none}
div#topbar > .valign > div.float-left > div {text-align: left}
div#topbar .btn-default {color: inherit}
div#topbar .btn {border-radius: 0px; -moz-border-radius: 0px; webkit-border-radius: 0px; font-size: inherit; line-height: inherit; background-color: #[-- STORE.Color1 --]; background-color: transparent; border: 0px}
div#topbar a, div#topbar .btn {display: inline-block; padding: 0px 10px; color: inherit; border-right: 1px solid #[-- STORE.TextColor --]}
div#topbar a:hover, div#topbar .btn:hover {color: #[-- STORE.Color2 --]}
div#topbar a#bootMini {padding-right: 0px !important; border-right: 0px}
header, nav, footer {text-align: center}
div#header, div#nav, div#footer {margin: 0px auto; width: 100%; max-width: [-- STORE.PageWidth --]}
div#header {text-align: [-- IF STORE.UseCompanyLogo --][-- IF STORE.CompanyLogo --]justify[-- ELSE_IF STORE.HeaderImage --]justify[-- ELSE --]right[-- END_IF --][-- ELSE_IF STORE.HeaderImage --]justify[-- ELSE --]right[-- END_IF --]; padding-top: 15px}
div#header:after {content: ''; display: inline-block; width: 100%}
div#header > div {display: inline-block; vertical-align: middle; height: 100%}
div#header > div:before {content: ''; display: inline-block; vertical-align: middle; height: 100%}
div#header > div#bootlogo {padding-left: 15px; max-width: 33%; text-align: left}
div#header > div#bootlogo img, div#header > div#headerimage {max-width: 100%; max-height: 250px}
div#header > div#headerimage {text-align: center; max-width: 33%}
div#header > div#searcharea {text-align: right; max-width: 33%; width: 33%}
div#header > div#searcharea > div, div#header > div#searcharea > span {display: block; padding: 3px 0px}
div#header > div#searcharea span a {color: #353535; font-size: 90%}
div#header > div#searcharea span a:hover {color: #[-- STORE.LinkColor --]}
nav {background: #[-- STORE.Color3 --]; border-top: 1px solid #[-- STORE.Color2 --]; border-bottom: 1px solid #[-- STORE.Color2 --]; margin-bottom: 5px}
div#nav {text-align: left}
div.suckertreemenu {padding: 0px 15px}
[-- IF STORE.Color3 NE FFFFFF --]
body div.suckertreemenu a {color: #FFFFFF}
body div.suckertreemenu a:hover, body div.suckertreemenu ul#ShopSite > li:hover > a {color: #F2F2F2}
[-- END_IF --]
[-- IF PageMenu --]
a#shoptoggle {color: #[-- STORE.TextColor --]}
div.suckertreemenu a {line-height: 44px; color: #[-- STORE.TextColor --]; padding: 0px 14px; text-transform: uppercase; font-size: 90%; font-weight: bold; letter-spacing: 0.4px}
div.suckertreemenu ul#ShopSite > li:first-child > a:first-child {padding-left: 0px}
div.suckertreemenu a:hover, div.suckertreemenu ul#ShopSite > li:hover > a {color: #[-- STORE.LinkColor --]}
[-- END_IF --]
#Rounded Borders?
div#messages > table tr td:nth-child(2), table.program_reward_order, div.warning div.warning_text, .rounded {border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px}
table.cart th:nth-child(1) {border-top-left-radius: 3px; -moz-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px}
table.cart th:nth-child(1) {border-bottom-left-radius: 3px; -moz-border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px}
table.cart td:last-child {border-top-right-radius: 3px; -moz-border-top-right-radius: 3px; -webkit-border-top-right-radius: 3px}
table.cart td:last-child {border-bottom-right-radius: 3px; -moz-border-bottom-right-radius: 3px; -webkit-border-bottom-right-radius: 3px}
### Footer
footer {background: #[-- STORE.Color4 --]; padding: 30px 0px; color: #[-- STORE.BackgroundColor --]}
div#footer {text-align: left}
div.footer_pagelinks a.footer_pagelink {padding-top: 3px; padding-bottom: 3px; font-size: 90%}
div.footer_pagelinks a.footer_pagetitle, span.footer_pagetitle {font-weight: bold; padding-bottom: 6px}
form#newsletter_form {display: block; padding-top: 3px}
div#newsletter {width: 25%; float: right; clear: none; text-align: left}
div#newsletter > div {padding: 0px 15px; text-align: left; color: inherit}
div#newsletter > span {display: block}
div#footerline2 {text-align: justify}
div#footerline2:after {content: ''; display: inline-block; width: 100%}
div#footerline2 > div {display: inline-block; vertical-align: middle; height: 100%; max-width: 25%}
div#footerline2 > div:before {content: ''; display: inline-block; vertical-align: middle; height: 100%}
div#footerline2 > div.smalldivide {display: none}
div#footertextb {display: block; clear: both; width: 100%; max-width: 100%; padding: 20px 0px;}
@media screen and (max-width: 992px) {
[-- IF PageMenu --]
div.suckertreemenu ul#ShopSite > li:first-child > a:first-child {padding-left: 14px}
div#header > div#searcharea {width: 100%}
div#header > div#searcharea > div#mediumSearch {display: inline-block; margin-right: 10px}
[-- END_IF --]
div#footerline2 {text-align: center}
div#footerline2 > div {display: inline-block; vertical-align: middle; height: 100%; max-width: 50%; text-align: center}
div#footerline2 > div:before {display: none}
div#footerline2 > div.smalldivide {display: block; max-width: 100%; width: 100%; clear: both}
}
@media screen and (max-width : 768px) {
div#topbar > .valign > div {max-width: 100%}
div#topbar > .valign > div.float-left {display: none}
div#header > div {display: block; vertical-align: middle; height: auto}
div#header > div:before {display: none}
div#header > div#bootlogo {max-width: 100%; text-align: center}
div#header > div#headerimage {max-width: 100%}
div#header > div#searcharea {text-align: center; max-width: 100%}
div#newsletter {width: auto; padding: 0px 15px 30px 15px; float: none; clear: both;}
}
@media print {
 div#topbar {display: none !important}
}