body {
margin:0; padding:0;
background:#fff;
font-family: 'Josefin Sans', arial, serif;
font-size:16px;
}
h2 {color:#df8e00;}
h3 {color:#df8e00;margin:0;}
p {margin:0 0 15px 0;}
a {color:#df8e00; font-weight:bold; text-decoration:none;}
a:hover{text-decoration:underline;}
a img {border:none;}
#header {
background:url(/Other/Roering/img/bg-banner-top.png) repeat-x #df8e00;
}
#banner {
width:900px;
margin:0 auto;
position:relative;
padding:42px 0 0 0;
}
.internal #banner {
height:190px;
}
#bannerBG{
background:url(/Other/Roering/img/bg-banner-top.png) repeat-x;
height:60px;
width:900px;
position:absolute; top:0; left:0;
z-index:3;
}
#logo {
position:absolute; top:0; left:270px;
z-index:5;
}
.internal #logo {
position:absolute; top:0; left:100px;
z-index:5;
}
#cta{
position:absolute; top:372px; left:334px;
z-index:4;
}
.internal #cta{
position:absolute; top:122px; left:534px;
z-index:4;
}
.slideshow{
z-index:2;
height:440px;
overflow:hidden;
}
#content {
width:900px;
margin:0 auto;
padding: 0 20px;
}
#mainNav {
color:#222;
height:85px;
font-family: 'Oswald', arial, serif;
}
#mainNav ul { margin:35px 0 35px 80px; padding:0; }
#mainNav ul li { list-style:none; float:left; }
#mainNav a { font-weight:700; text-transform:uppercase; padding:15px 30px 20px; color:#222; font-size:30px; text-decoration:none;}
#mainNav a:hover { background:none; color:#df8e00;}

#mainContent {
background:url(/Other/Roering/img/bg-content.png) no-repeat;
padding:40px 50px;
}
#callOut{
width:300px;
float:right;
margin:20px; padding:20px;
background:#df8e00;
color:#fff;
font-size:20px;
}
#callOut ul {margin:0; padding:0 0 0 30px;}
#callOut h3{
color:#fff;
text-align:center;
font-size:30px;
}
.callOutImg{
float:right;
margin:20px; padding:0 30px 0 0;
background:#df8e00;
}

#footer {
background:url(/Other/Roering/img/bg-banner-top.png) repeat-x #df8e00;
}
#footerInside {
width:900px;
margin:0 auto;
position:relative;
padding:42px 0 0 0;
height:300px;
}
#ctaFoot {

z-index:25;
width:241px; height:117px;
}
#footer a {color:#fff;}
#geo {
float:left;
margin:20px 0 20px 30px;
width:290px;
font-size:12px;
}
#address {
float:right;
margin:20px 0;
width:300px;
}
#lowerNav {
clear:both;
color:#fff;
height:85px;
width:900px;
}
#lowerNav ul { margin:0 0 0 100px; padding:0; }
#lowerNav ul li { list-style:none; float:left; }
#lowerNav a { font-weight:700; text-transform:uppercase; padding:0 20px; color:#fff; font-size:20px; text-decoration:none;}
#lowerNav a:hover { text-decoration:underline; }

#carousel_container {
margin:0;
padding:0px 30px 0 30px;
position:relative;
clear:both;
height:150px;
width:750px;
}

#carousel_inner {
float:left; /* important for inline positioning */
width:750px; /* important (this width = width of list item(including margin) * items shown */
height:150px;
overflow: hidden;  /* important (hide the items outside the div) */
position:relative;
/* non-important styling bellow */
background: #fff;
border:2px #000;
}

#carousel_ul {
position:relative;
left:-150px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */                                    
width:150px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:150px;
background: #000000;
margin-top:0px;
margin-bottom:0px; 
margin-left:0px; 
margin-right:0px; 
}

#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand; 
border:0px #fff solid; 
}
#left_scroll{
position:absolute; left:0; top:0px;
height:150px; 
width:30px;
padding:0 0px;
}
#right_scroll{
position:absolute; right:0; top:0px;
height:150px; 
width:30px;
padding:0 0px;
}
#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}