@charset "utf-8";

/*	COLORS
	Background colors (light to dark):
		boxcolor - Text box background
		bannercolor - Banner background
		canvascolor - Overall page background
		boxboxcolor - Darker box inside a text box
	Text/Accent colors (light to dark):
		lightaccenttextcolor - Usually text headings
		lightaccentbgcolor
		darkaccenttextcolor - Usually rules; some text
		darkaccentbgcolor
	Primary text colors (light to dark):
		lighttextcolor
		darktextcolor
	These are defined here so you can use them from the page, but they also 
	show up as literal values in some styles. In that case they're here for 
	reference.
*/
.boxcolor { background-color:#fffef2; }
.bannercolor { background-color:#f8f7eb; }
.canvascolor { background-color:#f0eee0; }
.boxboxcolor { background-color:#e1dfcc; }
.lightaccenttextcolor {	color:#7988bb; }
.lightaccentbgcolor { background-color:#7988bb; }
.darkaccenttextcolor { color:#02458d; }
.darkaccentbgcolor { background-color:#02458d; }
.lighttextcolor { color:#fffef2; }
.darktextcolor { color:#000000; }
.errormsgcolor { color:#CC0000; }
.product_list_item_selected { background-color: aquamarine }

html { padding:0; margin:0; height: 100%; }
body { margin:0; padding:0; width:100%; height: 100%; font:normal 12pt Arial, Helvetica, sans-serif; color:#252525; }

ul.outside { list-style-position:outside; }
ul { list-style-position:inside; }

/* main */
.main { width:100%; padding:0; margin:0 auto; }

img { max-width:100%; height:auto; }

/* marquee */
.marquee 
	{ 
	/* Starting position */
	-moz-transform:translateX(100%);
	-webkit-transform:translateX(100%);	
	transform:translateX(100%);
	/* Apply animation to this element */	
	-moz-animation: marquee 15s linear infinite;
	-webkit-animation: marquee 15s linear infinite;
	animation: marquee 15s linear infinite;
	}
/* Move it (define the animation) */
@-moz-keyframes marquee 
	{
	0%   { -moz-transform: translateX(100%); }
	100% { -moz-transform: translateX(-100%); }
	}
@-webkit-keyframes marquee 
	{
	0%   { -webkit-transform: translateX(100%); }
	100% { -webkit-transform: translateX(-100%); }
	}
@keyframes marquee 
	{
	0%   
		{ 
		-moz-transform: translateX(100%); /* Firefox bug fix */
		-webkit-transform: translateX(100%); /* Firefox bug fix */
		transform: translateX(100%); 		
		}
	100% 
		{ 
		-moz-transform: translateX(-100%); /* Firefox bug fix */
		-webkit-transform: translateX(-100%); /* Firefox bug fix */
		transform: translateX(-100%); 
		}
	}

.waitbar 
	{
	width: 100%;
	height: 20px;
	border: 1px solid #2980b9;
	border-radius: 3px;
	background-image: 
		repeating-linear-gradient(-45deg,#2980b9,#2980b9 11px,#eee 10px,#eee 20px /* determines size */);
	background-size: 28px 28px;
	animation: move .5s linear infinite;
	}

@keyframes move 
	{
	0% 
		{
		background-position: 0 0;
		}
	100% 
		{
		background-position: 28px 0;
		}
	}

/* Full-Screen Overlay (Modal Dialog) */
/* From W3Schools */

.overlay 
	{
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 100%;
    display:none;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    color: #ffffff;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.8); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}

/* Position the content inside the overlay */
.overlay-content 
	{
    position: relative;
    top: 40px;
    width: 50%; /* 100% width */
    background-color: rgb(255,255,255);	/* white */
    text-align: center; /* Centered text/links */
    margin: 30px auto 0px auto;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
	}

@media screen and (max-width:640px)
	{
	.overlay-content
		{
		width:80%;
		padding: 5px 10px 5px 10px;
		}
	}
	
.overlay h1
	{
    padding: 8px 0px 4px 0px;
    text-decoration: none;
    font-size: 30px;
    color: #ff7043;
	}

.overlay p
	{
    padding: 8px 0px 0px 0px;
    text-decoration: none;
    font-size: 24px;
    color: #333333;
	}

.overlay a
	{
    text-decoration: none;
    color: #3333cc;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
	}
	
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus 
	{
    color: #6666ff;
	}

/* Position the close button (top right corner) */
.overlay .closebtn 
	{
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    color: #cccccc;
	}
	
.overlay a.closebtn:hover, .overlay a.closebtn:focus
	{
	color: #ffffff;
	}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) 
	{
    .overlay h1, .overlay p {font-size: 20px}
    .overlay .closebtn 
    	{
        font-size: 40px;
        top: 15px;
        right: 35px;
    	}
	}