@charset "utf-8";
/* CSS Document */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img { 
border:0;
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}

abbr,acronym { 
border:0;
}

#header h1 {
margin: 0;
padding: 0;
}

a {
color: #000;
}

a:hover {
text-decoration:underline;
}

a img {
border: 0 none;
}

ul {
list-style-type: disc;
}

body  {
font: 100% Arial, Verdana, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
/* background: #e6e8e7; */
}
#container {
margin: 0 auto;
background-image: url(images/mainbg.jpg);
background-repeat: no-repeat;
width: 1000px;
height:1000px;
}

#mainContent {
margin: 0 auto;
width: 800px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

.header {
margin: 0 auto;
background-image: url(images/header.png);
width: 744px;
height: 133px;
}

#header-text, #header-text{
float: right;
font-weight:bold;
font-style: italic;
font-size:23px;
text-align:left;
color: #FFFFFF;
width: 350px;
padding: 20px 80px 10px 10px;
}

#lm {
text-transform: uppercase;
font-size:25px;
width: 400px;
padding: 25px 80px 10px 0px
}

#logo {
float: left;
background-image: url(images/logo.png);
width: 275px;
height: 104px;
margin-left: 10px;
}

h1 {
font-weight:bold;
font-style: italic;
font-size:25px;
text-align:right;
margin-right: 50px;
}

#mainbox, #mainbox-lm {
position: absolute;
z-index: 10;
top: 460px;
left: 340px;
background-image: url(images/container.png);
width: 739px;
height: 604px;
}

#mainbox-lm {
top: 320px;
width:330px;
left: 360px;
background: none;
text-align: left;
}

#mainbox-lm h1 {
width: 770px;
margin-top: 20px;
font-size: 18px;
text-align:center;
}

#maintext {
width: 750px;
}

#filter-alert {
position: absolute;
z-index: 100;
top: 430px;
left: 340px;
background-image: url(images/filter-alert.png);
background-repeat: no-repeat;
width: 421px;
height: 267px;
}

#filter-alert-lm {
position: absolute;
z-index: 100;
top: 340px;
right: 330px;
background-image: url(images/filter-alert-image.png);
background-repeat: no-repeat;
width: 421px;
height: 267px;
}

#filter-alert-lm #caption {
position: absolute;
font-size: 10px;
top: 180px;
left: 90px;
}

#diagram {
background-image: url(images/diagram.png);
background-repeat: no-repeat;
width: 750px;
height: 270px;
}

#shape {
position: absolute;
top: 180px;
left: 340px;
background-image: url(images/shape.png);background-repeat: no-repeat;
width: 358px;
height: 227px;
}

#shape2 {
position: absolute;
top: 140px;
left: 340px;
background-image: url(images/shape2.png);background-repeat: no-repeat;
width: 456px;
height: 157px;
}

#shape-text {
position: absolute;
text-align: left;
z-index: 100;
top: 35px;
left: 20px;
font-weight:bold;
font-style: italic;
font-size:23px;
width: 220px;
color: #00b1b0;
}

#shape2-text {
position: absolute;
text-align: left;
z-index: 100;
top: 20px;
left: 20px;
font-weight:bold;
font-style: italic;
font-size:22px;
width: 360px;
color: #FFFFFF;
}


h3{
position:absolute;
left: 0px;
font-weight:bold;
font-style: italic;
font-size:21px;
margin-top: 200px;
text-align: left;
padding: 20px;
width: 300px;
}

#filter-text {
position:absolute;
font-size:14px;
text-align: left;
padding: 0px 20px 20px 20px;
width: 350px;
left: 0px;
top: 320px;
line-height: 25px;
}

#filter-text-right-title {
position: absolute;
top: 50px;
right:15px;
font-size:25px;
font-weight: bold;
text-align: left;
padding: 0px 20px 20px 0px;
width: 280px;
}

#filter-text-right {
position: absolute;
top: 150px;
right:15px;
font-size:14px;
text-align: left;
padding: 0px 20px 20px 0px;
width: 260px;
line-height: 20px;
}

#filter-text-right li {
padding: 5px;
}

#social {
position: absolute;
top: 510px;
left: 120px;
height: 50px;

width: 500px;
margin: 0 auto;
}

#facebook {
float: left;
background-image: url(images/facebook.png);
width: 39px;
height: 37px;
}

#youtube {
float: left;
background-image: url(images/youtube.png);
width: 94px;
height: 40px;
}

#intro {
font-size: 30px;
}

#blue {
color: #4e92ce;
font: Helvetica, Arial, Verdana, sans-serif;
}

#green {
color: #00b1b0;
font: Helvetica, Arial, Verdana, sans-serif;
}

#learnmore {
background-image: url(images/learn-more.png);
width: 150px;
height: 65px;
margin: 0 auto;
}

.buttons {
height: 70px;
margin: 0 auto;
margin-top: 90px;
width: 1000px;
}

#home {
background-image: url(images/home.png);
width: 155px;
height: 64px;
margin: 0 auto;
}

#order {
background-image: url(images/order.png);
width: 151px;
height: 64px;
margin: 0 auto;
}

#contact {
background-image: url(images/contact.png);
width: 152px;
height: 63px;
margin: 0 auto;
}