@charset "UTF-8";

/*non-accordion css */
body  {
background-color:#efefef;
background-image:url(images/backimage.jpg); 
background-repeat:repeat-x;
 margin: 10px;
    padding: 0; 
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
	}
	
	#main  {
	width:900px;
	background-color:#ffffff;
	margin:0 auto;
	overflow: hidden;
height:100%;
padding-bottom:50px;
padding-top:0px;
	}
	
	#column-l {
	width:450px;
	float:left;
	}
	
	#column-r  {
	width:450px;
	float:right;
	}
	
	
	#column-l2 {
	width:270px;
	float:left;
	}
	

	
	#column-r2  {
	width:610px;
	float:left;
	padding-top:0px;
	padding-right:0px;
	padding-left:15px;
	padding-bottom:10px;
    color:#666666;
	}


/* Navigation for Homepage*/


#navigation {
  list-style: none;
  width:900px;
  margin-left:0;
  margin-top:0;
  padding-left:0;
  padding-top:0;
  
}

#navigation li {
  float: left;
 
}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
  height: 50px;
	position: relative;
	display: block;
	background:url(images/PDShome-sprite.jpg) 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.home {
  background-position: 0 0;
  width: 150px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
  background-position: 0 -53px;
  width: 150px;
}

#navigation a.suggtracks {
  background-position: -150px -0px;
  width: 150px;
}

#navigation .highlight a.suggtracks:hover,
#navigation a.suggtracks .hover {
  background-position: -150px -53px;
}

#navigation a.classdes {
  background-position: -300px 0;
  width: 150px;
}

#navigation .highlight a.classdes:hover,
#navigation a.classdes .hover {
  background-position: -300px -53px;
}

#navigation a.agenda {
  background-position: -450px 0;
  width: 150px;
}

#navigation .highlight a.agenda:hover,
#navigation a.agenda .hover {
  background-position: -450px -53px;
}

#navigation a.information {
  background-position: -600px 0;
  width: 150px;
}

#navigation .highlight a.information:hover,
#navigation a.information .hover {
  background-position: -600px -53px;
}

#navigation a.registration {
  background-position: -750px 0;
  width: 150px;
}

#navigation .highlight a.registration:hover,
#navigation a.registration .hover {
  background-position: -750px -53px;
}

/* Navigation for Suggested Tracks*/


#suggnav {
  list-style: none;
  width:900px;
  margin-left:0;
  margin-top:0;
  padding-left:0;
  padding-top:0;
  
}

#suggnav li {
  float: left;
 
}

#suggnav a * {
  display: none;
}

#suggnav a,
#suggnav a .hover {
  height: 50px;
	position: relative;
	display: block;
	background:url(images/PDStestamonial-sprite.jpg) 0 0 no-repeat;
}

/* individual items */
#suggnav a.home {
  background-position: 0 0;
  width: 150px;
}

#suggnav .highlight a.home:hover,
#suggnav a.home .hover {
  background-position: 0 -53px;
  width: 150px;
}

#suggnav a.suggtracks {
  background-position: -150px -0px;
  width: 150px;
}

#suggnav .highlight a.suggtracks:hover,
#suggnav a.suggtracks .hover {
  background-position: -150px -53px;
}

#suggnav a.classdes {
  background-position: -300px 0;
  width: 150px;
}

#suggnav .highlight a.classdes:hover,
#suggnav a.classdes .hover {
  background-position: -300px -53px;
}


#suggnav a.agenda {
  background-position: -450px 0;
  width: 150px;
}

#suggnav .highlight a.agenda:hover,
#suggnav a.agenda .hover {
  background-position: -450px -53px;
}

#suggnav a.information {
  background-position: -600px 0;
  width: 150px;
}

#suggnav .highlight a.information:hover,
#suggnav a.information .hover {
  background-position: -600px -53px;
}

#suggnav a.registration {
  background-position: -750px 0;
  width: 150px;
}

#suggnav .highlight a.registration:hover,
#suggnav a.registration .hover {
  background-position: -750px -53px;
}

/* Navigation for Class Descriptions*/


#classdes {
  list-style: none;
  width:900px;
  margin-left:0;
  margin-top:0;
  padding-left:0;
  padding-top:0;
  
}

#classdes li {
  float: left;
 
}

#classdes a * {
  display: none;
}

#classdes a,
#classdes a .hover {
  height: 50px;
	position: relative;
	display: block;
	background:url(images/PDSbreakout-sprite.jpg ) 0 0 no-repeat;
}

/* individual items */
#classdes a.home {
  background-position: 0 0;
  width: 150px;
}

#classdes .highlight a.home:hover,
#classdes a.home .hover {
  background-position: 0 -53px;
  width: 150px;
}

#classdes a.suggtracks {
  background-position: -150px -0px;
  width: 150px;
}

#classdes .highlight a.suggtracks:hover,
#classdes a.suggtracks .hover {
  background-position: -150px -53px;
}

#classdes a.classdes {
  background-position: -300px 0;
  width: 150px;
}

#classdes .highlight a.classdes:hover,
#classdes a.classdes .hover {
  background-position: -300px -53px;
}


#classdes a.agenda {
  background-position: -450px 0;
  width: 150px;
}

#classdes .highlight a.agenda:hover,
#classdes a.agenda .hover {
  background-position: -450px -53px;
}

#classdes a.information {
  background-position: -600px 0;
  width: 150px;
}

#classdes .highlight a.information:hover,
#classdes a.information .hover {
  background-position: -600px -53px;
}

#classdes a.registration {
  background-position: -750px 0;
  width: 150px;
}

#classdes .highlight a.registration:hover,
#classdes a.registration .hover {
  background-position: -750px -53px;
}

/* Navigation for Agenda*/


#agendanav {
  list-style: none;
  width:900px;
  margin-left:0;
  margin-top:0;
  padding-left:0;
  padding-top:0;
  
}

#agendanav li {
  float: left;
 
}

#agendanav a * {
  display: none;
}

#agendanav a,
#agendanav a .hover {
  height: 50px;
	position: relative;
	display: block;
	background:url(images/PDSagenda-sprite.jpg) 0 0 no-repeat;
}

/* individual items */
#agendanav a.home {
  background-position: 0 0;
  width: 150px;
}

#agendanav .highlight a.home:hover,
#agendanav a.home .hover {
  background-position: 0 -53px;
  width: 150px;
}

#agendanav a.suggtracks {
  background-position: -150px -0px;
  width: 150px;
}

#agendanav .highlight a.suggtracks:hover,
#agendanav a.suggtracks .hover {
  background-position: -150px -53px;
}

#agendanav a.classdes {
  background-position: -300px 0;
  width: 150px;
}

#agendanav .highlight a.classdes:hover,
#agendanav a.classdes .hover {
  background-position: -300px -53px;
}


#agendanav a.agenda {
  background-position: -450px 0;
  width: 150px;
}

#agendanav .highlight a.agenda:hover,
#agendanav a.agenda .hover {
  background-position: -450px -53px;
}

#agendanav a.information {
  background-position: -600px 0;
  width: 150px;
}

#agendanav .highlight a.information:hover,
#agendanav a.information .hover {
  background-position: -600px -53px;
}

#agendanav a.registration {
  background-position: -750px 0;
  width: 150px;
}

#agendanav .highlight a.registration:hover,
#agendanav a.registration .hover {
  background-position: -750px -53px;
}

/* Navigation for Information*/


#infonav {
  list-style: none;
  width:900px;
  margin-left:0;
  margin-top:0;
  padding-left:0;
  padding-top:0;
  
}

#infonav li {
  float: left;
 
}

#infonav a * {
  display: none;
}

#infonav a,
#infonav a .hover {
  height: 50px;
	position: relative;
	display: block;
	background:url(images/PDSinfo-sprite.jpg) 0 0 no-repeat;
}

/* individual items */
#infonav a.home {
  background-position: 0 0;
  width: 150px;
}

#infonav .highlight a.home:hover,
#infonav a.home .hover {
  background-position: 0 -53px;
  width: 150px;
}

#infonav a.suggtracks {
  background-position: -150px -0px;
  width: 150px;
}

#infonav .highlight a.suggtracks:hover,
#infonav a.suggtracks .hover {
  background-position: -150px -53px;
}

#infonav a.classdes {
  background-position: -300px 0;
  width: 150px;
}

#infonav .highlight a.classdes:hover,
#infonav a.classdes .hover {
  background-position: -300px -53px;
}


#infonav a.agenda {
  background-position: -450px 0;
  width: 150px;
}

#infonav .highlight a.agenda:hover,
#infonav a.agenda .hover {
  background-position: -450px -53px;
}

#infonav a.information {
  background-position: -600px 0;
  width: 150px;
}

#infonav .highlight a.information:hover,
#infonav a.information .hover {
  background-position: -600px -53px;
}

#infonav a.registration {
  background-position: -750px 0;
  width: 150px;
}

#infonav .highlight a.registration:hover,
#infonav a.registration .hover {
  background-position: -750px -53px;
}

/* Navigation for Registration*/


#regnav {
  list-style: none;
  width:900px;
  margin-left:0;
  margin-top:0;
  padding-left:0;
  padding-top:0;
  
}

#regnav li {
  float: left;
 
}

#regnav a * {
  display: none;
}

#regnav a,
#regnav a .hover {
  height: 50px;
	position: relative;
	display: block;
	background:url(images/PDStestamonial-sprite.jpg) 0 0 no-repeat;
}

/* individual items */
#regnav a.home {
  background-position: 0 0;
  width: 150px;
}

#regnav .highlight a.home:hover,
#regnav a.home .hover {
  background-position: 0 -53px;
  width: 150px;
}

#regnav a.suggtracks {
  background-position: -150px -0px;
  width: 150px;
}

#regnav .highlight a.suggtracks:hover,
#regnav a.suggtracks .hover {
  background-position: -150px -53px;
}

#regnav a.classdes {
  background-position: -300px 0;
  width: 150px;
}

#regnav .highlight a.classdes:hover,
#regnav a.classdes .hover {
  background-position: -300px -53px;
}


#regnav a.agenda {
  background-position: -450px 0;
  width: 150px;
}

#regnav .highlight a.agenda:hover,
#regnav a.agenda .hover {
  background-position: -450px -53px;
}

#regnav a.information {
  background-position: -600px 0;
  width: 150px;
}

#regnav .highlight a.information:hover,
#regnav a.information .hover {
  background-position: -600px -53px;
}

#regnav a.registration {
  background-position: -750px 0;
  width: 150px;
}

#regnav .highlight a.registration:hover,
#regnav a.registration .hover {
  background-position: -750px -53px;
}



/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion {
	width:400px;
	overflow: hidden;
	background-color:#ffffff;
	margin:0 auto;
	
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 *
 * NOTE:
 * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
 * user from selecting the text in the AccordionPanelTab. These are proprietary browser
 * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
 * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
 * validate, and don't care if the user can select the text within an AccordionPanelTab,
 * you can safely remove those properties without affecting the functionality of the widget.
 */
.AccordionPanelTab {
	
background:url(images/tab_up.jpg) no-repeat;
	margin-left: 0px;
	padding: 4px;
	padding-left:8px;
	cursor: pointer;
	width: 400px;
	height:47px;
	color:#0099cc;
	-moz-user-select: none;
	-khtml-user-select: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
}

.AccordionPanelTabTall {
	
background:url(images/tab_up.jpg) no-repeat;
	margin-left: 0px;
	padding: 4px;
	padding-left:8px;
	cursor: pointer;
	width: 400px;
	height:47px;
	color:#0099cc;
	-moz-user-select: none;
	-khtml-user-select: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow:hidden;
	margin: 0px;
	padding: 4px;
	padding-left:10px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

.note {
background-color:#FFFF66;
border:1px #ff9900 solid;
padding:2px;
font-style:italic;
color:#666666;
}
/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	color: #ff9900;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	color: #ff9900;
	background:url(images/tab_down.jpg) no-repeat;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #0099cc;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */



.AccordionFocused .AccordionPanelTab {
	background-color: #ffffff;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color: #ffffff;
	
	background:url(images/tab_down.jpg) no-repeat;
}


/*Slider*/


#intro {
    padding-bottom: 10px;
}

h2 {
    margin: 0;
    margin-bottom: 14px;
    padding: 0;
}

#slider {
    width: 850px;
    margin: 0 auto;
    position: relative;
	
}

.scroll {
    height: 460px;
    width: 850px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
    background: #efefef url(images/gradient.gif) repeat-x scroll left bottom;
}

.scrollContainer div.panel {
    padding: 20px;
    height: 420px;
    width: 820px;
	background-color:#efefef;
}

#shade {
    background: #ffffff;
    height: 50px;
}


ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 5px;
	padding-top:9px;
	/*padding-top is for ie*/
}

ul.navigation li {
    display: inline;
    margin-right: 8px;
	font-size:14px;
	font-weight:bold;
}

ul.navigation a {
    padding: 9px;
    color: #000;
    text-decoration: none;
}

ul.navigation a:hover {
    background-color: #efefef;
}

ul.navigation a.selected {
    background-color: #efefef;
}

ul.navigation a:focus {
    outline: none;
}

.scrollButtons {
    position: absolute;
    top: 150px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -23px;
}

.scrollButtons.right {
    right: -23px;
}

.hide {
    display: none;
}
/*ORIGINAL CSS FROM SUGGESTED TRACKS */

h1.slider {
font-size: 24px;
font-weight:bolder;
color:#0099cc;

}


h2 {
font-size: 18px;
font-weight:900;
color:#0099cc;
padding-left: 0px;
padding-top:  7px;
padding-bottom: 3px;
}

h3 {
font-size: 26px;
font-weight: bolder;
font-style: italic;
color: #99cc00;
text-align: center;
padding-top: 1px;

}


ul.slider {
list-style:none;
list-style-image:none;
margin-left:0px;
padding-left:5px;
}

li.slider  {
padding-top:8px;
list-style-image:none;
}

.tracktimes  {
font-weight:bold;
padding-right:7px;
}

.trackdays-P  {
font-size:15px; 
letter-spacing:2px; 
font-weight:bold;
color:#669999;
}

.trackdays-F  {
font-size:15px; 
letter-spacing:2px; 
font-weight:bold;
color:#ff9966;
}

.trackdays-E  {
font-size:15px; 
letter-spacing:2px; 
font-weight:bold;
color:#cc3333;
}

.trackdays-S  {
font-size:15px; 
letter-spacing:2px; 
font-weight:bold;
color:#669999;
}

.trackdays-Den  {
font-size:15px; 
letter-spacing:2px; 
font-weight:bold;
color:#ff9966;
}

.trackdays-G  {
font-size:15px; 
letter-spacing:2px; 
font-weight:bold;
color:#000000;
}

.trackdays-D  {
font-size:15px; 
letter-spacing:2px; 
font-weight:bold;
color:#0099cc;
}

.trackdays-W {
font-size:15px; 
letter-spacing:2px; 
font-weight:bold;
color:#ff6600;
}




/*non-app css*/

a  {
color:#0099cc;
text-decoration:none;
}

a:hover {
color:#ff6600;
text-decoration:none;
}


a:focus  {
color:#ff6600;
text-decoration:none;
}

h1  {
font-size:18px;
font-weight:500;
letter-spacing:2px;
padding:4px;
margin-left:25px;
margin-bottom:30px;
margin-top:20px;
line-height:18px;
color:#333333;
}

p  {
padding:4px;
padding-left:25px;
line-height:18px;
color:#666666;
}

.homepage {
padding:8px;
padding-top:0;
margin-top:0;
margin-bottom:10px;
line-height:18px;
color:#666666;
}

ul {
padding-left:20px;
margin-left:0px;
list-style-image:url(images/orangeblt.gif);
} 


.agenda-col1 {
width:250px;
padding:5px;
margin-left:35px;
float:left;
}

.agenda-col2 {
width:250px;
padding:5px;
margin-left:15px;
float:left;
}

.agenda-col3 {
width:250px;
padding:5px;
margin-left:15px;
float:left;
}
/*footer css */

#footer  {
color:#666666;
background-color:#fff;
width:900px;
margin:0 auto;
height:100%;
overflow:hidden;
font-size:10px;
}

.footerholder  {
padding:20px;
}

.footerholderright  {
padding-right:20px;
float:right;
}

.foottext {
border-right:1px #666 solid;
padding-left:4px;
padding-right:4px;
}

.foottext a {
text-decoration:none;
color:#666;
}

.foottext a:hover {
text-decoration:none;
color:#000;
text-decoration:underline;
}