﻿/** Common Default Style Definitions 
  * SIP WEBSHOP.08 : Styleguide */


/** global */
body, div, table, th, tr, td, span, p, ul, li, a, input, select, textarea, img  
{	
	font-family: Verdana, Helvetica, Arial, Sans-Serif; font-size: 10px; 
	font-style: normal; font-weight: normal; font-variant: normal; text-decoration: none;
	color: #444; /* col_C */
}

body, div, table, th, tr, td, span, p, ul, li, a, img  
{
	margin: 0px; padding: 0px;
	border: none;
}

ul { list-style-type: square; margin: 20px; }

a.home_logoLink { width: 190px; height: 46px; float: left; margin: 2px 0px 0px 10px; }


	/* font colors */
	.col_A { color: #e2001a !important; }	    /* red		*/
	.col_B { color: #000 !important; }		    /* black	*/
	.col_C { color: #444 !important; }		    /* ...		*/
	.col_D { color: #666 !important; }		    /* ...		*/
	.col_E { color: #888 !important; }		    /* ...		*/
	.col_F { color: #e6e6e6 !important; }	    /* ...		*/
	.col_G { color: #f0f0f0 !important; }	    /* ...		*/
	.col_H { color: #fbfbfb !important; }	    /* ...		*/
	.col_I { color: #fff !important; }		    /* white	*/
	.col_J { color: #aaa !important; }		    /* for input borders only.. */
	.col_K { color: #3399ff !important; }	    /* validator background */
	.col_Error { color: #e2001a !important; }   /* validator error */
	
	/* text */
	.tF_sub { font-size: 9px; color: #444; }
	.tF_less { font-weight: normal; color: #666; }
	.tF_strong { font-weight: bold !important; color: #000 !important; }
	    a.tF_strong:hover { color: #fff !important; }
	.tF_bold { font-weight: bold; }
	
	.tF_upperCase { text-transform: uppercase; }
	.tF_normCase { text-transform: none !important; }
	
	.tF_sizeUp { font-size: 11px !important; }
	.tF_sizeUp2 { font-size: 12px !important; }
	.tF_sizeUp3 { font-size: 13px !important; }
	.tF_sizeUp4 { font-size: 14px !important; }	
	.tF_sizeNorm { font-size: 10px !important; }
	.tF_sizeDown { font-size: 9px !important; }	
	
	/* formatting paragraphs */
	.p_center { text-align: center !important; }
	.p_right { text-align: right !important; }
	.p_left { text-align: left !important; }
	.p_justify { text-align: justify; }
	.p_block { display: block; }
	.vmiddle { vertical-align: middle; }
	.vtop { vertical-align: top; }
	
	input.error { background: #fffacd !important; }

/** headlines */
	
	/* product title */
	h1 { font-size: 12px; font-weight: bold; color: #000; /*text-transform: uppercase;*/ margin: 0px 0px 6px 0px; } 
	/* product subtitle */
	h2 { font-size: 10px; font-weight: bold; color: #666; margin: 0px 0px 8px 0px; }
	/* content boxes headlines */
	h3 { font-size: 10px; color: #000; }
	/* static titles */
	h4 { font-size: 12px; font-weight: bold; color: #000; text-transform: uppercase; }
	/* common headlines (user wherever you want to) */
	h5 { font-size: 10px; font-weight: bold; color: #444; text-transform: uppercase; }

/** links */

	a:link, a:active, a:visited, a:focus 
	{
		font-family: Verdana, Helvetica, Arial, Sans-Serif; font-size: 10px;
		font-style: normal; font-weight: normal; text-decoration: underline;
		color: #000;
		background: none;
	}
	a:hover { text-decoration: none; color: #000; background: #f0f0f0; }
	
	
	a.strong:link, a.strong:active, a.strong:visited, a.strong:focus 
	{
		font-family: Verdana, Helvetica, Arial, Sans-Serif; font-size: 10px;
		font-style: normal; font-weight: normal; text-decoration: underline;
		color: #e2001a;
	}
	a.strong:hover { text-decoration: none; color: #000; background: none; }
	
	a.homeNews:link, a.homeNews:active, a.homeNews:visited, a.homeNews:focus 
	{
		font-family: Verdana, Helvetica, Arial, Sans-Serif; font-size: 12px;
		font-style: normal; font-weight: bold; text-decoration: underline; text-transform: uppercase;
		color: #000; background: none;
	}
	a.homeNews:hover { text-decoration: none; color: #000; background: #e2001a; }

	a.resultsShowAll:link, a.resultsShowAll:active, a.resultsShowAll:visited, a.resultsShowAll:focus 
	{
		font-family: Verdana, Helvetica, Arial, Sans-Serif; font-size: 12px;
		font-style: normal; font-weight: bold; text-decoration: underline;
		color: #000; background: none;
	}
	a.resultsShowAll:hover { text-decoration: none; color: #000; background: #e2001a; }

	a.product:link, a.product:active, a.product:visited, a.product:focus 
	{
		font-family: Verdana, Helvetica, Arial, Sans-Serif; font-size: 10px;
		font-style: normal; font-weight: normal; text-decoration: none;
		color: #e2001a;
	}
	a.product:hover { color: #000; text-decoration: underline; background: none; }

	a.productThumb:link, a.productThumb:active, a.productThumb:visited, a.productThumb:focus, a.productThumb:hover 
	{
		background: none; cursor: pointer; text-decoration: none;
	}
	
	a.simple { background: none; text-decoration: none; }
 

/** inputs & forms & validators */
	input.input , textarea.input, select.input {
		margin: 3px 2px 5px 2px; padding: 2px;
		border: 1px solid #333;
		font-size: 10px; color: #000; text-transform: none; 
		vertical-align: middle;				
	}
	
	img.validateHelper { cursor: pointer; }


/** Menu Containers */
	/* Menu: Dimensions */
	div.menu_dimensions
	{
		width: 320px; height: 54px;
		margin: 0px 0px 0px 300px;
	}
	
	table.menu_dimensions { width: 320px; float: left; }
	td.menu_dimensions { width: 74px; height: 48px; border-right: 1px dashed #666; text-align: center; }
	td.menu_dimensions_selected { width: 98px; height: 48px; text-align: center; }
	
		td.menu_dimensions img { margin: 0px 0px 4px 0px; }
	
	/* Menu */
	div.menu 
	{
		width: 760px; height: 55px; 
		position: absolute;
	}
	
	/* Menu: Main */
	div.menu_main
	{
		width: 560px; height: 52px;
		position: absolute;
		margin: 0px 0px 0px 176px;
	}
	
		a.menu_main_item, a.menu_main_item:hover, a.menu_main_item_active
		{
			height: 46px; float: left;
			padding: 7px 12px 0px 12px;
			background: url('Default_Images/shared/bgr_menu_main_item.gif') top left no-repeat;
			font-size: 11px; color: #e6e6e6;
			text-align: center; text-transform: uppercase; text-decoration: none;
		}
	
		a.menu_main_item:hover, a.menu_main_item_active
		{
			background: url('Default_Images/shared/bgr_menu_main_item_hover.gif') top left repeat-x;
			color: #000;
		}

	/* Menu: Sub */
	div.menu_sub 
	{
		width: 660px; height: 22px;
		position: absolute; top: 28px; left: 10px;
		clear: both;
	}

		a.menu_sub_item, a.menu_sub_item:hover, a.menu_sub_item_active
		{
			height: 13px; float: left;
			margin: 3px 0px 2px 0px; padding: 2px 14px 2px 14px;
			background: url('Default_Images/shared/bgr_menu_sub_item.gif') top left no-repeat;
			font-size: 10px; color: #444;
			text-align: center; text-decoration: none;
		}
	
		a.menu_sub_item:hover, a.menu_sub_item_active
		{
			color: #000000;
			background: #f5f5f5;
		}


/** Main / Content Containers */
	div.main 
	{ 
		width: 980px;
		margin: auto;
		background: #fff;
		background: url('Default_Images/shared/bgr_main.gif') top left no-repeat;
	}


	/* Login + Logout + Account */
	div.account 
	{
		width: 660px; height: 28px;
		position: relative; top: 60px; left: 10px;
		clear: both;
	}
	
		div.account_useronline { width: 122px; height: 15px; float: left; padding: 5px 0px 6px 0px; }
		div.account_logInOut { width: 530px; height: 20px;	float: right; padding: 0px 0px 6px 0px; }
		div.account_loggedIn { height: 15px; padding: 6px 0px 6px 0px; }
		
			div.account_logInOut input 
			{
				width: 100px;
				margin: 3px 0px 5px 2px; padding: 2px;
				border: 1px solid #aaa;
				font-size: 10px; color: #000; text-transform: none; 
				vertical-align: middle;
			}
			
			div.account_logInOut input[type=checkbox]
			{
				width: auto;
				border: none;
				margin: 2px;				
			}
			

	/* Breadcrump */
	div.breadcrump 
	{
		width: 660px; height: auto; position: absolute;
		margin: 62px 0 10px 0; padding: 6px 0;
		border-bottom: 1px solid #888;
		clear: both;
	}
	span.breadcrumpLabel { width: 90px; float: left; margin: 0 5px 0 0; }

	/* Content  */
	div.content
	{ 
		width: 980px; 
		position: relative;
		margin: 90px 0px 0px 0px;
	}

	/* Footer  */
	div.footer
	{ 
		width: 980px; height: 18px;
		margin: 2px 0px 8px 0px; padding: 16px 0px 6px 0px;
		text-align: center;
		clear: both;
	}


/* Loader */

        /* home: news */        
        div.loader_galleryBoxes_3
        {
            width: 486px; height: 96px;
            margin: 0px; padding: 60px 0px 0px 0px; text-align: center;
            border: 1px solid #e6e6e6;	        
        }
        
        div.loader { width: 100%; height: 40px; background: url('Default_Images/shared/loading.gif') center center no-repeat; }
        
        
/* Product Categories Navigator */
    
    /* main, 1st level */
    div.categoriesNav_main { width: 210px; margin: 0px 0px 3px 0px; float: left; }
        
        div.categoriesNav_main_dot { width: 20px; height: 20px; float: left; }
        
        div.categoriesNav_main_link  
        {
                width: 184px; float: right;
                padding: 3px 2px 4px 4px;
                border-bottom: 1px dashed #e6e6e6;
        }        
        div.categoriesNav_main_link:hover { background: #e6e6e6; }
        div.categoriesNav_main_link a { font-size: 11px; text-decoration: none; }
        div.categoriesNav_main_link a:hover { text-decoration: underline; background: none; }

    /* sub, 2nd level */                
    div.categoriesNav_sub  
    {
        width: 210px; float: left;
        margin: 0px; padding: 1px 0px 1px 0px; 
    }
        
        div.categoriesNav_sub_dot  
        {
            width: 28px; float: left;
            padding: 3px 0px 3px 0px;
            text-align: right; 
        }
        
        div.categoriesNav_sub_link { width: 174px; float: right; padding: 3px 2px 3px 4px; }
        div.categoriesNav_sub_link:hover { background: #e6e6e6; }        
        div.categoriesNav_sub_link a { font-size: 10px; text-decoration: none; }        
        div.categoriesNav_sub_link a:hover { text-decoration: underline; background: none; }        


/* Content Columns / Containers */
	
	/* left sidebar (shop functions) */
	div.left_shopBar 
	{
		width: 230px; float: left;
		padding: 0px 15px 0px 0px;
	}
	
	/* mid content container */
	div.mid 
	{
		width: 490px; float: left;
		padding: 0px;
	}
	
	/* right sidebar (community functions) */
	div.right_communityBar 
	{
		width: 230px; float: right;
		padding: 0px 0px 0px 15px;
	}
	
	/* common content box */
	div.cBox 
	{
		width: 230px; float: left;
		padding: 0px 0px 2px 0px;
		text-align: left;
	}
	
		div.cBox_header 
		{
			height: 20px; 
			padding: 19px 0px 6px 8px; 
			color: #000; font-weight: bold; text-transform: uppercase; font-size: 11px;
		}
		
		div.cBox_header img { vertical-align: middle; margin: 0px 2px 0px 0px; }

		div.cBox_content 
		{
			margin: 0px 5px 0px 8px;
			padding: 6px;
			background: #fbfbfb;
		}
				
		div.cBox_subHeader 
		{
			height: 20px; 
			padding: 9px 0px 6px 8px; 
			color: #000; font-weight: bold; text-transform: uppercase; font-size: 11px;
		}

		div.cBox_subHeader img { vertical-align: middle; }
	
	/* content boxes variations */
	.cBox_var1 
	{
		background: url('Default_Images/shared/bgr_contentBox_var1.gif') top left no-repeat;
	}

	.cBox_var2 
	{
		background: url('Default_Images/shared/bgr_contentBox_var1.gif') top left no-repeat #f0f0f0;
	}
	
	.cBox_varSecurity
	{
		margin: 10px 0px 5px 0px;
		background: url('Default_Images/shared/bgr_contentBox_varSecurity.gif') top left no-repeat;
	}
	
	    div.cBox_content_varSecurity 
	    {
            margin: 16px 5px 0px 8px; padding: 6px; line-height: 18px;
			background: #fbfbfb;
	    }
	
	.cBox_varPodcasts 
	{
	    margin: 10px 0px 0px 0px;
		background: url('Default_Images/DE/bgr_contentBox_varPodcasts.gif') top left no-repeat;
	}
	
        div.cBox_content_varPodcasts 
        {
            width: 190px; height: 42px; 
            margin: 0px 0px 0px 20px; padding: 5px 0px 10px 0px; line-height: 18px;
        }

	.cBox_varCatalogue 
	{
	    margin: 10px 0px 0px 0px;
		background: url('Default_Images/DE/bgr_contentBox_varCatalogue.gif') top left no-repeat;
	}
	
        div.cBox_content_varCatalogue
        {
            width: 190px; height: 42px; 
            margin: 8px 0px 0px 20px; padding: 5px 0px 10px 0px; line-height: 18px;
        }
        	
	.cBox_varCashPoints 
	{
	    margin: 10px 0px 0px 0px;
		background: url('Default_Images/DE/bgr_contentBox_varCashPoints.gif') top left no-repeat;
	}
	
        div.cBox_content_varCashPoints
        {
            width: 150px; height: 42px; 
            margin: -18px 0px 0px 94px; padding: 0px 0px 20px 0px; line-height: 18px;
        }
	
	/* common search box */
	div.searchBox 
	{
		width: 220px; height: 44px;
		padding: 0px 3px 0px 7px;
		background: url('Default_Images/shared/bgr_searchBox.gif') top left no-repeat;
	}
		div.searchForm 
		{
			width: 220px; height: 24px; float: left;
			padding: 7px 0px 5px 0px;
		}
		
		input.searchField
		{
			width: 134px; height: 17px; vertical-align: top;
			padding: 2px 4px 2px 4px;
			border: 1px solid #000;
			background: #fff;
			font-size: 13px; font-weight: bold; color: #000;
		}

		input.searchButton { }
		
		
		div.profSearch 
		{
			width: 66px; height: 24px; float: right;
			padding: 9px 0px 10px 0px;
			vertical-align: top;
		}

/** Stockgraph Legend **/
	table.stockgraph_legend { background: #fff; border: 1px solid #e5e5e5; }
	
	div.stockgraph_legend  
	{
		width: 380px; height: 240px; 
		padding: 10px; 
		background: url('Default_Images/shared/bgr_contentBox_details_eMail.gif') top left no-repeat #f0f0f0 !important;
	}
	
	div.stockgraph_legend div { padding: 0px 0px 0px 10px; }
	
	div.stockgraph_legend div table 
	{ 
		width: 350px; height: 160px;
        margin: 10px 10px 5px 0px; 
        border: 1px dashed #aaa;
	}
	
	div.stockgraph_legend div table td { vertical-align: middle; }
	
/** Basket Totalisator **/
	table.basketTotalisator { width: 205px; }
	div.basketTotalisator { width: 190px; margin: 4px 0px 8px 0px; padding: 0px 5px 0px 10px; }
	div.basketTotalisator_toCheckout  
	{
			width: 190px; 
			padding: 8px 5px 0px 10px; margin: 4px 0px 4px 0px;
			border-top: 1px dashed #888;  
	}
	div.basketTotalisator_toCheckout img { vertical-align: middle; margin: 0px 6px 0px 0px; }
	
/** Notepad  (in shop bar) **/
	div.notepadTotalisator { width: 190px; margin: 4px 0px 8px 0px; padding: 0px 5px 0px 10px; }
	
	
	
	div.price5 { text-align: right; }
