/* ============================================================= */
/* ===============Stylesheet for ORION FITNESS================== */
/* =======================Created 9/16/08======================= */
/* ============================================================= */


body {
margin: 0;
padding: 0;
text-align: center;
background-color: #a2a2a2;
}

:focus {
outline: 0;
}

p {
margin:0 0 12px 0;
padding:0;
text-align:left;
font-family:verdana;
font-size:12px;
line-height: 18px;
color: #000000;
}

#top-gradient-bg {
margin:0;
padding:0;
height:369px;
background: url(images/bg-gradient.jpg) top center repeat-x;
}

#wrap1 {
margin:0 auto;
padding:0;
width:862px;
}

#banner {
margin:0;
padding:0;
height:58px;
width:862px;
background: url(images/banner2.jpg) top center no-repeat;
}

#banner-contact {
margin:0;
padding: 40px 0 0 580px;
text-align:left;
font-family:verdana;
font-size:11px;
line-height: 11px;
font-weight: bold;
color: #000000;
}

#fitness-scenes { /*old banner*/
margin:0;
padding:0;
height:170px;
width:862px;
background: url(images/fitness-scenes.jpg) top center no-repeat;
}

/*-------------------------------------------*/
/* SLIDER across the top */
#slider-bg {
margin:0;
padding:8px 0 0 0;
height:209px;
width:862px;
background: url(images/bg-slider-top.jpg) top center no-repeat;
}

#slider-bg-padding {
margin: 0 14px;
padding:0;
}

.stepcarousel {
position: relative; /*leave this value alone*/
border: /*10px solid #A2A2A2*/10px solid #dddddd;
overflow: scroll; /*leave this value alone*/
/*width: 450px;*/ /*Width of Carousel Viewer itself*/
height: 186px; /*Height should enough to fit largest content's height*/
background-color: #eeeeee;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px; /*margin around each panel*/
padding: 5px;
width: 253px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height: 164px;
border: 1px solid #A2A2A2;
font-family: arial;
font-size: 11px;
line-height: 13px;
background-color: #ffffff;
text-align: left;
}

.slider-photo {
float:left; 
margin:0 8px 8px 0;
}

/* Slider list */
.sliderlist {
margin: 5px 0 10px 0;
padding: 0 0 0 15px;
text-align: left;
font-family: arial;
font-size: 11px;
line-height: 13px;
display:block;
}

.sliderlist ul{
margin: 0;
padding:0;
list-style-type: none;
}

.sliderlist li{
margin: 0;
padding: 0 0 0 14px;
background-image: url("images/bullet.gif");
background-repeat: no-repeat;
background-position: 0 8px;
font-weight:normal !important;
list-style-type: none;
}

.sliderlist ul li {
margin: 0 0 0 6px;
padding: 0px 0 0px 14px;
list-style-type: none;
}

/*-------------------------------------------*/

#content-bg {
margin:0;
padding:0;
width:862px;
background: url(images/bg-content-mid.jpg) top center repeat-y;
}

#content-top {
margin:0;
padding:0;
width:862px;
background: url(images/bg-content-top.jpg) top center no-repeat;
}

#content { /* includes padding & styling, mirrored in p styling too */
margin:0 auto;
padding:10px 0;
width:826px;
border:0;
text-align:left;
font-family:verdana;
font-size:12px;
line-height: 18px;
color: #000000;
}

#bottom {
margin:0;
padding:0;
width:862px;
height:10px;
background: url(images/bg-content-bot.jpg) top center no-repeat;
}


#footer {
color:#666666;
}


/*===============================LINKS=================================*/

#content a:link 	{ color:#0F3568; font-weight:bold; text-decoration:none; }
#content a:visited 	{ color:#0F3568; font-weight:bold; text-decoration:none; }
#content a:hover 	{ color:#0F3568; font-weight:bold; text-decoration:underline; }
#content a:active 	{ color:#0F3568; font-weight:bold; text-decoration:underline; }

#banner-contact a:link 	{ color:#ff3300; font-weight:bold; text-decoration:none; }
#banner-contact a:visited 	{ color:#ff3300; font-weight:bold; text-decoration:none; }
#banner-contact a:hover 	{ color:#ff3300; font-weight:bold; text-decoration:underline !important; }
#banner-contact a:active 	{ color:#ff3300; font-weight:bold; text-decoration:underline; }

/* =============================HEADINGS=============================== */

h1 {
padding: 0;
margin: 0 0 10px 0;
color: #ff3300;
text-align: center;
font-family: "trebuchet ms",sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: 1px;
line-height: 1.3em;
}

h2 {
padding: 0;
margin: 0 0 10px 0;
color: #ff3300;
text-align: center;
font-family: "trebuchet ms",sans-serif;
font-size: 22px;
font-weight: bold;
letter-spacing: 1px;
line-height: 1.3em;
}

h3 {
padding: 0;
margin: 0 0 10px 0;
color: #ff3300;
text-align: center;
font-family: "trebuchet ms",sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1.3em;
}


h4 {
padding: 0;
margin: 0 0 10px 0;
color: #173D79;
text-align: center;
font-family: "trebuchet ms",sans-serif;
font-size: 18px;
font-weight: normal;
font-style: italic;
line-height: 1.3em;
}


.red {
color: #ff3300;
font-weight: bold;
}

.red2 {
font-family: arial;
color: #ff3300;
font-weight: bold;
font-size: 12px;
line-height: 16px;
margin: 0 0 5px 0;
}

/* ====================LISTS==================== */

.list1 {
margin: 5px 0 10px 0;
padding: 0 0 0 15px;
text-align: left;
font-size: 12px;
line-height: 20px;
}

.list1 ul{
margin: 0;
padding:0;
list-style-type: none;
}

.list1 li{
margin: 0;
padding: 0px 0 0px 14px;
background-image: url("images/bullet.gif");
background-repeat: no-repeat;
background-position: 0 8px;
font-weight:normal !important;
list-style-type: none;
}

.list1 ul li {
margin: 0 0 0 6px;
padding: 0px 0 0px 14px;
list-style-type: none;
}

.list1 a, a:visited {
color: #7EA65E;
font-weight: bold;
text-decoration: none;
font-size: 12px !important;
}

.list1 a:hover, a:active {
color: #7EA65E;
font-weight: bold;
text-decoration: underline;
font-size: 12px !important;
}


/*-------------------------------------------*/


hr {
margin: 0 0 15px 0;
padding:0;
border: none 0; 
border-top: 1px solid #ff3300;
border-bottom: 1px solid #a2a2a2;
width: 100%;
height: 2px;
}


.clear {
clear:  both;
}