@import "tables.css";
@import "forms.css";

/* Color codes:
 * ----------------
 * Dark:    #562972
 *          #8F759F
 *          #CABAD4
 * Light:   #F1E5F8 
 */

/* General layout for standard HTML tags and classes */
body {
	margin: 0; 
	font-family: Verdana, Helvetica, Sans-Serif; 
	font-size: 0.7em; 
	color: #000; 
	background: #FFF;
}
a:link, a:visited {
	color: #562972; text-decoration: underline;
}
a:hover { 
	color: #562972; text-decoration: none;
}
h1		{ font-size: x-large; color: #562972; font-weight: normal; }
h2		{ font-size: large; color: #562972; font-weight: normal; }
h3		{ font-size: 1.3em; margin-bottom: 5px; }
h4		{ font-size: small; margin: 5px auto 3px auto; }

img     { border: 0; }
pre
{ 
    padding: 5px;
    color: #333;
    background: #EEE; 
    border: solid 1px #CCC;
    font-size: 8pt;
}
tt
{
    color: #666;
    font-size: 8pt;
}
label   { cursor: pointer; }

/* Custom classes generally used */
.note
{
    font-style: italic;
    font-size: smaller;
    color: #999;
}
.b			 { font-weight: bold; }
.r			 { text-align: right; }
.l			 { text-align: left; }
.floatleft   { float: left;  margin: 10px 10px 10px 0; }
.floatright  { float: right; margin: 10px 0 10px 10px; }
.floatl      { float: left; }
.floatr      { float: right; }
ul.error     { list-style-image: url("../img/ico_error.gif"); }
ul.info      { list-style-image: url("../img/ico_info.gif"); }
.url         { font-family: Courier New, Sans-Serif; }

blockquote    
{ 
    color: #666;
    font-style: italic;
}
blockquote:before, blockquote:after 
{
    color: #C0C0C0;
    display: block;
    font-size: 6em;
    font-family: Garamond; font-weight: bold;
    width: 50px;
}
blockquote:before 
{
    content: open-quote;
    height: 15px;
    margin-left: -0.8em;
}
blockquote:after 
{
    content: close-quote;
    margin-top: -0.4em;   
    margin-left: 100%;
}

.address .header { font-weight: bold; }
.address div	 { margin-bottom: 0.4em; }

.empty			 { display: block; font-style: italic; }

.icon
{
	display: inline-block;
	background: url("../img/sprites/icons.png") no-repeat;
	width: 16px;
	height: 16px;
}
.iconBasket  { background-position: 0 -380px; }
.iconBasketAdd  { background-position: 0 -400px; }
.iconTel { background-position: 2px -158px; }
.iconMail { background-position: 1px -176px; }
.iconImgLarge, .iconImgPrint, .iconImgPackshot, .iconImgTechnical { width: 10px; height: 10px; }
.iconImgLarge { background-position: 0 -120px; }
.iconImgPrint { background-position: 0 -80px; }
.iconImgPackshot { background-position: 0 -140px; }
.iconImgTechnical { background-position: 0 -100px; }
.iconPrint, .iconSupport, .iconHotline, .iconProductInfo  { width: 20px; height: 20px; }
.iconPrint { background-position: 0 -280px; }
.iconSupport { background-position: 0 -300px; }
.iconHotline  { background-position: 0 -320px; }
.iconProductInfo  { background-position: 0 -340px; }
.iconFacebook { background-position: 0 -460px; }


/* Box with rounded corners, requires an internal box for each corner */
.roundedCorners, .roundedCorners .topRight, .roundedCorners .bottomLeft, .roundedCorners .bottomRight
{
	background-color: Transparent;
	background-image: url("../img/sprites/corners.png");
	background-repeat: no-repeat;
}
.roundedCorners .topRight { background-position: right top; }
.roundedCorners .bottomLeft { background-position: left bottom; }
.roundedCorners .bottomRight { background-position: right bottom; }


/* Flag sprites */
/* ------------ */
.flags span 
{ 
	display: inline-block; 
	width: 21px; height: 15px; 
	vertical-align: middle;
	background: url("../img/flags.png") no-repeat;
}
.flags .da-DK	{ background-position: -90px -20px; }
.flags .de-AT	{ background-position: 0 0; }
.flags .de-CH	{ background-position: -60px 0; }
.flags .de-DE	{ background-position: -90px 0; }
.flags .en-AU	{ background-position: 0 -20px; }
.flags .en-GB	{ background-position: -180px 0; }
.flags .en-IE	{ background-position: -240px 0; }
.flags .en-US	{ background-position: -600px -20px; }
.flags .es-ES	{ background-position: -120px 0; }
.flags .et-ET	{ background-position: -120px -20px; }
.flags .fi-FI	{ background-position: -150px 0; }
.flags .fo-FO	{ background-position: -150px -20px; }
.flags .fr-FR	{ background-position: -150px -40px; }
.flags .fr-LU	{ background-position: -330px -20px; }
.flags .it-IT	{ background-position: -240px -20px; }
.flags .lt-LT	{ background-position: -330px 0; }
.flags .lv-LV	{ background-position: -330px -40px; }
.flags .nl-BE	{ background-position: -30px 0; }
.flags .nl-NL	{ background-position: -390px 0; }
.flags .no-NO	{ background-position: -390px -20px; }
.flags .pl-PL	{ background-position: -450px 0; }
.flags .pt-PT	{ background-position: -450px -20px; }
.flags .ru-RU	{ background-position: -510px 0; }
.flags .sr-SP	{ background-position: -540px -20px; }
.flags .sv-SE	{ background-position: -540px 0; }
.flags .tr-TR	{ background-position: -570px 0; }
.flags .uk-UK	{ background-position: -600px 0; }



/* Page header (inc. language info) */
/* -------------------------------- */
#header 
{
    width: 100%; 
    height: 60px;
    background: #562972 url("../img/sprites/fade_horizontal.png") repeat-x top left; 
}
#header .logo { float: left; margin: 8px 0 0 8px; }

#header #localization
{
    float: right;
 	width: 22em;
 	height: 100%;
    background: url("../img/backgrounds/bg_header.gif") no-repeat top right; 
}
#header #localization .language 
{
    float: right;
    margin: 5px;
    padding: 5px; 
    width: 16em;
    color: #F1E5F8; 
    border-left: dotted 1px #ECCE05;
    text-transform: capitalize;
    display: block;
    text-decoration: none;
}
#header #localization .language:hover 
{
    color: #FFF;
    border-left: 1px solid #ECCE05;
    text-decoration: none;
}
#header #localization .language .flags
{
    float: right;
    margin-top: 2px;
    border: 1px solid #F1E5F8;
}
#loginForm
{
	position: absolute;
	right: 18em;
	padding-top: 2px;
    color: #F1E5F8; 
}
#loginForm a:link, #loginForm a:visited
{
	text-transform: uppercase;
	font-weight: bold;
	color: #F1E5F8;
	font-size: smaller;
}
#loginForm .header td
{
	padding-bottom: 1px;
}
#loginForm .header, #loginForm .footer 
{
	font-size: smaller;
	color: #8F759F;
	text-transform: lowercase;
}
#loginForm .info
{
	margin-top: 8px;
	text-align: right;
}
#loginForm .info .name
{
	display: block;
	margin-bottom: 5px;
}


/* Top (black) menu, just beneath the header and logo */
/* -------------------------------------------------- */
div#topmenu {
    position: absolute;
	width: 100%; height: 20px;
	top: 60px; bottom: auto;
	color: #CCC; font-weight: bold; text-transform: uppercase;
	font-size: 1.1em;
	background: #000;
    border-top: 1px solid #ECCE05;
    border-bottom: 1px solid #999;
}
div#topmenu #quotes {
    position: absolute; top: 2px; left: 5px;
    padding-right: 15px;
    border-right: 1px solid #666;
    text-transform: none; font-weight: normal; color: #999;
}
/* Horizontal navigation */
div#topmenu ul {
    position: absolute;
	top: 2px; right: 0;
	list-style: auto; margin: 0; padding: 0;
}
div#topmenu ul a, div#topmenu ul li {
    display: block; float: left;
    color: #CCC; text-decoration: none;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
div#topmenu ul a { float: none; }
/* End IE5-Mac hack */
div#topmenu li              { padding: 0 10px 0 10px; }
div#topmenu li.extlink a    { color: #999; text-decoration: none; }
div#topmenu li a:hover      { color: #FFF; }

/* So far just an empty bar for color */
div#fadebar {
    position: absolute;
    width: 100%; height: 15px;
    top: 82px; left: 0; right: 0;
    background: #CABAD4 url("../img/sprites/fade_horizontal.png") repeat-x 0 -100px; 
    border-bottom: 1px solid #8F759F;
}


/* Leftmost menu, containing the sub navigation for current page */
table#main 
{
    position: absolute;
    top: 98px;
}
img.menutop 
{
    position: absolute;
    top: 88px; left: 0px;
    z-index: 2;
}
table#main td#leftmenu {
    width: 200px;
    padding: 0;
    background: #EEE; border-right: 1px solid #CCC;
}
table#main td#leftmenu a {
    color: #000; font-weight: bold; text-decoration: none;
}
table#main td#leftmenu .headline 
{
    display: block;
    padding: 0 10px 0 10px;
    color: #FFF; font-size: large; font-weight: bold;
    background: #AC97B9;
}
table#main td#leftmenu .info 
{
    display: block;
    padding: 0 10px 10px 10px;
    color: #FFF;
    background: #AC97B9;
    font-weight: normal;
    font-style: italic;
}

/* Begin left main menu
 * Using <li>'s for better organization of code
 * in narrating/alternative browsers
 */
table#main div#mainmenu {
    width: 200px;
}
table#main div#mainmenu ul {
    margin: 0; padding: 0;
    list-style: none;
}
table#main div#mainmenu a {
    display: block;
	width: 186px;
	padding: 6px 4px 6px 10px;
	border-top: 1px solid #CCC;
	background: #FFF url("../img/sprites/fade_horizontal.png") repeat-x 0 -120px;
}
table#main div#mainmenu a:hover {
    background: #F1E5F8;
}
table#main div#mainmenu ul ul a {
	width: 185px;
	padding: 3px 0 5px 15px;
	border-top: 0;
	background: #FFF;
	font-weight: normal;
}
table#main div#mainmenu ul ul a:hover {
    background: #F1E5F8;
}
/* End of left menu */


table#main td#leftmenu div.menuitem img {
 background: #562972;
}

table#main td#leftmenu div#search {
 background: #F1E5F8;
 padding: 10px 10px 15px 10px;
 border-top: 3px solid #8F759F; border-bottom: 1px solid #8F759F;
}

table#main td#leftmenu div#search div.headline {
 padding: 0 0 10px 0;
 background: #F1E5F8;
 color: #000000; font-size: medium; font-weight: bold;
}

table#main td#leftmenu div#search a {
 color: #562972; font-weight: normal; text-decoration: underline;
}

/* SiteMapPath text layout */
table#main .sitemappath     { font-size: x-small; color: #666; }
table#main .sitemappath a   { color: #666666; }


/* Specification of the central content area */
table#main td#content       { padding: 20px; }


/* Here beginth the rightmost menu */
/* ------------------------------- */
#rightmenu 
{
    width: 18%; 
    font-size: x-small; 
    border-left: 1px dotted #CCC;
    background: #FFF url("../img/backgrounds/bg_rightmenu.gif") no-repeat top right;
}
#rightmenu a       { text-decoration: none; }
#rightmenu a:hover { text-decoration: underline; }
#rightmenu .box 
{ 
	padding: 5px 5px 5px 10px;
}
#rightmenu .box .header 
{
    margin-bottom: 5px; 
    line-height: 15pt;
    color: #333; font-size: larger; font-weight: bold;
    border-bottom: dotted 1px #ecce05;
}
#rightmenu .box .description { margin: 5px 0; }
#rightmenu .box ul
{ 
    list-style: none; 
    padding: 0; 
    margin: 0;
} 
#rightmenu .box ul li { margin-bottom: 3px; } 
#rightmenu .icon { float: left; margin: 0 0.5em 0 0; } 


#footer 
{
    padding: 5px;
    border-top: solid 1px #a3a7b2;
    background: #FFF url("../img/sprites/fade_horizontal.png") repeat-x 0 -119px;
    text-align: center;
    font-size: xx-small;
    color: #C0C0C0;
}
#footer a          { color: #CCC; }
#footer a:hover    { color: #999; }



/* Search field used in prim and support search */
/* -------------------------------------------- */
table#main #content .search                     
{ 
    padding-top: 1em;
    text-align: center; 
    width: 394px;
    height: 70px;
    background: url(../img/backgrounds/bg_search.gif) no-repeat top left; 
}
table#main #content .search .description
{
    display: block;
    float: left;
    margin: 3px;
    padding-left: 50px;
    width: 250px;
    text-align: left;
    font-size: x-small;
    color: #666;
}


table.contactform          
{
    padding: 0.5em;
    border-top: dotted 1px #C0C0C0; 
    width: 100%; 
}
table.contactform .lc      { width: 10em; }
table.contactform th       { text-align: left; font-weight: bold; }
table.contactform optgroup { font-family: Verdana; font-style: normal; }


/* Basket shown in right menu */
/* -------------------------- */
#basket
{
	background-color: #F2F0D8;
	border-bottom: dotted 1px #CCC;
}
#basket .header			{ position: relative; }
#basket .header .icon   { position: absolute; top: 2px; right: 0; }
#basket a				{ text-decoration: underline; }
#basket a:hover			{ text-decoration: none; }
#basket table td		{ border-bottom: none; padding: 1px; }
#basket table .quantity	{ width: 1em; }
#basket .footer
{
	border-top: 1px dotted #ecce05;
	margin-top: 0.6em;
	padding: 0.2em 0;
}
#basket .footer a
{
	font-weight: bold;
}



/* PAGES: Styles specific to various sub-pages */
/* ------------------------------------------- */
/* order.aspx */
.customers
{
	width: 100%;
	border-top: solid 2px #8F759F;
	border-bottom: solid 2px #8F759F;
}
.customers td { padding: 2px; }
.customers .details { width: 430px; padding: 8px 2px; }
.customers .details .empty { text-align: center; }
.customers .logo
{
	float: left;
	width: 180px;
	padding-right: 1em;
	text-align: center;
}
.customers .address { float: left; width: 20em; }
.customers .select { background-color: #F1E5F8; }
.customers .select input { vertical-align: bottom; }
.footer { text-align: right; }