/********************

  Overall Demo pages

 ********************/

body                   { font: 12px Georgia, Serif; background: #fff; color: #000; }

div.topHeader              { background-color:#FF6600; }

div.header              { margin-left: 1px; }

div.footer              { margin-left: 1px; }

div.footerOrange              { margin-left: 1px; background-color:#FF6600;}

a, a img               { border: 0; text-decoration: none; }

#page-wrap, #demo2     { width: 90%; padding: 0 15px; margin: 0 auto 50px; position: relative; }

div.round-tl {

  background: url(top-left.gif) top left no-repeat;

}

div.round-tr {

  background: url(top-right.gif) top right no-repeat;

}

div.round-bl {

  background: url(bottom-left.gif) bottom left no-repeat;

}





div.round-br {

  background: url(bottom-right.gif) bottom right no-repeat;

}

div.afterMenu { margin-left: 30px;margin-top: 10px;margin-right: 10px;}




h1                     { font: bold 40px Helvetica, Sans-Serif; letter-spacing: -2px; margin: 20px 0; text-align: center; }

h2                     { font: bold 24px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 10px 0; color: black; }

h2.title               { text-align: center; }

h3                     { font: bold 20px Helvetica, Sans-Serif; margin: 0 0 10px 0; color: #505; }

/*h3.sliderHeader        { font: bold 18px Helvetica, Sans-Serif; margin: 0 0 10px 0; color: #FF6600; background-color:#FFFFFF; text-shadow:black 1px 1px 2px;border: black 0px solid; }*/

h3.sliderHeader        { font: bold 18px Helvetica, Sans-Serif; margin: 0 0 10px 0; color: #FF6600; background-color:#FFFFFF; border: black 0px solid; }

a.sliderHeader        { font: bold 18px Helvetica, Sans-Serif; margin: 0 0 10px 0; color:#330066; background-color:#FFFFFF; border: black 0px solid; }

h5, .header            { font: bold 15px Helvetica, Sans-Serif; text-align: center; }

pre, code              { font: 13px/1.8 Monaco, MonoSpace; margin: 0 0 15px 0; padding: 5px; background: #f5f5f5; block: inline; width: 100%; overflow-x: auto; }

p.smallerText {font: 10px  Georgia, Serif; color:white; text-align: center; background-color:rgb(204,204,255);}}

blockquote             { margin-left: 30px; }

.headerText            { padding-left: 30px;padding-right: 30px;text-align: center; }

.headerText3            { font: bold 18px Helvetica, Sans-Serif; padding-left: 30px;padding-right: 30px;text-align: left; }

.newsSectionHeader     { padding-left:10px;padding-right:10px;}

a.readMoreSlider      {font: 12px  Georgia, Serif; text-align: center; background-color:#FF9;}

a.clickHereSlider      {font: 12px  Georgia, Serif; text-align: center; background-color:#FC6;}

img.sliderImage       {border:black 0px solid;}

table.tblborderpurple { border:#7F3FAA 1px solid;}

table.tblborderorange { border:#FF3300 1px solid;}

td.kidsballroomlinksleft{border-top:#EFF2FB 1px solid;border-left:#EFF2FB 1px solid;border-right:white 0px solid; border-bottom: #EFF2FB 1px solid;}

td.kidsballroomlinksleftsel{border-top:orange 1px solid;border-left:orange 1px solid;border-right:white 0px solid; border-bottom: orange 1px solid;}

td.kidsballroomlinks{border-top:#EFF2FB 1px solid;border-left:#EFF2FB 0px solid;border-right:white 0px solid; border-bottom: #EFF2FB 1px solid;}

td.kidsballroomlinkssel{border-top:orange 1px solid;border-left:orange 0px solid;border-right:white 0px solid; border-bottom: orange 1px solid;}

td.kidshiphoplinksleft{border-top:#EFF2FB 1px solid;border-left:#EFF2FB 1px solid;border-right:white 0px solid; border-bottom: #EFF2FB 1px solid;}

td.kidshiphoplinksleftsel{border-top:orange 1px solid;border-left:orange 1px solid;border-right:white 0px solid; border-bottom: orange 1px solid;}

td.kidshiphoplinks{border-top:#EFF2FB 1px solid;border-left:#EFF2FB 0px solid;border-right:white 0px solid; border-bottom: #EFF2FB 1px solid;}

td.kidshiphoplinkssel{border-top:orange 1px solid;border-left:orange 0px solid;border-right:white 0px solid; border-bottom: orange 1px solid;}



td.reallySmall  {font: 6px  Georgia, Serif; text-align: center;color:white; }

td.rightColumn        {border-top:white 0px solid;border-left:#9999FF 0px solid;border-right:white 0px solid; border-bottom: #9999FF 0px dotted;}

td.rightColumnNewsHeader  {background:transparent;font: bold 16px  Georgia, Serif; text-align: center;color:white;line-height:18px;vertical-align:bottom; }

td.rightColumnNewsSubHeader  {background:transparent;font: bold 11px  Georgia, Serif; text-align: left;color:black;line-height:14px;vertical-align:bottom; }

td.rightColumnNews        {background:transparent; border:#FF6600; 0.5px dotted;}

tr.rightColumnNewsRow {background:transparent;border-top:white 0px solid;border-left:#FF6600 0px solid;border-right:#FF6600 0px dotted; border-bottom: #FF6600 1px dotted;}

td.rightColumnNewsRow {font-size:8pt; font-weight:normal; color:black;padding:0px 0px 0px 0px; line-height:16px;text-align: left;color:black;text-decoration:none; border-top:white 0px solid;border-left:#FF6600 0px solid;border-right:#FF6600 0px dotted; border-bottom: #FF6600 1px dotted;}

td.rightColumnNewsLastRow {font-size:8pt; font-weight:normal; color:black;padding:0px 0px 0px 0px; line-height:16px;background:transparent;text-align: left;color:black;text-decoration:none; border-top:white 0px solid;border-left:#FF6600 0px solid;border-right:#FF6600 0px dotted; border-bottom: #FF6600 0px dotted;}

td.rightColumnNewsLastRowSel {font-size:8pt; font-weight:normal; color:black;padding:0px 0px 0px 0px; line-height:16px;background:transparent;text-align: left;color:black;text-decoration:underline; border-top:white 0px solid;border-left:#FF6600 0px solid;border-right:#FF6600 0px dotted; border-bottom: #FF6600 0px dotted;}

td.rightColumnAd        {background:transparent; border:rgb(204,204,255) 0px dotted;}

td.rightColumnAdHeader  {background:transparent; font: bold 16px  Georgia, Serif; line-height:25px;text-align: center;color:#330066; }

tr.rightColumnAdRow {background:transparent; border-top:white 0px solid;border-left:#9999FF 0px solid;border-right:#9999FF 0px dotted; border-bottom: #9999FF 1px dotted;}



tr.rightColumnAdRowSel {background:transparent; border-top:white 0px solid;border-left:orange 1px solid;border-right:orange 1px dotted; border-bottom: orange 1px dotted;}

tr.rightColumnAdLastRowSel {background:transparent; border-top:white 0px solid;border-left:orange 1px solid;border-right:orange 1px dotted; border-bottom: orange 0px dotted;}



td.rightColumnAdRow {background:transparent; font: 12px  Georgia, Serif; line-height:15px; text-align: left;color:black;text-decoration:none; border-top:white 0px solid;border-left:#9999FF 0px solid;border-right:#9999FF 0px dotted; border-bottom: #9999FF 1px dotted;}



td.rightColumnAdRowSel {background:transparent; font:hyperlink 12px  Georgia, Serif; line-height:15px; text-align: left;text-decoration:underline;border-top:white 0px solid;border-left:#9999FF 0px solid;border-right:#9999FF 0px dotted; border-bottom:#9999FF 1px dotted; }

td.rightColumnAdRowLast {background:transparent; font: 12px  Georgia, Serif; line-height:15px; text-align: left;color:black;text-decoration:none; border-top:white 0px solid;border-left:#9999FF 0px solid;border-right:#9999FF 0px dotted; border-bottom: #9999FF 0px dotted;}

td.rightColumnAdRowLastSel {background:transparent; font:hyperlink 12px  Georgia, Serif; line-height:15px; text-align: left;text-decoration:underline;border-top:white 0px solid;border-left:#9999FF 0px solid;border-right:#9999FF 0px dotted; border-bottom:#9999FF 0px dotted; }

td.belowHeaderLeft {background-color:white;font: 12px  Georgia, Serif; line-height:25px; border-top:#9999FF 1px solid;border-left:#9999FF 0px solid;border-right:#9999FF 0px dotted; border-bottom: #9999FF 1px dotted;}

td.belowHeaderRight {background-color:#FAF5FF;font: 12px  Georgia, Serif; line-height:25px; border-top:#9999FF 0px solid;border-left:#9999FF 0px solid;border-right:#9999FF 0px dotted; border-bottom: #9999FF 1px dotted;}

td.bottomSectionHeader  {background:transparent; font: bold 16px  Georgia, Serif; line-height:25px;text-align: left;color:#330066; }

a.bottomSectionHeader  {background:transparent; font: bold 16px  Georgia, Serif; line-height:25px;text-align: left;color:#330066; }

td.bottomMenu {width:100px; text-align:center;}
/* white boxes with rounded corners */
.roundedcornr_box_white {
	background: url(roundedcornr_white_tl.png) no-repeat top left;
}
.roundedcornr_top_white {
	background: url(roundedcornr_white_tr.png) no-repeat top right;
}
.roundedcornr_bottom_white {
	background: url(roundedcornr_white_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_white div {
	background: url(roundedcornr_white_br.png) no-repeat bottom right;
}
.roundedcornr_content_white {
	background: url(roundedcornr_white_r.png) top right repeat-y;
}

.roundedcornr_top_white div,.roundedcornr_top_white,
.roundedcornr_bottom_white div, .roundedcornr_bottom_white {
	width: 100%;
	height: 15px;
	font-size: 1px;
}
.roundedcornr_content_white, .roundedcornr_bottom_white {
	margin-top: 0px;
	margin-bottom: 0px;
}
.roundedcornr_content_white { padding: 0 15px; }

/* orange boxes with rounded corners */
/*td.roundedcorner_box_top_orange{background: url(roundedcornr_orange_br-new.png) no-repeat top;}*/
.roundedcornr_box_orange {
	background: url(roundedcornr_yellow_tl.png) no-repeat top left;
}
.roundedcornr_top_orange {
	background: url(roundedcornr_orange_br-new.png) no-repeat top right;
}
.roundedcornr_bottom_orange {
	background: url(roundedcornr_yellow_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_orange div {
	background: url(roundedcornr_yellow_br.png) no-repeat bottom right;
}
.roundedcornr_content_orange {
	background: url(roundedcornr_orange_r.png) top right repeat-y;
}

.roundedcornr_top_orange div,.roundedcornr_top_orange,
.roundedcornr_bottom_orange div, .roundedcornr_bottom_orange {
	width: 100%;
	height: 15px;
	font-size: 1px;
}
.roundedcornr_content_orange, .roundedcornr_bottom_orange {
	margin-top: 0px;
	margin-bottom: 0px;
}
.roundedcornr_content_orange { padding: 0 15px; }
/* final version of orange rounded corners box*/

/*.bl {background: url(rounded-bl.png) 0 100% no-repeat white; width: 20em}   
.br {background: url(rounded-br.png) 100% 100% no-repeat}   
.tl {background: url(rounded-tl.png) 0 0 no-repeat}   
.tr {background: url(rounded-tr.png) 100% 0 no-repeat; padding:10px}   
.clear {font-size: 1px; height: 1px}  
*/

/*.t {background: url(dot2.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot2.gif) 0 100% repeat-x}
.l {background: url(dot2.gif) 0 0 repeat-y}
.r {background: url(dot2.gif) 100% 0 repeat-y}
.bl {background: url(rounded-bl.png) 0 100% no-repeat}
.br {background: url(rounded-br.png) 100% 100% no-repeat}
.tl {background: url(rounded-tl.png) 0 0 no-repeat}
.tr {background: url(rounded-tr.png) 100% 0 no-repeat; padding:10px}
*/

.tpurple {background: url(dot-purple.png) 0 0 repeat-x; width: 20em}
.bpurple {background: url(dot-purple.png) 0 100% repeat-x}
.lpurple {background: url(dot-purple.png) 0 0 repeat-y}
.rpurple {background: url(dot-purple.png) 100% 0 repeat-y}
.blpurple {background: url(rounded-purple-bl.png) 0 100% no-repeat}
.brpurple {background: url(rounded-purple-br.png) 100% 100% no-repeat}
.tlpurple {background: url(rounded-purple-tl.png) 0 0 no-repeat}
.trpurple {background: url(rounded-purple-tr.png) 100% 0 no-repeat; padding:10px}




ul                     { margin: 0; padding-left: 35px; }

ul li.sliderli                { font: 15px Helvetica, Sans-Serif; margin: 10px 10px 10px 0px; }



ul li.tofit                { line-height: 15px; }



#nav                   { display: block; width: 90%; margin: 10px auto; text-align: center; line-height: 3em; }

#nav a                 { text-align: center; background: black; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; white-space: nowrap; }

#nav a.git             { background: #006; }

#nav a.play            { background: #060; }

#nav a.issue           { background: #600; }

#nav a:hover, #nav a.current { background: #666; }



.themeselector, .ani   { margin: 0 auto; text-align: center; }



#status                { color: #00a; font-weight: bold; }

.alert                 { color: #f00; font-weight: bold; }

.alert a, .attention   { color: #a00; }

.data                  { width: 100%; border: #555 1px solid; border-collapse: collapse; }

.data td, .data th     { border: #555 1px solid; padding: 0 5px; }

.data th               { background: #eee; }

.data .col             { width: 200px; }



/*****************

  Main demo page

 *****************/

#main #slider1         { width: 550px; height: 300px; list-style: none; }

#main #slider2         { width: 800px; height: 390px; list-style: none; }



/* Set slider1 panel 5 stuff - adding padding directly to the panel will

   shift panels after it, so we need a wrapper */

#main #slider1 .panel5 ul { width: 200px; margin: 0px 5px; }



/* Set slider2 panel sizes, Main & FX demo pages */

#slider2 .panel1 { width: 500px; height: 350px; }

#slider2 .panel2 { width: 450px; height: 420px; }

#slider2 .panel3 { width: 680px; height: 317px; }

#slider2 .panel4 { width: 100%; } /* With no specific size, it defaults to wrapper size; except in IE7, it needs a width defined, so set to 100% */

#slider2 .panel5 { width: 680px; height: 317px; }

#slider2 .panel6 { width: 450px; height: 300px; }



/* For Specific Slides, these also apply to FX demo pages */

.textSlide             { padding: 20px 30px; }

.textSlide h3          { font: 20px Georgia, Serif; }

.textSlide h4          { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }

.textSlide ul          { list-style: disc; margin: 0; padding-left: 20px; }

.textSlide ul li       { display: list-item; margin-left:10px;}

.rightside             { float: right; margin: 0 0 2px 10px; }

.smallList {  display: list-item;font: 10px  Georgia, Serif; color: #444; margin: 0 0 -1px 0; }



.quoteSlide            { padding: 20px; }

.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }

.quoteSlide p          { text-align: center; }



/***************************

  FX Demo Page

 ***************************/

/* Demo page accordions */

.accordion             { width: 70%; margin: 0 auto; }

.accordion .ui-widget-content a { color: #004499; }



/** Demo 1 **/

/* colorbox images to full size */

#demo2 #slider1        { width: 400px; height: 300px; list-style: none; }

#cboxPhoto             { width: 100%; height: 100%; margin: 0 !important; }

#cboxTitle             { color: #000 !important; }



#demo1 div.anythingSlider .start-stop { margin-top: 15px; }



/* Change metallic slider defaults to show thumbnails -

  using #demo2 (page wrapper) to increase this CSS priority */

#demo2 div.anythingSlider-metallic .thumbNav a { background-image: url(); height: 30px; width: 30px; border: #000 1px solid; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

#demo2 div.anythingSlider-metallic .thumbNav a span { visibility: visible; }



/* border around image to show current page */

#demo2 div.anythingSlider-metallic .thumbNav a:hover,

#demo2 div.anythingSlider-metallic .thumbNav a.cur { border-color: #fff; }

/* reposition the start/stop button */

#demo2 div.anythingSlider-metallic .start-stop { margin-top: 15px; }



/** Demo 2 **/

#demo2 #slider2        { width: 600px; height: 350px; list-style: none; }



/** Demo 3 **/

#demo2 #slider3        { width: 500px; height: 400px; list-style: none; }



/* expand image */

#slider3 img           { width: 100%; height: 100%; position: relative; }

#slider3 .panel        { position: relative; }



/* position caption close button */

.caption-top .close,

.caption-right .close,

.caption-bottom .close,

.caption-left .close   { font-size: 80%; cursor: pointer; float: right; display: inline-block; }



/* captions */

/* set to position: relative here in case javascript is disabled, script sets captions to position: absolute */

#slider3 .caption-top,

#slider3 .caption-right,

#slider3 .caption-bottom,

#slider3 .caption-left { background: #000; color: #fff; padding: 10px; margin: 0; position: relative; z-index: 10; opacity: .8; filter: alpha(opacity=80); }



/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */

#slider3 .caption-top  { left: 0; top: 0; width: 480px; height: 30px; }



/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */

#slider3 .caption-right  { right: 0; bottom: 0; width: 130px; height: 180px;  }



/* Bottom caption  - padding is included in the width (480px here, 500px in the script), same for height */

#slider3 .caption-bottom { left: 0; bottom: 0; width: 480px; height: 30px; }



/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */

#slider3 .caption-left   { left: 0; bottom: 0; width: 130px; height: 180px;  }



/******************

  Expand demo page

 ******************/

#wrapper1              { width: 100%; height: 300px; margin: 0 auto; }

#wrapper2              { width: 50%; height: 300px; margin: 0 auto; }

#expand #slider1,

#expand #slider2       { width: 100%; height: 300px; list-style: none; }

body#expand h2,

body#expand h3         { text-align: center; }



/***************************

  Video Compatibility table

 ***************************/

.video-info            { width: 700px; margin: 0 auto; margin-top: 50px; font-size: 18px; }

.video-info h2         { text-align: center; }

.video-info ul,

.video-info li         { margin: 0; }

.video-info sup        { font-size: 12px; }

.video-info th.header  { width: 25px; }

.good                  { background: #080; }

.bad                   { background: #800; }

.prob                  { background: #880; }

.group                 { border: #000 1px solid; }



/******************

  css3 demo page

 ******************/

.animations            { margin: 20px 20px 20px 5px; }

.ani                   { margin-top: 10px; }



/******************

  tooltips (Jatt)

 ******************/

.tooltip { cursor: pointer; }

#tooltip {

 min-width: 100px;

 color: #dddddd;

 background: #444;

 border: 1px solid #777;

 padding: 8px;

 display: none;

 opacity: 0.9;

 filter: alpha(opacity=90);

 text-align: left;

 border-radius: .5em;

 -moz-border-radius: .5em;

 -webkit-border-radius: .5em;

 z-index: 1000;

}

#tooltip .body {

 display: block;

 text-align: center;

}

table.regularLinks{
background: url(sECE0F8tFFFFFFgh80.png) repeat-x; 
	
}

.cornerbox {
 position: relative;
 width:100%;
 }
 .corner {
 position: absolute;
 width: 10px;
 height: 10px;
 background: url(r10sFF6600tffffffbgffffffbw1bsFF6600gdh150th150.png);
 font-size: 0%;
 }
 .content {
 border: 1px solid #FF6600;
background: url(sFF6600tffffffgh150.png) repeat-x;
 background-color: #ffffff;
 height: 240px;
 }
 .tl {
 top: 0;
 left: 0;
 background-position: 0px 0;
 }
 .tr {
 top: 0;
 right: 0;
 background-position: 10px 0;
 }
 .bl {
 bottom: 0;
 left: 0;
 background-position: 0px 10px;
 }
 .br {
 bottom: 0;
 right: 0;
 background-position: 10px 10px;
 }
 
 .cornerbox2 {
 position: relative;
 width:100%;
 }
 .corner2 {
 position: absolute;
 width: 10px;
 height: 10px;
 background: url(r10sECE0F8tFFFFFFbgffffffbw1bs708090gdh80th300.png);
 font-size: 0%;
 }
 .content2 {
 border: 1px solid #708090;
background: url(sECE0F8tFFFFFFgh80.png) repeat-x;
 background-color: #FFFFFF;
 height: 380px;
 }
 .tl2 {
 top: 0;
 left: 0;
 background-position: 0px 0;
 }
 .tr2 {
 top: 0;
 right: 0;
 background-position: 10px 0;
 }
 .bl2 {
 bottom: 0;
 left: 0;
 background-position: 0px 10px;
 }
 .br2 {
 bottom: 0;
 right: 0;
 background-position: 10px 10px;
 }

.cornerbox3 {
 position: relative;
 width:600px;
 }
 .corner3 {
 position: absolute;
 width: 10px;
 height: 10px;
 background: url(r10sFFFFFFtFFFFFFbgffffffbw1bs708090gdh10th300.png);
 font-size: 0%;
 }
 .content3 {
 border: 1px solid #708090;
 background-color: #FFFFFF;
 height: 520px;
 width: 598px;
 }
 .tl3 {
 top: 0;
 left: 0;
 background-position: 0px 0;
 }
 .tr3 {
 top: 0;
 right: 0;
 background-position: 10px 0;
 }
 .bl3 {
 bottom: 0;
 left: 0;
 background-position: 0px 10px;
 }
 .br3 {
 bottom: 0;
 right: 0;
 background-position: 10px 10px;
 }