/* Reset all styles ********************** */
* { margin: 0; padding: 0; } 

hr {
display: none;
}

body {
color: #ccc;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #d12525 url(images/background2.jpg) repeat-x top left;
}

div#page {
position: relative;
margin: 0px auto;
display: block;
width: 970px;
}

div#heading {
display: block;
width: 970px;
height: 175px;
}

div#frameTop {
display: block;
width: 970px;
height: 35px;
}

div#content {
background: #fff url(images/frame_middle2.jpg) repeat-y top left;
width: 880px;
padding: 0px 45px 0px 45px;
}

div#frameBottom {
display: block;
width: 970px;
height: 59px;
}

div#footer {
width: 880px;
padding: 0px 45px 0px 45px;
}

div#articleColumn {
float: left;
width: 550px;
padding: 0px 0px 0px 0px;
}

div#imagesColumn {
float: right;
width: 300px;
padding: 0px 0px 0px 0px;
}

p, li, input, textarea, label, blockquote {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 10pt;
color: #333;
line-height: 18px;
margin: 0px 0px 12px 0px;
}

a:link, a:visited, .hilite {
	color: #0b9ec0;
	text-decoration: none;
}

a:hover {
	color: #00cfff;
	text-decoration: none;
}

p.footer {
font-size: 8pt;
color: #ffcccc;
}

p.footer a:link, p.footer a:visited {
	color: #ffff99;
	text-decoration: none;
}

p.footer a:hover {
	color: #ffff00;
	text-decoration: none;
}


h1, h2, h3, h4, h5 {
font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
font-size: 16pt;
color: #666;
font-weight: normal;
margin: 0px 0px 10px 0px;
}

h2 {
font-size: 14pt;
color: #666;
font-weight: bold;
margin: 20px 0px 5px 0px;
}

hr {
display: block;
width: 550px;
height: 1px;
border-top: 1px dotted #333;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
margin: 20px 0px 20px 0px;
}

img.pageTitle {
margin: 0px 0px 20px 0px;
}

/* The main panels *********************************************************/

div.divider {
width: 400px;
background: url(gfx/dots.gif) repeat-x bottom left;
}

li {
font-size: 10pt;
color: #666;
line-height: 16px;
margin: 5px 10px 5px 40px;
padding: 0;
list-style: disc;
}

li li {
list-style: disc;
}

/* For shopping page **********************/

div.column1 {
	display: block;
	width: 430px;
	margin: 0px 0px 0px 0px;
	float: left;
}

div.column2 {
	display: block;
	width: 430px;
	margin: 0px 0px 0px 0px;
	float: right;
}

div.item {
	display: block;
	width: 430px;
	padding: 20px 0px 0px 0px;
	float: left;
	border-bottom: 1px dotted #ccc;
}

img.productImg {
	float: left;
}

div.itemDescr {
	display: block;
	width: 260px;
	float: right;
}

p.productTitle {
	font-weight: bold;
	margin: 0px 0px 0px 0px;
}
p.productDescr {
	margin: 0px 0px 5px 0px;
}
p.productPrice {
	margin: 5px 0px 5px 0px;
}

p.specialTitle {
	font-weight: bold;
	margin: 0px 0px 10px 0px;
	text-align: center;
}

p.specialDescr {
	margin: 0px 0px 0px 0px;
}

span.strike {
	text-decoration: line-through;
}


div.product {
	padding: 10px 0px 10px 0px;
}

div.product1 {
	float: left;
	width: 250px;
	padding: 0px 0px 0px 150px;
}

div.product2 {
	float: right;
	width: 250px;
	padding: 0px 150px 0px 0px;
}

.alignLeft {
	float: left;
}

.alignRight {
	float: right;
}

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
P.I.E. FLOAT CLEARING
See http://www.positioniseverything.net/easyclearing.html 

DYSKE:
Use this on the container block, not in the content block.
You can apply multiple classes to an element by separating them with a space.
E.g. class="clearfix anotherClass"
clearfix must come first.
*/

.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}

.clearfix {
display: inline-block; /* Fixes IE/Mac */
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */