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

hr {
display: none;
}

body {
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #ffffff;
}

p {
font-family: Verdana, Arial, sans-serif;
color: #000000;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}
p a:visited {color: #518ac8; text-decoration: none}
p a:link {color: #518ac8; text-decoration: none}
p a:hover {color: #518ac8; text-decoration: underline}

.error {
font-family: Verdana, Arial, sans-serif;
color: #dd0000;
}

div#mainContainer {
margin: 0px auto;
display: block;
width: 900px;
background: url(images/home_background.jpg) no-repeat top left;
}

div#header {
display: block;
width: 900px;
height: 100px;
background: url(images/home_header.gif) no-repeat top left;
}

div#navBar {
display: block;
width: 700px;
height: 28px;
padding: 0px 0px 0px 230px;
}

div#navBar img {
float: left;
}


div#logos {
display: block;
width: 409px;
height: 167px;
padding: 55px 0px 0px 491px;
}

div#logos img {
float: left;
}

div#cafeSelection {
display: block;
width: 250px;
margin: 0px 0px 0px 345px;
}

div#cafeSelection img {
float: left;
}

div#footer {
clear: both;
display: block;
width: 900px;
height: 20px;
text-align: center;
padding: 20px 0px 0px 0px;
}

p.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #ccc;
}

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

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

li {
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
color: #333333;
line-height: 16px;
margin: 0px 10px 10px 40px;
padding: 0;
list-style: decimal;
}
li a:visited {color: #0f67b0; text-decoration: none;}
li a:link {color: #0f67b0; text-decoration: none;}
li a:hover {color: #e00726; text-decoration: underline;}

/*
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 */