@import "cart.css";

/*------------------------------------------------------------------------------
    Global Styles
*/
* html {
    padding: 0;
    margin: 0;
    border: 0;
}


body {
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    background:url(/img/layout/background.png) top left repeat-x; 
    padding:0;
    margin:0;    
}
a img {
    border:none;
}
a {
    color:#104BFF;
}
a:hover {
    color:#25CF0D;
}
a:visited {
    color:#FF7420;
}
.js {
    display:none;
}

body>pre {
    background:white;
    border:4px solid #555;
    margin:1em;
    padding:1em;
}


/*------------------------------------------------------------------------------
    IE6 PNG fix. Enable if needed.
*/
/*
* html img {
    behavior: url('/css/pngfix.htc');
}
*/


/*------------------------------------------------------------------------------
    Primary Layout Containers
*/
#Container, #ContainerTop, #ContainerBottom {
    width:770px;
    margin:0 auto;
}
#Container {
    background-color:white;
}
#ContainerTop {
    background:url(/img/layout/container_bg_top.png) top left no-repeat;
    height:20px;
    margin-top:2em;
}
#ContainerBottom {
    background:url(/img/layout/container_bg_bottom.png) top left no-repeat;
    height:20px;
    margin-bottom:2em;
}

#Header {
    position:relative;
    width:770px;
    height:80px;
}
#Header #Logo {
    position:absolute;
    top:0px;
    left:15px;
}
#Header h1 {
    position:absolute;
    margin:0;
    padding:0;
    float:left;
    overflow:hidden;
    height:1px;
    width:1px;
    top:-100px;
}


#Content {
}


/*------------------------------------------------------------------------------
    Static pages
*/
#CompanyPage, #FaqPage, #CustomerServicePage {
    padding:1em 3em;
    line-height:160%;
}
#CompanyPage h2, 
#FaqPage h2, 
#CustomerServicePage h2 {
    margin:0.5em 0 1.5em;
    font-size:20px;
} 

/*------------------------------------------------------------------------------
    Navigation
*/
#Header #TopNav {
    position:absolute;
    top:0;
    right:30px;
    font-size:10px;
    text-transform:uppercase;
}
#TopNav a {
    color:black;
    text-decoration:none;
}
#TopNav a:hover {
    text-decoration:underline;
}

#Header #DiscountImage {
    position:absolute;
    top:15px;
    right:9px;
}

#Header #Navigation {
    position:absolute;
    left:202px;
    bottom:10px;
}

#Navigation .node {
    float:left;
    position:relative;
    z-index:100;
}
#Navigation .first a {
    background-position:0px 0px!important;
    border-left:none!important;    
}
#Navigation .last a {
    background-position:-405px 0px!important;    
}
#Navigation .node a {
    display:block;
    width:135px;
    height:23px;
    padding-top:7px;
    background:url(/img/layout/navbar.png) -20px 0px no-repeat;
    border-left:1px solid #EEEEEE;
    color:white;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
}
#Navigation .node a:hover {
    background:white;
    color:#3A53A4;
}

#Navigation .nodeList {
    position:absolute;
    top:30px;
    left:1px;
    background:#3A53A4;    
    padding:3px 8px;
    width:119px;    
    z-index:150;
}
#Navigation .childNode {
}
#Navigation .node .childNode a {
    width:auto;
    height:20px;
    padding:0;
    border-left:none;
    text-transform:none;
    text-align:left;
    background:#3A53A4;
    font-weight:bold;
}
#Navigation .node .childNode a:hover {
    color:#999999;
    background:#3A53A4;
}

/*------------------------------------------------------------------------------
    Home
*/
#Home {
    background:url(/img/layout/home_image.png) top left no-repeat;
    width:723px;
    height:377px;
    margin:0 auto;
    position:relative;
}
#Home h2, #Home h3 {
    position:absolute;
    margin:0;
    padding:0;
    font-family:Georgia, serif;
    color:#352c5a;
    font-weight:normal;
}
#Home h2 {
    font-size:26px;
    top:110px;
    left:205px;
}
#Home h3 {
    height:42px;
    font-size:16px;
    bottom:6px;
    left:202px;
}
#HomeImages {
    padding:25px 20px 0px;
}
#HomeImages .image {
    float:left;
    padding:0 12px;
}


/*------------------------------------------------------------------------------
    Videos
*/
#Videos {
    width:460px;
    margin:0 auto;
    padding-top:20px;
}
#Videos .video {
    margin:2em 0;
    border:1px dashed #C7CAE7;
}
#Videos .videoFrame {
    text-align:center;
    padding-bottom:1em;
}
#Videos .videoCaption {
    padding:0 1em;
}


/*------------------------------------------------------------------------------
    Order Form
*/
#OrderForm .product {
    margin:0.5em 0;
}
#OrderForm .product .image {
    width:250px;
    min-height:85px;
    text-align:center;
    float:left;
    clear:left;
}
#OrderForm .productLogo {
    width:250px;
    text-align:center;
    margin-top:50px;
}

#OrderForm .product div.input {
    float:left;
}
#OrderForm .product div.input label {
    display:block;
    font-size:10px;
}
#OrderForm .showRow {
    text-align:right;
    padding-right:40px;
    font-size:10px;
    text-transform:uppercase;
}
#OrderForm div.submit {
    text-align:right;
    padding-right:2em;
}
#OrderFormAddButton {
    background:none;
    border:1px solid white;    
    cursor:pointer;
}


/*------------------------------------------------------------------------------
    Product Detail
*/

#Product {
    padding:10px 20px 50px 20px;
    background-position:350px 80px;
    background-repeat:no-repeat;
    z-index:1;
}
#Product.rloopxl {
    background-position:350px 15px;
}

#Product #ProductDescription {
    margin:0 0 1em;
    width:350px;
}
#Product #OrderNow {
    text-align:right;
    width:350px;
    z-index:10;
}
#Product #DetailBox {
    width:400px;
}
#Product #DetailBox .item {
    margin:0.5em 0 0.5em 1em;
}
#Product #DetailBox .button {
    cursor:pointer;
    width:100px;
}
#Product #DetailBox .details {
    display:none;
}
#Product #VideoLink {
    text-align:right;
}
#Product #VideoLink a {
    color:#5D5E60;
}

/*------------------------------------------------------------------------------
    Product Listing (multipacks)
*/
#Products {
    padding:10px 20px 0px 20px;
}
#Products .product {
    padding:3em 0;
}
#Products .product .image {
    float:left;
}
#Products .product .details {
    float:left;
    padding-left:15px;
    width:480px;
}
#Products .product .name {
    font-family:Georgia, serif;
    font-size:18px;
    margin:5px 0;
}
#Products .product .description,
#Products .product .price {
    margin:1em 0;
}
#Products #OrderNow {
    padding-left:185px;
    position:relative;
    top:-4em;
}

/*------------------------------------------------------------------------------
    La Pagination
*/
#pagination {
    font-size:85%;
    padding:6px;
}
#pagination .pages {
    background-color:#efefef;
    border-top:1px solid #dfdfdf;
    border-bottom:1px solid #dfdfdf;
    margin:3px 0;
}
#pagination a,
#pagination .pages .current,
#pagination .pagingNav {
    padding:3px 3px;
    display:block;
    float:left;
    text-decoration:none;
}
#pagination a:hover {
    background-color:#ccc;
}
#pagination .pages .current {
    color:black;
}

#pagination .pagingNav {
    width:45px;
    text-align:center;
}
#pagination a.pagingNav {
    color:#FF4B0F;
}

#pagination .number,
#pagination .current {
    padding-left:8px!important;
    padding-right:8px!important;
}
#pagination .limit {
    font-size:85%;
}


/*------------------------------------------------------------------------------
    About Personalization
*/
#about_personalization {
    padding:10px;
    line-height:140%;
    font-size:90%;
}
#about_personalization .close {
    float:right;
    cursor:pointer;
}
#about_personalization h2,
#about_personalization h4 {
    border-bottom:2px solid #444444;
    padding-bottom:0.15em;
}
#about_personalization .body {
    padding:0 25px 0 50px;
}
#about_personalization .legend img {
    vertical-align:middle;
    margin-right:5px;
}
#about_personalization .note strong {
    color:red;
}
#about_personalization .contact {
    border-top:2px solid #444444;
    font-size:90%;
}


/*------------------------------------------------------------------------------
    Browser Links
*/
#browserLinks {
    text-align:right;
    margin:5px;
}


/*------------------------------------------------------------------------------
    Flash Messages
*/
#flash-message {
    font-weight:bold;
    text-align:center;
    font-size:16px;
    background:#E1E3F3;
    padding:0.5em 0;
}