/********************** HOMEPAGE SLIDING PANELS ************************/

#promoholder {
float:left;
height:322px;
width:585px;
margin-left:10px;
}

/* navigation */
.stripNav { width: 576px; margin: 0 }/* This is the div to hold your nav (the UL generated at run time) */
/* IE6 */ *html .stripNav { width: 576px; } 
/* IE7 */ *:first-child+html .stripNav { width: 576px; } 
.stripNav ul { list-style: none } /* The auto-generated set of links */
.stripNav ul li { float: left; margin-right: 0; height: 27px
} /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */

.stripNav li a { padding-left: 12px; background: url(img/home-tabs-off.jpg) 0 0 no-repeat }
.stripNav li a span { position: relative; top: -4px; padding-right: 24px; background: url(img/home-tabs-off.jpg) 100% 0 no-repeat }
/* hack IE6 */ *html .stripNav li a span { line-height: 27px }
/* IE7 */ *:first-child+html .stripNav li a span { line-height: 27px }
.stripNav li a.current { padding-left: 12px; background: transparent url(img/home-tabs-on.jpg) 0 0 no-repeat }
.stripNav li a.current span { background: transparent url(img/home-tabs-on.jpg) 100% 0 no-repeat }

.stripNav li.last a { background: transparent url(img/home-tabs-last-off.jpg) 0 0 no-repeat }
.stripNav li.last a span { padding: 0 50px 10px 0; background: transparent url(img/home-tabs-last-off.jpg) 100% 0 no-repeat }
/* hack Safari */ html* .stripNav li.last a span { line-height: 27px }
/* IE6 */ *html .stripNav li.last a span { line-height: 27px }
/* IE7 */ *:first-child+html .stripNav li.last a span { line-height: 27px }
.stripNav li.last a.current { background: transparent url(img/home-tabs-last-on.jpg) 0 0 no-repeat }
.stripNav li.last a.current span { background: transparent url(img/home-tabs-last-on.jpg) 100% 0 no-repeat }
.stripNav li a.next { padding-left: 12px; background: url(img/home-tabs-on-off.jpg) 0 0 no-repeat }

.stripNav a, .stripNav a:link, .stripNav a:visited, .stripNav a:hover, .stripNav a:active { /* The nav links */
font-size: 14px; font-weight: normal; font-family: Arial Black, Arial, Sans-Serif; text-align: center; 
line-height: 27px; color: #fff; text-decoration: none; display: block
}
.stripNav li a:hover { text-decoration: none; color: #ccc }
.stripNav li a:hover span { text-decoration: none; color: #0ba6e8 }
.stripNav li a:visited { text-decoration: none }
.stripNavL, .stripNavR { position: absolute; top: 230px; text-indent: -9000em }/* The left and right arrows */


/* panel */
.stripViewer .panelContainer .panel ul { text-align: left; margin:0;height:322px; }
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
margin: 0;position: relative; }

.stripViewer { /* This is the viewing window */
position: relative;
overflow: hidden; 
margin:0;
clear: left;
height: 322px;
width: 576px; /* Also specified in  .stripViewer .panelContainer .panel  below */
border: 12px solid #0e417d;
}

/*style for IE*/		
* html .stripViewer  {
width: 600px;
height: 342px;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
position: relative;
left: 0;
top: 0;
width: 576px;
height:322px;
list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. */
}

/*style for IE*/		
* html .stripViewer .panelContainer {
width: 600px;
height: 342px;
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
float:left;
position: relative;
height: 322px;
width: 576px; /* Also specified in  .stripViewer  above */
}

/*style for IE*/		
* html .stripViewer .panelContainer .panel {
width: 600px;
}

.panel { height:322px;font-family: Arial, Sans-Serif; font-size: 20px; color: #fff }
.panelContainer .free { background: #0e417d url() 0 0 no-repeat }
.panelContainer .learn { background: #0e417d url() 0 0 no-repeat }
.panelContainer .community { background: #0e417d url() 0 0 no-repeat }
.panelContainer .tutorial { background: #0e417d url() 0 0 no-repeat }

.panel .panel-content { float: left; width: auto; height:322px; margin: 0 }
.panel a h2 { font-weight: normal; text-decoration: none; font-size: 17px; font-family: Arial Black, Arial, Sans-serif; 
color: #fff; border-bottom: 5px solid #023668; margin: 10px 0 25px; line-height: 18px }
.panel a { text-decoration: none }
.panel ul li { font-size: 16px; list-style-type: disc; margin-bottom: 10px }
.panel a.home-link { font-size: 18px; margin: 10px }
.panel img { margin: 0; padding: 0 }
.panels { float: left; width: 576px; height:322px; margin-left:0 }

/* IE6 */ *html .panels {
width: 576px;
height:322px;
margin: 0
}

a.home-link { display: block; margin: 0; background-color: #325cb3; padding: 15px }
a.home-link img { margin-left: 10px }