﻿/** Common Default Style Definitions 
  * SIP WEBSHOP.08 : Styleguide */


/** global */
body, div, table, th, tr, td, span, p, ul, li, a, select, textarea, img  
{
	margin: 0px; padding: 0px;
	border: none;
	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 */
}

input
{
	margin: 0px; padding: 0px;
	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 */	
}

form { padding: 0px; margin: 0px; }

ul { list-style-type: square; margin: 20px; }

/** text formats */
	
	/* 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; }
	.p_flow { line-height: 1.5em; }
	.vmiddle { vertical-align: middle; }
	
	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; }
	/* common headlines in XL */
	h6 { font-size: 14px; font-weight: bold; color: #000; margin: 0px; padding: 0px; }

/** 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: #fff; background: #000; }
	
	
	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: #fff !important; background: #000; }
	
	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: #fff; background: #000; }

	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: underline;
		color: #e2001a;
	}
	a.product:hover { color: #fff; text-decoration: underline; background: #000; }

	a.productThumb:link, a.productThumb:active, a.productThumb:visited, a.productThumb:focus, a.productThumb:hover 
	{
		background: none; cursor: pointer; text-decoration: none;
	}
	
	a.simple:link, a.simple:active, a.simple:visited, a.simple:focus, a.simple:hover { color: #000 !important; background: none !important; 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:link, a.menu_main_item:active, a.menu_main_item:visited, a.menu_main_item:focus, a.menu_main_item:hover,
		a.menu_main_item_active:link, a.menu_main_item_active:active, a.menu_main_item_active:visited, a.menu_main_item_active:focus, a.menu_main_item_active:hover
		{
			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-decoration: none;
		}
	
		a.menu_main_item:hover,
		a.menu_main_item_active:link, a.menu_main_item_active:active, a.menu_main_item_active:visited, a.menu_main_item_active:focus, a.menu_main_item_active:hover
		{
			background: url('Default_Images/shared/bgr_menu_main_item_hover.gif') top left repeat-x;
			color: #fff;
		}
		
		/* info button */
		a.menu_main_info:link, a.menu_main_info:active, a.menu_main_info:visited, a.menu_main_info:focus
		{
			width: 20px; height: 20px; float: left;
			margin: 3px 0px 0px 3px; padding: 0px;
			background: url('Default_Images/shared/menuButton_info.png') center center no-repeat;
		}
		a.menu_main_info:hover { background: url('Default_Images/shared/menuButton_info_hover.png') center center no-repeat; }
		
		/* user friendly logo link */
		div.userfriendly { width: 65px; height: 65px; position: absolute; margin-left: 898px; margin-top: 34px; }
		a.userfriendly { width: 65px; height: 65px; display: block; } 
		

	/* Menu: Sub */
	div.menu_sub 
	{
		width: 700px; height: 22px;
		position: absolute; top: 28px; left: 10px;
		clear: both;
	}

		a.menu_sub_item:link, a.menu_sub_item:active, a.menu_sub_item:visited, a.menu_sub_item:focus, a.menu_sub_item:hover,
		a.menu_sub_item_active:link, a.menu_sub_item_active:active, a.menu_sub_item_active:visited, a.menu_sub_item_active:focus, a.menu_sub_item_active:hover
		{
			height: 13px; float: left;
			margin: 3px 0px 2px 0px; padding: 2px 9px 2px 9px;
			background: url('Default_Images/shared/bgr_menu_sub_item.gif') top left no-repeat;
			font-size: 10px; color: #000;
			text-align: center; text-decoration: none;
		}
	
		a.menu_sub_item:hover,
		a.menu_sub_item_active:link, a.menu_sub_item_active:active, a.menu_sub_item_active:visited, a.menu_sub_item_active:focus, a.menu_sub_item_active:hover
		{
			color: #fff;
			background: #000;
		}


/** Main / Content Containers */
	div.main 
	{ 
		width: 980px;
		margin: auto;
		background: #fff;
		background: url('Default_Images/shared/bgr_main.gif') top left no-repeat;
	}
	
	.fl_left { float: left !important; }
	.fl_right { float: right !important; }
	.max_left { float: left !important; width: 100% !important; }
	.max_right { float: right !important; width: 100% !important; }

	/* Login + Logout + Account */
	div.account 
	{
		width: 660px; height: 28px;
		position: relative; top: 60px; left: 0px;
		clear: both;
		padding: 0px 0px 0px 10px;
		border-bottom: 1px dashed #aaa;
	}
	
		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 #333;
				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.breadcrumpFooter
	{
	    width: 725px; height: 15px; clear: both;
		float: left;
		margin: 0px 0px 3px 0px; padding: 0px 0px 0px 0px;
        border-bottom: 1px dashed #AAAAAA;
	}
	
	div.breadcrump 
	{
		width: 725px; height: 10px; clear: both;
		position: absolute;
		margin: 62px 0px 10px 0px; padding: 0px 0px 10px 10px;
		border-bottom: 1px solid #888;
	}
	span.breadcrumpLabel { width: 90px; float: left; margin: 0px 5px 0px 0px; }
	table.breadcrump { float: left; }
	table.breadcrump td { padding: 0px 10px 0px 10px; background: url('Default_Images/shared/breadcrump_dot.gif') center right no-repeat; }
	td.breadcrump_last { background: none !important; }
	td.breadcrump_last span { font-weight: bold; color: #000;}
	

	/* Content */
	div.content
	{ 
		width: 980px;
		position: relative;
		margin: 90px 0px 0px 0px;
	}

	/* Footer */
	div.footer { 
		width: 980px; float: left; clear: both;
		background: url('Default_Images/shared/bgr_footer.gif') bottom right no-repeat;
		margin: 12px 0 0 0; padding: 0; text-align: center;
	}

		div.footer_cp { width: 725px; float: left; text-align: left; padding: 5px 15px; display: inline; }
		div.footer_visitUs { width: 200px; float: right; text-align: right; display: inline; }
		div.footer_content { width: 965px; height: 63px; float: left; padding: 6px 0 0 15px; text-align: left; display: inline; }
		div.footer_imprint { width: 140px; float: left; display: inline; padding: 4px 0 0 0; line-height: 16px; }
		div.footer_payment { width: 160px; float: left; display: inline; padding: 4px 0 0 0; line-height: 16px; }
		div.footer_lang { width: 420px; float: left; display: inline; line-height: 18px; }
		div.footer_socNetworks { width: 230px; float: right; display: inline; }
		div.footer_DEAddHintsContainer { width: 700px; }
		div.footer_DEAddHints { width: 670px; margin: 15px; line-height: 15px; text-align: justify; }
		div.footer_DEAddHints_close { width: 20px; float: right; margin: 15px 10px 5px; }

/* 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; float: left;  margin: 0; padding: 0; }
        
        div.categoriesNav_main_dot { width: 20px; height: 20px; float: left; margin: 0; padding: 0; }
        
        div.categoriesNav_main_link  
        {
                width: 184px; float: right;
                padding: 2px 2px 2px 4px;
                border-bottom: 1px dashed #888;
        }        
        div.categoriesNav_main_link:hover { background: #000 !important; }
        div.categoriesNav_main_link:hover a { color: #fff !important; }
        div.categoriesNav_main_link a { font-size: 11px !important; text-decoration: none !important; }
        div.categoriesNav_main_link a:hover { text-decoration: underline; background: #000 !important; color: #fff !important; }

    /* sub, 2nd level */                
    div.categoriesNav_sub { width: 210px; float: left; margin: 0; padding: 0; }
        
        div.categoriesNav_sub_dot  
        {
            width: 28px; float: left;
            padding: 1px 0 1px 0;
            text-align: right; 
        }
        
        div.categoriesNav_sub_link { width: 174px; float: right; padding: 2px 2px 2px 4px; border-bottom: 1px solid #888; }
        div.categoriesNav_sub_link:hover { background: #000 !important; color: #fff !important; }        
        div.categoriesNav_sub_link:hover a { background: #000 !important; color: #fff !important; }        
        div.categoriesNav_sub_link a { font-size: 10px; text-decoration: none; }        
        div.categoriesNav_sub_link a:hover { text-decoration: underline; background: #000 !important; color: #fff !important; }        

        div.categoriesNav_sub_link_alt { width: 174px; float: right; padding: 2px 2px 2px 4px; background: #c8c8c8; border-bottom: 1px solid #888; }
        div.categoriesNav_sub_link_alt:hover { background: #000 !important; color: #fff !important; }        
        div.categoriesNav_sub_link_alt:hover a { background: #000 !important; color: #fff !important; }        
        div.categoriesNav_sub_link_alt a { font-size: 10px; text-decoration: none; }        
        div.categoriesNav_sub_link_alt a:hover { text-decoration: underline; background: #000 !important; color: #fff !important; }        


/* Content Columns / Containers */
	
	/* left sidebar (shop functions) */
	div.left_shopBar 
	{
		width: 230px; float: left;
		padding: 0px 8px 0px 0px;
	}
	
	/* mid content container */
	div.mid 
	{
		width: 490px; float: left;
		padding: 0 0 0 5px;
	}
	
	/* right sidebar (community functions) */
	div.right_communityBar 
	{
		width: 230px; float: right;
		padding: 0px 0px 0px 0px; margin: 0px;
	}
	
	/* 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_bannerPol { margin-top: 10px; }
				
		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_var3 { background: url('Default_Images/shared/bgr_contentBox_var3.gif') top left no-repeat; }
	.cBox_var4 { background: url('Default_Images/shared/bgr_contentBox_var4.gif') top left no-repeat; }
	.cBox_var4_footer  
	{
			width: 230px; height: 5px; float: left;
			background: url('Default_Images/shared/bgr_contentBox_var4.gif') bottom left no-repeat; }
	.cBox_var4 div.cBox_content { background: none; }

	
	.cBox_ProductCategories { width: 230px !important; float: left; margin: 0 !important; padding: 0 !important; }
	.cBox_ProductCategoriesContent { width: 218px !important; float: left; margin: 0 0 2px 6px !important; padding: 0 !important; display: inline !important; }
	
	.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-position: top left; background-repeat: 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-position: top left; background-repeat: 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-position: top left; background-repeat: no-repeat; }
	
        div.cBox_content_varCashPoints
        {
            width: 132px; height: 42px;
            margin: -18px 0px 0px 90px; padding: 0px 0px 20px 0px; line-height: 18px;
        }

	.cBox_varVimeo { margin: 10px 0 0 0; background-position: top left; background-repeat: no-repeat; }
	
        div.cBox_content_varVimeo
        {
            width: 170px; height: 170px;
            margin: 52px 0 10px 25px; padding: 10px;
        }
		#vimeo_badge_logo { margin: 4px 0 0 0; }
		#vimeo_badge_link:hover, .clip a:hover { background: none !important; }
		.clip .caption a:hover { background: #000 !important; }
		#videogallery a { color: #000 !important; }
		#videogallery a:hover { color: #fff !important; background: #000 !important; }

	.cBox_varFlickr { height: 260px; margin: 10px 0 0 0; background-position: top left; background-repeat: no-repeat; }
        
        div.cBox_varFlickr div h3 { margin: -3px 0 0 40px; font-size: 11px; }
        div.cBox_content_varFlickr { width: 222px; height: 156px; margin: 10px 0 0 4px; }
        div.cBox_content_varFlickr table tr td { border: 1px solid #fff; vertical-align: top; width: 72px; }
        div.cBox_content_varFlickr table tr.flickr_alterna td { border: none; border-right: 1px solid #fff; }
        
        span.flickr_desc { width: 214px; display: block; margin: 2px 0; padding: 3px; 
                           background: #fff; color: #000; font-size: 11px; line-height: 12px; }
		span.flickr_desc a { font-size: 11px; }                           
	
	/* common search box */
	div.searchBox 
	{
		width: 215px; float: left;
		margin: 15px 0px 0px 5px; padding: 1px 5px 0px 5px;
		border-top: 1px solid #888;
	}
		div.searchForm 
		{
			width: 220px; height: 24px; float: left;
			padding: 8px 0px 0px 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: 260px; 
		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: 360px; height: 200px;
        margin: 10px 10px 5px 0; 
        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; }
	
	
/** Error Pages **/
	div.error_common { border: 1px solid #e2001a; margin: 40px 40px 300px 40px; padding: 20px; }
	
	div.error_404 { border: 1px solid #e2001a; margin: 40px 40px 400px 40px; padding: 20px; }
