﻿/* --- [ BASIC ] ------------------------------------------*/
    html {
	    margin:0
    }

    body {
	    margin:0;
        background:#909;
        font-family:Verdana,Trebuchet MS,Tahoma,Arial,Sans-Serif;
	    color: #000;
	    font-size:8pt;
    }  
    body.splash {
        background:#000;
    }  
    body.about-us {
        background:#0c0;
    }  
    body.product-details {
        background:#ff0;
    }  
    body.international {
        background:#b30e15;
    }  
    body.product-item {
        background:#fff;
    }  
    body.orange {
        background:#f60;
    }  


/* --- [ page layout ] ------------------------------------*/

    #container {
	    position:relative;
	    width: 800px;
	    height: 600px;
        margin: 0 auto;
	    background:#fff url('../images/footer/footer-background.gif') bottom left no-repeat;
    }

    html>body #container {
	    min-width:800px;
	    height:auto;
	    min-height:600px;
    }

    #container-item {
	    position:relative;
	    width: 572px;
	    height: 285px;
        margin: 10px auto 0 auto;
	    background:#fff url('../images/products/detail-background.gif') top left no-repeat;
    }

    html>body #container-item {
	    min-width:572px;
	    height:auto;
	    min-height:285px;
    }


    .header { 
	    display:block; 
	    width:800px;
	    height:195px;
	    margin:0;
	    background:#fff url('../images/header/header-background.gif') top left no-repeat;
	}
    .header-about { background:#fff url('../images/header/header-background-about.gif') top left no-repeat; }
    .header-product-details { background:#fff url('../images/header/header-background-details.gif') top left no-repeat; }
    .header-product-international { background:#fff url('../images/header/header-background-inter.gif') top left no-repeat; }
    .header-product-orange { background:#fff url('../images/header/header-background-orange.gif') top left no-repeat; }
   
    html>body .header { 
	    min-width:800px;
	    min-height:195px;
    }
    
    .strap { width:800px; height:30px; padding:165px 0 0 0; }
	
/* --- [ wraps and columns ] ------------------------------*/
    .splash-wrap { position:relative; width:800px; height:600px; margin:10px auto; background:#000 url('../images/splash.jpg') center center no-repeat; }
    .splash-crisps { position:absolute; left:0; top:0; width:800px; height:99px; margin:10px auto; background:url('../images/splash-crisps.gif') top left no-repeat; }
    .splash-enter { position:absolute; left:0; top:480px; width:800px; font-size:12pt; font-weight:bold; text-align:right; }
    .splash-butnot { position:absolute; left:0; top:520px; width:800px; height:47px; background:url('../images/splash-butnot.gif') top left no-repeat; }

	
    .layout-wrap { width:800px; margin:0; clear:both; }
    .layout-navigation { width:220px; text-align:left; float:left;  }
    .layout-content { width:580px; margin:0; text-align:left; float:right; }
    .layout-content-home { width:580px; margin:0; text-align:left; float:right; background:url('../images/less-than.gif') bottom right no-repeat; }
    .layout-content-details { width:580px; margin:0; text-align:left; float:right; background:url('../images/less-than-details.gif') bottom right no-repeat; }

    .content-wrap { width:580px; margin:10px auto 120px auto; clear:both; }
    .content-wrap-no-bottom { width:580px; margin:10px auto 5px auto; clear:both; }
    .content-left { width:350px; margin:0; text-align:left; float:left;  }
    .content-right { width:230px; margin:0; text-align:left; float:right; }
    
    .item-wrap { width:560px; margin:0 7px 0 6px; clear:both; color:#c00; }
    .item-left { width:300px; margin:10px 0 0 0; text-align:left; float:left;  }
    .item-left img { width:300px; }
    .item-right { width:260px; margin:0; text-align:left; float:right; }
    .item-right-content { width:230px; margin:10px 10px 10px 20px; text-align:left; }
    .item-wrap ul { margin-top:0px; margin-bottom:5px; }
    .item-wrap p.pack-size { margin:0;}

    .payment-wrap { width:500px; margin:5px 0; padding:0 0 5px 0; clear:both; border-bottom:solid 1px #0c0; }
    .payment-left { width:400px; margin:0; text-align:left; float:left;  }
    .payment-right { width:100px; margin:0; text-align:right; float:right; }
    .total-left { width:450px; margin:0; text-align:right; float:left;  }
    .total-right { width:50px; margin:0; text-align:right; float:right; }

    .address-wrap { width:500px; margin:15px 0 10px 0; padding:0 0 5px 0; clear:both; }
    .address-left { width:250px; margin:0; text-align:left; float:left;  }
    .address-right { width:250px; margin:0; text-align:left; float:right; }

    .worldpay-wrap { width:500px; margin:5px 0; padding:5px 0 0 0; clear:both; border-top:solid 1px #0c0; }
    .worldpay-left { width:300px; margin:0; text-align:left; float:left;  }
    .worldpay-right { width:200px; margin:0; text-align:right; float:right; }
	
    .card-wrap { width:500px; margin:5px 0; padding:5px 0 0 0; clear:both; border-top:solid 1px #0c0; }
    .card-type { margin-right:3px; text-align:center; float:left;  }

/* --- [ navigation ] -------------------------------------*/
	.navigation { width:200px; margin:0 auto; color:#909; font-size:9pt; font-weight:bold }
	.navigation p { margin:10px 0 0 0; padding:0 0 0 15px; }
	.navigation p.selected { margin:10px 0 0 0; padding:0 0 0 15px; background:url('../images/selected.gif') top left no-repeat; }
    .navigation a { color: #909; text-decoration:none; }
    .navigation a:visited { color: #909; text-decoration:none; }
    .navigation a:hover { color: #909; text-decoration:underline; }
    .navigation a:active { color: #909; text-decoration:underline; }

/* --- [ promo pictures ] ---------------------------------*/
    #promo-picture { position:absolute; z-index:5; width:300px; left:570px; top:100px; text-align:left; }
    #promo-picture img { width:300px; }
    #promo-picture img.details { width:230px; }

/* --- [ flags ] ------------------------------------------*/
    #flags { position:absolute; z-index:10; width:300px; right:10px; top:30px; text-align:right; }
    #flags .flag { width:35px; text-align:right; float:left; }
    #flags img { width:160px; height:35px; }


/* --- [ HEADINGS AND BLOCK ELEMENTS ] --------------------------------------*/
	h1, h2, h3, h4, h5, h6 { 
        font-family:Trebuchet MS,Verdana,Tahoma,Arial,Sans-Serif;
	}
	
	h1 {
		font-weight: bold;
		font-size: 12pt;
		color: #666;
		margin: 0 0 15px 0;
	}
    .content-wrap h1,.content-wrap-no-bottom h1 { display:none;  }
    .item-wrap h1 { margin:0 0 10px 0; color:#c00; font-size:12pt  }
	h2 {
		font-weight: bold;
		font-size: 11pt;
		color: #390;
		margin: 0 0 10px 0;
	}
    .item-wrap h2 { font-family:Verdana,Trebuchet MS,Tahoma,Arial,Sans-Serif; margin:0; color:#c00; font-size:8pt  }
	h3 {
		font-size: 12pt;
		margin: 12px 0px 10px 0px;
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-style: italic;
		color: #f90;
		font-weight: bold;
	}
	h4 {
		font-size: 11pt;
		margin: 12px 0px 10px 0px;
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-style: normal;
		color: #339933;
		font-weight: bold;
	}
	h5 {
		font-size: 16pt;
		margin: 12px 0px 10px 0px;
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-style: normal;
		color: #ff0000;
		font-weight: bold;
	}
	
	p {
		margin: 0 0 15px 0;
	}
	p.bigger {
		font-size:130%;
		font-weight:bold;
	}

/* --- [ tables ] ---------------------------------------*/
    table td.table-head { border-bottom:solid 2px #0c0; }
    table td.table-cell { border-bottom:solid 1px #0c0; }
	table td.table-head p, table td.table-cell p { margin: 2px 0; }


/* --- [ FORMS ] -----------------------------------------*/
    form.contact{
    margin:0 0 10px 0;
    }

    form.contact label{
    float: left;
    width: 180px;
    font-weight: bold;
    margin: 5px 0 0 0;
    }

    form.contact input {
    margin: 0 0 5px 0;
    }
        
    form.contact textarea{
    font-family: verdana;
    }

    form.contact br{
    clear: left;
    }  
    
    .submit-wrap {
        width:520px;
        margin:5px 0;
        border:solid 0px #000;
        text-align:right;
        clear:both;
        }  

/* --- [ BULLET LISTS ] ----------------------------------*/
	div.special * { margin:0; padding:0; }
	div.special { position:absolute; left:575px; top:350px; width:205px; margin:0 10px 10px 10px; background:#393; }
	div.special h2 { margin:10px 5px 0 5px; font-size:11pt; color:#fff; }
	div.special ul { color:#fff; margin:5px 0 10px 0; list-style-type:disc; }
	div.special li { margin:5px 5px 5px 25px;  }

/* --- [ IMAGES ] ----------------------------------------*/
    img { border:0px; }

/* --- [ LINKS ] -----------------------------------------*/
    a { color: #666; text-decoration:none; }
    a:visited { color: #666; text-decoration:none; }
    a:hover { color: #666; text-decoration:underline; }
    a:active { color: #666; text-decoration:underline; }

/* --- [ LINKS ] -----------------------------------------*/
    a.splash { color: #393; text-decoration:none; }
    a.splash:visited { color: #393; text-decoration:none; }
    a.splash:hover { color: #393; text-decoration:underline; }
    a.splash:active { color: #393; text-decoration:underline; }


/* --- [ MISC CLASSES ] ----------------------------------*/
    .clear	{clear:both;}
    .no-display	{display:none;}
.front1 { position:absolute; right:0px; top:0px; width:500px; margin:0 0px 0px 0px; background:#000000; }
.front2 { position:absolute; left:0px; top:350px; width:190px; margin:0 0px 0px 0px; background:#000000; }
.front3 { position:absolute; left:0px; top:150px; width:150px; margin:0 0px 0px 0px; background:#000000; }
