@CHARSET "ISO-8859-1";

/*
 * basic colors:
 *
 * lightest gray: e4e4e4
 * light grey    : ccc
 * medium grey  : 999
 * dark gray    : 666
 * v. dark gray : 333
 * black        : 000
 * red            : f00
 *
 */

/* basic tags */
html, body          { height: 100%; }
body                 { background-color: #000; color: #fff; padding: 0px; margin: 0px; }
body, p, td         { font-family: Arial,Helvetica; font-size: 12px; }
img                 { margin: 0px; padding: 0px; border: 0px; }
h2                  { color: #f00; margin: 18px 0px 12px 0px; }
h3, h4              { color: #ff0; margin: 3px 0px 3px 0px; }
ul                  { list-style: none; margin: 0px; padding: 0px; }
ul ul, ol ol,
ol ul, ul ol        { padding: 6px 0px 6px 24px; font-size: 12px; }
ul li, ol li        { padding-bottom: 2px; }
strong				{ font-weight: bold; font-style: italic; }
hr					{ height: 1px; border: none; background-color: #555; }
/* links */

a,
a:link,
a:active,
a:hover,
a:visited           { color: #f00; text-decoration: none; }
a.current,
a:hover             { text-decoration: underline; }

a.selected          { text-decoration: none !important; border-bottom: 1px dashed #f00; }
	
/* forms */
button, input, select       
					{ padding: 3px; border: 1px #666 solid; margin-right: 10px; margin-bottom: 2px; }
select              { padding: 2px; }
input.button        { padding: 2px; border-width: 1px; margin: 0px; }
input.image         { padding: 3px; border-width: 0px; margin: 0px; }
button.main,
input.main          { padding: 1px; border-width: 2px; margin: 0px; font-weight: 600; }
input.highlight     { color: #fff; background: #f00; }
fieldset            { margin: 0 0 5px 0; border: 1px solid #555; padding: 8px; }
div.formsection-double,
div.formsection     { width: 372px; margin: 18px 6px 0px 0px; float: left; }
div.formsection-double     
					{ width: 750px; clear: left; float: none; }
div.formsection input,
div.formsection select
                    { width: 170px }
div.formsection-double legend,
div.formsection legend    
					{ font-size: 117%; color: #f00; padding: 0 6px 0 6px; font-style: italic; }
					
div.formsection input, 
div.formsection select	{
	margin-right: 0px;
	width: 184px;
}

/* classes */
.readonly			{ border: 1px solid #333; background-color: transparent; color: #ddd; font-style: italic; }
.seonly             { display: none; }
.disclaimer         { width: 300px; color: #000; font-weight: bold; margin-bottom: 0px; padding-bottom: 10px; }
.large              { font-size: 1.4em; }
.padding            { padding: 0 12px 0 12px; }
.label              { display: inline-block; width: 120px; }
.label.wide         { width: 160px; }
.label.verywide     { width: 320px; }
.label.ultrawide    { width: 600px; }
.warning            { color: #f00; font-style: italic; }
.success            { color: #0f0; font-style: italic; }
.bold               { font-weight: 600; }
.hint               { font-style: italic; font-size: 87%; }
.highlight          { color: #f00; }
.addthis img        { vertical-align: middle; padding-bottom: 2px; }
body #at15s		    { position: fixed !important; }

/* page header layout */
#pagehead             { position: fixed; top: 0; height: 120px; width: 100%; z-index: 10; background: #ccc url(../img/arabesk_bg.gif) no-repeat; padding-left: 125px; }
#newsflash            { height: 90px; }
h1.headline           { display: none; }
#headline                      { height: 30px; margin: 0px; padding: 0px; }
#headline div                  { float: left; height: 30px; background-repeat: no-repeat; }
#headline .headline.crumb      { margin: 0px 6px 0px 6px; }
#headline .headline.crumb span { font-weight: normal; line-height: 32px; font-size: 22px; }
#headline a:hover     { text-decoration: none; }
#headline .headline.customer .name.seonly,
#headline .headline.route    .name.seonly,
#headline .headline.links    .name.seonly,
#headline .headline.funpages .name.seonly,
#headline .headline.tplpage  .name.seonly,
#headline .headline.tplpage  .seonly
	                { display: inline; padding-left: 4px; font-size: 28px; line-height: 29px; font-weight: normal; text-transform: uppercase; }
#headline .headline.tplpage  .seonly
	                {  text-transform: none !important; }
/* user site controls: basket, login, language switchers links */
#usrControls        { position: fixed; right: 0px; z-index: 11; padding: 10px; line-height: 15px; }
#usrControls div    { float: right; }
#langSwitch         { padding-left: 10px; }
#langSwitch a       { text-decoration: none; margin-left: 5px; }
#langSwitch a img   { height: 15px; }
.basketLink         { background: url(../img/icon_cart.gif) no-repeat 0px 0px; padding-left: 20px; }

/* main menu */
#pagemenu              { position: fixed; height: 100%; top: 120px; width: 125px; background-color: #ccc; text-align: right; overflow: scroll; }
#pagemenu ul        { list-style-type: none; padding: 0px; font-size: 13px; }
#pagemenu li        { margin-top: 10px; }
#pagemenu li a:link,
#pagemenu li a:visited,
#pagemenu li a:hover,
#pagemenu li a:active
                    { margin-top: 10px; text-decoration: none; color: #000; border-bottom: none; }
#pagemenu li a:hover,
#pagemenu li a.selected
                    { color: #f00; }
#pagemenu ul,
#pagemenu div       { margin: 12px 12px 0px 0px; }
#pagemenu div       { color: #000; font-size: 10px; line-height: 1.2em; }

/* content area */
#pagemain           { position: absolute; top: 120px; left: 0px; background: none; width: 100%; }
#pagemainwrapper    { padding: 10px 18px 18px 138px; background: none; }

/* listheader has strange relationship with pagemainwrapper */
.listheader          { background-color: #000; position: fixed; z-index: 5; width: 100%; height: 32px; line-height: 32px; padding-left: 18px; border-bottom: 1px #333 solid; }
.listheader h2       { margin-bottom: 0px; }
.listheader .addthis { position: absolute; right: 148px; }

/* site section specific styles */
body#home           { background: #000 url(../img/squares_bg.gif) repeat-y fixed 125px 0px;    }
body#catalog        { background: #000 url(../img/squares_bg.gif) repeat-y fixed 360px 0px;   }
body#catalog.cats   { background: #000 url(../img/redsquares_bg.gif) repeat-y fixed 360px 0px;    }

body#home           #pagemainwrapper                { padding: 0 0 0 125px; }
body#catalog        #pagemainwrapper,
body#catalog.cats   #pagemainwrapper                { }
body#catalog.list   #pagemainwrapper,
body#search         #pagemainwrapper                { padding: 0 0 0 125px; }
body#catalog.prod   #pagemainwrapper                { padding-top: 0; padding-right: 0px; }
body#catalog #pagemainwrapper ul.catlist            { padding-top: 12px; min-height: 360px; position: absolute; }

body#catalog.list,
body#search         { background: #000; }

/* home page */
#introText          { position: absolute; top: 0px; left: 125px; background-color: #000; width: 360px; }
.shopInterior1,
.shopInterior2,
.shopInterior3      { position: absolute; width: 120px; height: 120px; }
.shopInterior1      { top: 240px; left: 485px; }
.shopInterior2      { top: 120px; left: 605px; }
.shopInterior3      { top: 240px; left: 725px; }

/* product cat & 'eye' grid links */
.gridbox                    { position: fixed; display: block; left: 360px; top: 120px; height: 360px; width: 480px; z-index: 6; }
body#catalog.cats .gridbox  { left: 360px; }
.gridpos                    { position: absolute; display: block; width: 120px; height: 120px; font-weight: bold; background-position: 50% 50%;
                              font-size: 14px; color: #fff; overflow: hidden; background-repeat: no-repeat; }
.gridpos div.hack1          { display: table; height: 120px; width: 100%; #position: relative; overflow: hidden; }
.gridpos div.hack2          { #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; }
.gridpos div.hack3          { #position: relative; #top: -50%; width: 120px; margin-left: auto; margin-right: auto; text-align: center;}

A.gridpos                   { color: #fff; }
A.gridpos:hover             { color: #f00; text-decoration: none; }

.gridpos1_1         { left:   0px; top: 0px; }
.gridpos1_2         { left: 120px; top: 0px; }
.gridpos1_3         { left: 240px; top: 0px; }
.gridpos1_4         { left: 360px; top: 0px; }
.gridpos1_5         { left: 480px; top: 0px; }
.gridpos1_6         { left: 600px; top: 0px; }
.gridpos1_7         { left: 720px; top: 0px; }
.gridpos1_8         { left: 840px; top: 0px; }
.gridpos2_1         { left:   0px; top: 120px; }
.gridpos2_2         { left: 120px; top: 120px; }
.gridpos2_3         { left: 240px; top: 120px; }
.gridpos2_4         { left: 360px; top: 120px; }
.gridpos2_5         { left: 480px; top: 120px; }
.gridpos2_6         { left: 600px; top: 120px; }
.gridpos2_7         { left: 720px; top: 120px; }
.gridpos2_8         { left: 840px; top: 120px; }
.gridpos3_1         { left:   0px; top: 240px; }
.gridpos3_2         { left: 120px; top: 240px; }
.gridpos3_3         { left: 240px; top: 240px; }
.gridpos3_4         { left: 360px; top: 240px; }
.gridpos3_5         { left: 480px; top: 240px; }
.gridpos3_6         { left: 600px; top: 240px; }
.gridpos3_7         { left: 720px; top: 240px; }
.gridpos3_8         { left: 840px; top: 240px; }
.gridpos4_1         { left:   0px; top: 360px; }
.gridpos4_2         { left: 120px; top: 360px; }
.gridpos4_3         { left: 240px; top: 360px; }
.gridpos4_4         { left: 360px; top: 360px; }
.gridpos4_5         { left: 480px; top: 360px; }
.gridpos4_6         { left: 600px; top: 360px; }
.gridpos4_7         { left: 720px; top: 360px; }
.gridpos4_8         { left: 840px; top: 360px; }
.gridpos5_1         { left:   0px; top: 480px; }
.gridpos5_2         { left: 120px; top: 480px; }
.gridpos5_3         { left: 240px; top: 480px; }
.gridpos5_4         { left: 360px; top: 480px; }
.gridpos5_5         { left: 480px; top: 480px; }
.gridpos5_6         { left: 600px; top: 480px; }
.gridpos5_7         { left: 720px; top: 480px; }
.gridpos5_8         { left: 840px; top: 480px; }

/* article list & rows */
.artList                { background: #000; padding-top: 38px; padding-left: 18px; }
#news .artList          { padding-top: 0px; padding-left: 0px; }
.artRow                 { width: 240px; height: 320px; float: left; padding: 0px 4px 3em 4px; position: relative; margin: 0 6px 6px 0; border: 1px #333 solid; overflow: hidden; }
.artRow .artName        { display: block; height: 2.4em; font-size: 125%; color: #e4e4e4; margin: 0 -4px 5px -4px; padding: 2px; background-color: #333; }
.artRow .artImg         { display: block; margin: 0 auto; margin-bottom: 4px; } /*   */
.artRow .artInfo        { font-weight: bold; cursor: help; }
.artRow .artInfo span   { font-style: italic; font-weight: normal; color: #999; }
.artRow .artDesc        { margin-top: 4px; }
.artRow .artData        { position: absolute; left: 0; bottom: 0; background-color: #000; padding: 4px 6px 2px 6px; border-top: 1px #333 solid; border-right: 1px #333 solid; }
.artRow .artPrice       { font-weight: bold; font-size: 1.3em; color: #f00; text-align: right; }
.artRow .artPriceEx     { text-align: right; font-size: .8625em; font-style: italic; }
.artRow .artCode        { font-weight: bold; font-size: 1.1em; cursor: help; }
.artRow .artOrder       { position: absolute; right: 0; bottom: 0; background-color: #000; padding: 2px; }
.artRow .artOrder span  { padding-right: 4px; font-style: italic; font-size: 87%; }
.artRow .artOrder .buy  { color: #f00; background: #333; font-size: 112%; cursor: pointer; }

.artheader              { background-color: #000; height: 32px; line-height: 32px; border-bottom: 1px #333 solid; text-align: right; padding-right: 10px; }
	

.artheader,          
.artdetails             { margin-left: 222px; }

.artdetails .artRow                 { width: auto; height: auto; float: none; margin: 0; padding: 0; border: none; }
.artdetails .artRow .artName,
.artdetails .artRow .artInfo,		
.artdetails .artRow .artDesc,
.artdetails .artRow .artData,
.artdetails .artRow .artOrder,
.artdetails .disclaimer
	                                { padding: 0; padding-left: 10px; padding-right: 10px; margin: 0; width: 580px; background-color: #000; }
.artdetails .artRow .artName        { color: #FFFF00; font-size: 2.4em; height: 87px; background-color: transparent !important; }
.artdetails .artRow .artInfo        { padding-top: 5px;  }  
.artdetails .artRow .artDesc        { padding-top: 20px; padding-bottom: 20px;  }
.artdetails .artRow .artImg         { margin: 0; border-bottom: 5px solid #000; }
.artdetails .artRow .artData        { position: relative; border-right: none; padding-top: 10px; padding-bottom: 10px; }
.artdetails .artRow .artPrice       { text-align: right; font-size: 2.625em; }
.artdetails .artRow .artPriceEx     { text-align: right; font-size: 1.125em; font-style: italic; }
.artdetails .artRow .artCode        { float: left; }
.artdetails .artRow .artOrder       { position: relative; text-align: right; }
.artdetails .disclaimer             { color: #fff; margin: 0;  padding-top: 10px; padding-bottom: 10px; }
	
/* news page */

.newsList div       { margin-bottom: 18px; }
.newsList .newsDate { font-style: italic; margin-bottom: 0px; }

/* info page */
.companyInfo        {
    float: right; margin-right: 40%; margin-left: 12px; margin-bottom: 12px; border: 1px #333 solid; padding: 12px;
}
.companyInfo .contactInfoType { display: inline-block; width: 120px; }

/* fun links page */
.linkSet            { width: 360px; min-height: 360px; padding: 4px; margin: 0 6px 6px 0; border: 1px #333 solid; float: left;  }

/* basket page */
table.basket            { cellspacing: 0px; border-spacing: 0px; border-collapse: collapse; }
table.basket th,
table.basket td           { text-align: left; margin: 0px; padding: 0px 6px 0px 6px; }
table.basket td           { padding: 6px 6px 0px 6px; }
table.basket tr.seclast td{ padding: 6px 6px 6px 6px; }
table.basket tr.header th,
table.basket tr.header td { border-bottom: 1px solid #ccc; padding-bottom: 6px; }
table.basket tr.footer th,
table.basket tr.footer td { border-top: 1px solid #ccc; padding-top: 6px; padding-bottom: 6px; }

/* clearfix hack */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

/* lightbox */
#lightbox{  position: fixed; left: 0; top: 20px !important; width: 100%; z-index: 1001; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../img/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../img/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}

#overlay{ position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 500px; background-color: #000; }