﻿/* Martial Antics Site Stylesheet */

    /* tags */
        html, body 
        {
            height: 100%;
        }
        body 
        {
            margin: 0 0 0 0; padding: 0;
            background: url(../Images/body_bg.gif) no-repeat top center #e5e5e5;
            text-align: center;
        }
        a 
        {
            color: #369;
            text-decoration: none;
        }
        a:hover 
        {
            text-decoration: underline;
        }
        
    /* helpers */
        .clearer 
        {
            line-height: 0;
            clear: both;
        }
        .input-validation-error {
            border: 1px solid red;
        }
        .btn_panel {
            text-align: right;
        }
        p#notice {
            margin: 0 auto 20px;
            padding: 10px 20px;
            background: #26629c;
            color: #fff;
            font-weight: bold;
            width: 610px;
            border: 1px solid #cfdce9;
            /* css3 styling */
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-box-shadow: 0 0 2px 1px #666;
            -webkit-box-shadow: 0 0 2px #666;
        }
        p#notice a {
            color: #fff;
        }
        
    /* float clearing - used primarily by 100% height issue */        
        .clearfix:after 
        {
            content: ".";
            display: block;
            height: 0;
            font-size: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix { display: inline-block; }
        
	/* generic image replacement classes */
		.IR { margin: 0; padding: 0; }
		.IR span, span.IR { display: none; }
		.IR_GL {
			margin: 0; padding: 0;
			position: relative;
			overflow: hidden;
		}
		.IR_GL span { 
			width: 100%; height: 100%;
			position: absolute;
			top: 0; left: 0;
		}
			
    /* layout */
        #container 
        {
            margin: 0 auto;
            width: 950px;
            position: relative;
            background: url(../Images/container_bg.png) no-repeat bottom center;            
            min-height: 100%;
            text-align: left;
        }
        #header 
        {
            background: url(../Images/header_bg.gif) no-repeat top center;
            height: 201px;
            position: relative;
        }
        #main 
        {
            clear: both;
        }
        #panels 
        {
            margin-top: -20px; padding-left: 5px;
            margin-bottom: 95px;
            width: 245px;
            float: left;
        }
        #content 
        {
            padding: 20px 0 115px 0;
            width: 700px;
            text-align: center;
            float: right;
        }
        #page_content 
        {
            margin: 0 auto;
            width: 610px;
            text-align: justify;
        }
        #footer 
        {
            background: url(../Images/footer_bg.png) no-repeat top center;
            height: 115px; width: 100%;
            position: absolute;
            bottom: 0;
            clear: both;
        }
        
    /* header */
        img#main_logo
        {
            position: absolute;
			top: 15px; 
			left: -47px;
		}
        img#small_logo
        {
            position: absolute;
            right: -25px;
        }
        
        /* primary navigation */        
		ul#nav {
			margin: 18px 20px 0 0; padding: 0;
			height: 34px; width: 650px;
			list-style: none;
			float: right;
		}
		ul#nav li {
			margin: 0; padding: 0;
			display: inline;
		}
		ul#nav li a {
			margin: 0; padding: 34px 0 0 0;
			overflow: hidden;
			height: 0 !important;
			height /**/:34px; /* for IE5/Win only */
		}
		ul#nav li a:hover, ul#nav li.selected a { background-position: 0 -34px; }
		#nav_home a { float: left; width: 74px; background: url(../Images/Nav/nav_home.gif) top left no-repeat; }
		#nav_about a { float: left; width: 203px; background: url(../Images/Nav/nav_about.gif) top left no-repeat; }
		#nav_contact a { float: left; width: 115px; background: url(../Images/Nav/nav_contact.gif) top left no-repeat; }
		#nav_account a { float: right; width: 144px; background: url(../Images/Nav/nav_account.gif) top left no-repeat; display: none; }

    	/* site header - image replacement */
		h1#site_header 
		{
		    margin: 10px 0 0 285px;
			height: 22px; width: 630px;
			font-size: 2em;
		}
		h1#site_header span { background: url(../Images/site_header.gif) top left no-repeat;	}        
		
	/* footer */
	    
	    /* footer navigation */	
	    ul#footer_nav 
	    {
	        margin: 35px 0 30px 30px;
	        font-weight: bold;
	        list-style: none;
	        float: left;
	    }
	    ul#footer_nav li 
	    {
	        margin: 0 25px 0 0; padding: 0;
	        display: inline;
	    }
		ul#footer_nav li#copyright {
			margin-right: 80px;
			color: #369;
			font-size: 0.8em;			
		}

        /* keyword links */
	    ul#links 
	    {
			position: absolute;
	        bottom: -8px; left: 290px;
	        list-style: none;
	        width: 620px;
	        text-align: center;
            clear: both;
			font-size: 0.8em;
	    }
	    ul#links li 
	    {
	        display: inline;
	    }
	    ul#links li a 
	    {
	        color: #666;
	    }
	    
	/* panels (left hand column) */
	    .panel 
	    {
	        margin-bottom: 20px;
            background: url(../Images/Panels/panel_bg.png) repeat-y top center;
	        width: 237px;
	    }
	    .panel_ftr 
	    {
	        background: url(../Images/Panels/panel_ftr.png) no-repeat bottom center;
	        width: 100%; height: 16px;
	    }
        .panel p 
        {
            margin: 5px 23px;
            color: #fff;
            font-size: 1.1em;
        }
        .panel a 
        {
            color: #83afdb;
        }
        .panel a:hover 
        {
            color: #fff;
            text-decoration: none;
        }
	
	/* search panel */
	    
    	/* panel header - image replacement */
		h3#panel_search
		{
			height: 26px; width: 237px;
			font-size: 2em;
		}
		h3#panel_search span { background: url(../Images/Panels/panel_search.png) top left no-repeat; }  	
		
    /* category panel */
	    
	    /* panel header - image replacement */
	    h3#panel_categories
	    {
		    height: 26px; width: 237px;
		    font-size: 2em;
	    }
	    h3#panel_categories span { background: url(../Images/Panels/panel_categories.png) top left no-repeat; }  	
	
	    /* category listing */
	    ul#cat_nav 
	    {
	        margin: 0; padding: 0;
	        list-style: none;
	    }
	    ul#cat_nav li 
	    {
	        margin: 0; padding: 0;
	    }
	    ul#cat_nav li a 
	    {
	        margin-left: 6px; padding: 5px 0 5px 17px;
	        color: #83afdb;
	        font-size: 1em;
	        display: block;
	    }
	    ul#cat_nav li a:hover, ul#cat_nav li.selected a
	    {
            background: url(../Images/Panels/panel_selected.png) center left no-repeat;
	        color: #fff;
	        text-decoration: none;
	    }
		
	/* basket panel */
	    
    	/* panel header - image replacement */
		h3#panel_basket
		{
			height: 26px; width: 237px;
			font-size: 2em;
		}
		h3#panel_basket span { background: url(../Images/Panels/panel_basket.png) top left no-repeat; }  	
		
	/* spread the word panel */
	    
    	/* panel header - image replacement */
		h3#panel_spread
		{
			height: 26px; width: 237px;
			font-size: 2em;
		}
		h3#panel_spread span { background: url(../Images/Panels/panel_spread.png) top left no-repeat; }  	

	/* latest news panel */
		h3#panel_news 
		{
			height: 26px; width: 237px;
			font-size: 2em;
		}
		h3#panel_news span { background: url(../Images/Panels/panel_news.png) top left no-repeat; }
		
	/* panels (content) */
	    .content_panel 
	    {
	        margin: 0 auto 20px auto;
            background: url(../Images/Panels/content_panel_bg.gif) repeat-y top center;
	        width: 648px;
	    }
	    .content_panel_ftr 
	    {
	        clear: both;
	        background: url(../Images/Panels/content_panel_ftr.gif) no-repeat bottom center;
	        width: 100%; height: 17px;
	    }	
	    
	/* featured products panel */
	    
	    /* panel header - image replacement */
	    h3#panel_featured_products
	    {
	        height: 32px; width: 648px;
	        font-size: 2em;
	    }
	    h3#panel_featured_products span { background: url(../Images/Panels/content_panel_featured.gif) top left no-repeat; }
	    
	    /* inner content - for centering purposes */
	    .featured_products 
	    {
	        margin: 0 auto; padding: 10px 14px;
	        width: 622px;
	    }
	    
	    /* good barry customisations */
	    ul.productfeaturelist 
	    {
	        margin: 0; padding: 0;
	        list-style: none;
	    }
	    ul.productfeaturelist li 
	    {
	        margin: 0; padding: 0;
	        display: inline;
	    }
		
    /* product listing */
        .products 
        {
            margin: 0 auto;
            width: 622px;
        }
                
        /* product */
        .product
        {
            margin: 0 4px 10px 4px; padding: 0;
            height: 244px; width: 198px;
            text-align: center;
            position: relative;
            float: left;
        }
        .product.grey, 
        .products .product /* sets default for products */
        {
            background: url(../Images/Products/product_tn_bg_grey.png) top left no-repeat; 
        }        
        .product.blue, 
        .featured_products .product /* sets default for featured products */
        {
            background: url(../Images/Products/product_tn_bg_blue.png) top left no-repeat; 
        }
        .product.red
        {
            background: url(../Images/Products/product_tn_bg_red.png) top left no-repeat; 
        }
        .product img 
        {
            margin: 8px 0 0 0;
            border: 2px solid #fff;
        }
        .product a 
        {
            text-decoration: none;
        }
        .product.blue *, .product.red *, .featured_products .product *
        {
            color: #fff;
        }
        .product.grey *, .product *
        {
            color: #369;
        }        
        .product_name 
        {
            margin: 0; padding: 0 10px;
            position: absolute;
            top: 200px; left: 0;
            text-align: left;
        }
        .product_price 
        {
            margin: 0; 
            position: absolute;
            top: 218px; right: 8px;
            font-size: 1.2em;
        }
        
    /* product detail */
        #product_image {
            width: 325px; height: 472px;
            background: url(../Images/Products/product_detail_bg_blue.gif) top left no-repeat;
            float: left;
        }
        #product_image img {
            margin: 10px 0 0 11px;
            border: 1px solid #fff;
        }
        #product_price {
            margin: 13px 18px 0 0;
            font-size: 1.7em;
            color: #fff;
            text-align: right;
        }
        #product_detail {
            padding: 0 10px;
            float: right;
            width: 260px;
        }
        #product_detail h2 {
            color: #369;
            text-align: left;
            font-size: 1.4em;
        }

		/* social */
		#social {
			margin: 25px 10px 0 10px;
		}
		#facebook {
			float: right;
		}
		#twitter {
			float: right;
		}

    /* basket */

        table#basket {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #ddd;
        }
        table#basket th, table#basket td {
            padding: 5px;
            border-bottom: 1px solid #ddd;
        }
        table#basket thead th {
            background: #aaa; color: #fff;
            border: 1px solid #aaa;
        }

        table#basket td.price_col {
            width: 50px;
        }
        table#basket td.quantity_col {
            width: 70px;
        }
        table#basket td.options_col {
            width: 80px;
        }
        
    /* form table/layout */

        table.form_table {
            width: 100%;
            border-collapse: collapse;
        }
        table.form_table th, table.form_table td {
            padding: 3px 0;
        }
        table.form_table th {
            width: 120px;
            text-align: left;
        }
        table.form_table td {
            padding-right: 20px;
        }

    /* size guide */

        #size_guide {
            padding: 10px;
            width: 500px;
        }
        #size_guide * {
            text-align: left;
            font-family: Arial, Helvetica, Sans-Serif;
            font-size: 10px;
            text-transform: uppercase;
        }

        #size_guide ul {
            margin-bottom: 20px;
            list-style: none;
        }
        #size_guide ul li {
            margin: 0;
            padding: 0;
        }

        #size_guide table {
            border-collapse: collapse;
        }
        #size_guide table td, #size_guide table th {
            padding: 3px;
            border: 1px solid #ccc;
        }
        #size_guide table th {
            background: #666;
            color: #fff;
        }
        #size_guide table th.product_type {
            background: #369;
        }
        

        
