﻿body { 
  font-family: Verdana,Arial,sans-serif; font-size: small;
  background-color: black; color: white; margin: 0; padding: 0;
  min-width: 750px; text-align: center; }

body.popup { 
  min-width: 0px; text-align: left; }

#wrapper { position: relative;
  text-align: left; width: 750px; margin-left: auto; margin-right: auto;}

#wrapper_full { position: relative; width: 100%;
  text-align: left; margin: margin-left: auto; margin-right: auto; padding: 0;}

#logo { float: left; margin-top: 20px; width:160px; height: 540px; 
  background: url("images/side_logo_sj.gif") no-repeat center top;}

#logo.s_a_l_s_a { 
  background: url("images/side_logo_salsa.gif") no-repeat center top; }

#logo.j_i_v_e { 
  background: url("images/side_logo_jive.gif") no-repeat center top; }

#content {
  width: 590px; float: right; padding-top: 12px;}

#content_full {
  margin-left: 160px; margin-right:0px; padding-top: 5px; z-index: 2;}

#content_full_em { /* extra margin */
  margin-left: 166px; margin-right:10px; padding-top: 6px; z-index: 2; }

.full_center {width: 430px; margin-left: auto; margin-right: auto;}

#ads_s_a_l_s_a {
  position:fixed; top:0px; left: 0px; margin: 0px 0px 0px 0px; padding:0px 3px 3px 3px;
  width:150px; overflow:hidden; z-index: 1;
  background-color: #280000;  }

#ads_s_a_l_s_a a { display:block; background: none; padding: 0; margin: 0;}

#ads_s_a_l_s_a a img {
  background: none; border: none; padding: 3px 0px 0px 0px; margin: 0;}

#ads_j_i_v_e {
  position:fixed; top:0px; left: 0px; margin: 150px 0px 0px 0px; padding:0px 3px 3px 3px;
  width:150px; overflow:hidden;
  background-color: black;  }

#ads_j_i_v_e a { display:block; background: none; padding: 0; margin: 0;}

#ads_j_i_v_e a img {
  background: none; border: none; padding: 3px 0px 0px 0px; margin: 0;}

#footer {
  clear: both; margin-top: 25px;}

a:link { 
  text-decoration: none; color: yellow ; 
  }

a:visited { 
  text-decoration: none; color: orange; 
  }

a:hover, a:active { 
text-decoration: underline; color: white; 
}

label { display: block; float: left; width: 145px; 
        padding-top: 1px; padding-right: 1px;
        font-weight: bold; text-align: right; vertical-align: top;}


.maxin_width { /* max input width */ width: 380px;}

.fm_title { font-size: 130%; font-weight: bold; background: orange; width: 100%; 
            padding: 5px 0px 5px 3px; margin: 0;}

fieldset { border: none; margin: 0px;}

fieldset p {clear: both; margin: 12px 0px 0px 0px; padding: 0; }

fieldset .cln {display: block; float: left; 
        padding-top: 1px; padding-right: 2px;
        font-weight: bold; text-align: right; vertical-align: top;}

fieldset .req {display: block; color: red; font-size: 80%; font-style: italic; font-weight: normal; margin-top: -1px;}

fieldset .add {display: inline-block; padding: 1px 0px 0px 5px; font-weight: bold; font-style: normal;}

fieldset .note {display: block; font-size: 70%; margin: 0; font-style: italic; font-weight: normal; 
   padding: 0px 25px 0px 155px;}

.btnspc { display: inline-block; margin-left: 200px;}

input, textarea, select {margin: 0;} /* safari benifit */

input:focus, textarea:focus { background: #ffc; }

a.aa:link, a.aa:visited { /* arrowed link */
  display: inline-block; text-decoration: none; color: yellow; 
  padding-left: 10px; padding-right: 10px; background: url("images/arrow_gl.gif") no-repeat left center; }

a.aa:hover, a.aa:active { 
  display: inline-block; text-decoration: underline; color: white; 
  padding-left: 10px; padding-right: 10px; background: url("images/arrow_gl.gif") no-repeat left center; }

a.ail:link, a.ail:visited { /* inline link */
  text-decoration: none; color: yellow; }

a.ail:hover, a.ail:active { 
  text-decoration: underline; color: white; }

.ll_head { /* link list head */
  float: left; width: 235px; margin-left: -8px; padding-left: 6px; 
  background: darkred url("images/horz_fade_red.gif") repeat-y 0 0; }

#header_sj { position: relative; top: 0; left: 0;
  width: 750px; height: 144px; z-index: 3;margin-left: auto; margin-right: auto;
  background: darkred url("images/sj_logo_main.jpg") no-repeat top left;}

#header_s_a_l_s_a { position: relative; top: 0; left: 0; z-index: 3;
  width: 750px; height: 144px; margin-left: auto; margin-right: auto;
  background: darkred url("images/salsa_logo_main.jpg") no-repeat top left;}

#header_j_i_v_e { position: relative; top: 0; left: 0; z-index: 3;
  width: 750px; height: 144px; margin-left: auto; margin-right: auto;
  background: darkred url("images/jive_logo_main.jpg") no-repeat top left;}

#header_text { position: absolute; top: 20px; left: 370px; width: 350px;
  display: block; text-align: center; margin: 0;  
  padding: 0; color: white;}

#header_text h1 {display: inline-block; filter:shadow(color=black); margin: 0; padding: 0;}

#header_text .own {color: yellow;}

#header_text h3 {color: yellow;}

#hoz_nav { position: absolute; top:107px; left: 70px; margin: 0; padding: 0; list-style: none;}

#hoz_nav li { margin: 0; padding: 0; float: left;  height: 36px; width: 75px; text-align: center;
  font-weight: bold;              
  border-right: 1px solid orange; 
  background: url("images/alpha_mild_shade.png") repeat !important;
  background: url("images/alpha_mild_shade_b.png") no-repeat;
  behavior: url(/iepngfix.htc);  }

#hoz_nav .first { border-left: 1px solid orange;}

#hoz_nav .selected { 
  background: url("images/alpha_nav.png") repeat-x center center !important;
  background: url("images/alpha_nav_b.png") no-repeat center center;
  
}

#hoz_nav a:link, a:visited { 
  text-decoration: none; color: orange;}

#hoz_nav a:hover, a:active { 
  text-decoration: none; color: white;}

#hoz_nav a.single {display: block; padding-top: 9px;}

#salsa_neon {
  width: 290px; float: left;
  background: url("images/neon_bg.jpg") repeat-y 0 0; }

#salsa_neon p {
  margin-top: 0px;
  padding-top: 0px;
  padding-left: 30px; }

#salsa_neon_top {
  width: 290px; height: 85px; position: relative;
  background: url("images/salsa_neon.jpg") no-repeat 0 0; }

#salsa_neon_bottom {
  width: 290px; height: 30px; position: relative; 
  background: url("images/salsa_neon.jpg") no-repeat 0 100%; }

#jive_neon {
  width: 290px; float: right;
  background: url("images/neon_bg.jpg") repeat-y 0 0; }

#jive_neon p {
  margin-top: 0px;
  padding-top: 0px;
  padding-left: 30px; }

#jive_neon_top {
  width: 290px; height: 85px; position: relative;
  background: url("images/jive_neon.jpg") no-repeat 0 0; }

#jive_neon_bottom {
  width: 290px; height: 30px; position: relative;
  background: url("images/jive_neon.jpg") no-repeat 0 100%; }


H1 { font-size: 23px}

H2 {
   font-size : 18px;
}

H3 {
   font-size : 105%
}

small { 
    font-size: 70%;
}


.larger {
  font-size: 120%;
}

p {margin: 0; padding: 5px 0px;}

/* These needed as H's put space below in tight table cells: */
.h1font { font-family: Verdana, Arial; font-size: 26px}
.h2font { font-family: Verdana, Arial; font-size: 18px}
.h3font { font-family: Verdana, Arial; font-size: 16px}

.h1_2   { font-family: Arial, Helvetica, sans-serif, 'MS sans serif'; font-size: 18px}


.sm1 { 
    font-size: 80%;
}
.sm2 { 
    font-size: 70%;
}

.pm          { font-family: Verdana,Arial; font-size: 12px
               margin-left: 30px; margin-right: 30px }

textarea     { font-size: 12px;  }

.sml_btn { font-size: 80% }

.chat {font-size: 85%; }

.chat hr {width: 50%; text-align: center;}

.chat ul { list-style-type: none; padding: 0; margin: 0;}

.chat li {  padding-left: 15px;} 

.chat .top { border-top: 1px dashed black; margin-top: 3px; padding-left: 2px; }

.chat .vtop { margin: 0;  padding-left: 2px; }

.chat a:link {
  text-decoration: none; color: yellow; }

.chat a:active, .chat a:visited {
  text-decoration: none; color: #934600; }

.chat a:hover {
  text-decoration: underline; color: white; }

.chat img {position: relative; top: 2px}

.chat_msg {width: 40em; padding-right: 10px; border-right: 1px dashed black; font-size: 90%}

.scol_form { /* single column form */
  width: 40em; }

.end_float {clear: both;}

/* table row shaded with purple border. background:url(images/shade_lp_l.gif) */
.trspb { border-left-style: solid; border-left-width: 1px; border-left-color: orange;
         border-right-style: solid; border-right-width: 1px; border-right-color: orange;
         border-bottom-style: none;
         border-top-style: solid; border-top-width: 1px; border-top-color: orange;
         background-color: darkred}

/* table row purple border */
.trpb { border-left-style: solid; border-left-width: 1px; border-left-color: orange;
        border-right-style: solid; border-right-width: 1px; border-right-color: orange;
        border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: orange;
        border-top-style: solid; border-top-width: 1px; border-top-color: orange;
        background-color: #280000;}

/* search match hightlight */
.mh {background-color: yellow; color: black;}

/* no padded background img */
.npi { background-image: none !important; padding-left: 0px !important; padding-right: 0px !important; }

table.events { width: 100%; border-collapse: collapse;}

table.events a:link, table.events a:visited { 
  text-decoration: none; color: darkblue;
  padding-left: 8px; padding-right: 10px; background: url("images/arrow_so.gif") no-repeat left center; }

table.events a:hover, table.events a:active { 
  text-decoration: underline; color: blue;
  padding-left: 8px; padding-right: 10px; background: url("images/arrow_so.gif") no-repeat left center; }
  


table.events td { border-bottom: 1px solid orange; padding: 3px;}

table.events .c1 { width: 100px; border-left: 1px solid orange;}

table.events .c1 img { display: inline; margin-bottom: 5px; vertical-align: top;}

table.events .c1 input {display: block; margin-top: 5px; height: 22px; font-size: 10px;}

table.events .c2 { width: 100px; border-left: 1px dotted orange }

table.events .c3 {border-left: 1px dotted orange; border-right: 1px solid orange }

table.events .ma {display:inline; font-style:italic; font-weight:bold}

table.events .li { padding: 0; margin: 0; vertical-align:middle;}

table.events th { font-weight: bold; font-size: 125%; text-align: center; background-color: orange;
  border: 1px solid orange; }

table.events_cal { width: 100%; border-collapse: collapse;}

table.events_cal a:link, table.events_cal a:visited { 
  text-decoration: underline; color: darkblue; padding-right: 6px;}

table.events_cal a:hover, table.events_cal a:active { 
  text-decoration: underline; color: blue; padding-right: 6px;}

table.events_cal th { font-weight: bold; font-size: 140%; text-align: center; background-color: orange;
                  border: 1px solid orange; }

table.events_cal td { border: 1px solid orange; padding: 3px; vertical-align: top; }

table.events_cal td h2 { text-align: center; padding: 0; margin :0;}

table.events_cal td p { padding: 5px 0 5px 0; margin :0; border-bottom: 1px dotted orange;}

table.classes { width: 100%; border-collapse: collapse;}

table.classes a:link, table.classes a:visited { 
  text-decoration: none; color: darkblue;
  padding-left: 8px; padding-right: 10px; background: url("images/arrow_so.gif") no-repeat left center; }

table.classes a:hover, table.classes a:active { 
  text-decoration: underline; color: blue;
  padding-left: 8px; padding-right: 10px; background: url("images/arrow_so.gif") no-repeat left center; }

table.classes td { border-bottom: 1px solid orange; padding: 3px;}

table.classes .c1 { width: 75px; border-left: 1px solid orange;}

table.classes .c2 { width: 100px; border-left: 1px dotted orange; }

table.classes .c3 { border-left: 1px dotted orange;}

table.classes .c4 { width: 100px; border-left: 1px dotted orange; 
  border-right: 1px solid orange }

table.classes .cw { font-weight: bold; font-style: italic; border: 1px solid orange; font-size:110%}

table.classes th { font-weight: bold; font-size: 125%; text-align: center; background-color: orange;
  border: 1px solid orange; }

.row_hl { font-weight: bold;}

.cal_head {text-align: center; padding-bottom: 10px; margin: 0;}

.glow_rdu {padding-left: 10px; padding-right: 10px;}

.vh { /* venue hightlight */
   font-weight: bold; }

.awesome {position: absolute; color: darkred; font-style: italic; font-size: 70%; padding-top: 0.25em;}

.compact_top {margin-top: 0px; padding-top: 0px}

.compact_vert {margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;}

.compact_all {margin: 0; padding: 0}

.news_auth {font-size: 80%; font-style: italic; }

.news_auth a:link, .news_auth a:visited { 
  text-decoration: none; color: darkblue; }

.news_auth a:hover, .news_auth a:active { 
  text-decoration: underline; color: blue; }

.news_item {margin: 0; padding-top: 10px; font-size: 90%}

.news_item a:link, .news_item a:visited { 
  text-decoration: none; color: darkblue;
  padding-left: 8px; padding-right: 10px; background: url("images/arrow_so.gif") no-repeat left center; }

.news_item a:hover, .news_item a:active { 
  text-decoration: underline; color: blue; 
  padding-left: 8px; padding-right: 10px; background: url("images/arrow_so.gif") no-repeat left center; }

.contact_item {margin: 0; padding-top: 10px; font-size: 90%}

.contact_item a:link, .contact_item a:visited { 
  text-decoration: none; color: darkblue;
  padding-left: 8px; padding-right: 10px; background: url("images/arrow_so.gif") no-repeat left center; }

.contact_item a:hover, .contact_item a:active { 
  text-decoration: underline; color: blue; 
  padding-left: 8px; padding-right: 10px; background: url("images/arrow_so.gif") no-repeat left center; }

table.links { width: 100%; border-collapse: collapse; margin-bottom: 20px;}

table.links th { font-weight: bold; font-size: 140%; background-color: darkred;
                  border: 1px solid orange; }

table.links td { border: 1px solid orange; padding: 3px; font-size:90%}

table.venues { width: 100%; border-collapse: collapse; margin-bottom: 20px;}

table.venues th { font-weight: bold; font-size: 140%; background-color: darkred;
                  border: 1px solid orange; }

table.venues td { border: 1px solid orange; padding: 3px; font-size:90%}


/*** IMAGE BOXES ***/

.slim .cb {margin:0.5em 0;}
.slim .bt { /* top */
	height:10px;
	margin:0 0 0 10px;
	background:url("images/box_slim.gif") no-repeat 100% 0;
}
.slim .bt div {
	position:relative;
	left:-10px;
	width:10px;
	height:10px;
	background:url("images/box_slim.gif") no-repeat 0 0;
	font-size:0;
	line-height:0;
}
.slim .bb { /* bottom */
	height:10px;
	margin:0 0 0 10px;
	background:url("images/box_slim.gif") no-repeat 100% 100%;
}
.slim .bb div {
	position:relative;
	left:-10px;
	width:10px;
	height:10px;
	background:url("images/box_slim.gif") no-repeat 0 100%;
	font-size:0;
	line-height:0;
}
.slim .i1 {
	padding:0 0 0 5px;
	background:url("images/box_slim_bdr.gif") repeat-y 0 0;
}
.slim .i2 {
	padding:0 5px 0 0;
	background:url("images/box_slim_bdr.gif") repeat-y 100% 0;
}
	/* wrapper - own use*/
.slim .i3 {
	display:block;
	margin: 0px;
	padding:0px 5px;}

.slim .i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;}
.slim .i3 {display:inline-block;}
.slim .i3 {display:block;}

.glow .cb {margin: 0.5em 0;}
.glow .bt { /* top */
	height:20px;
	margin:0 0 0 20px;
	background:url("images/box_glow.png") no-repeat 100% 0 !imporant;
	background:url("images/box_glow.gif") no-repeat 100% 0;
}
.glow .bt div {
	position:relative;
	left:-20px;
	width:20px;
	height:20px;
	background:url("images/box_glow.png") no-repeat 0 0 !imporant;
	background:url("images/box_glow.gif") no-repeat 0 0;
	font-size:0;
	line-height:0;
}
.glow .bb { /* bottom */
	height:20px;
	margin:0 0 0 20px;
	background:url("images/box_glow.png") no-repeat 100% 100% !imporant;
	background:url("images/box_glow.gif") no-repeat 100% 100%;
}

.glow .bb div  {
	position:relative;
	left:-20px;
	width:20px;
	height:20px;
	background:url("images/box_glow.png") no-repeat 0 100% !imporant;
	background:url("images/box_glow.gif") no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

.glow .i1 {
	padding:0 0 0 15px;
	background:url("images/box_glow_bdr.png") repeat-y 0 0 !imporant;
	background:url("images/box_glow_bdr.gif") repeat-y 0 0;
}
.glow .i2 {
	padding:0 15px 0 0;
	background:url("images/box_glow_bdr.png") repeat-y 100% 0 !imporant;
	background:url("images/box_glow_bdr.gif") repeat-y 100% 0;
}
	/* wrapper - own use*/
.glow .i3 {
	display:block;
	margin: 0px;
	padding:0px 5px;
        color: black;
        background-color: #ffcc00;}

.glow .i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;}

.glow .i3 {display:inline-block;}
.glow .i3 {display:block;}

.glow_margin {margin-left: 10px; margin-right: 10px}


.solid .cb {margin: 0.1em 0;}
.solid .bt { /* top */
	height:10px;
	margin:0 0 0 10px;
	background:url("images/box_solid.gif") no-repeat 100% 0;
}
.solid .bt div {
	position:relative;
	left:-10px;
	width:10px;
	height:10px;
	background:url("images/box_solid.gif") no-repeat 0 0;
	font-size:0;
	line-height:0;
}
.solid .bb { /* bottom */
	height:10px;
	margin:0 0 0 10px;
	background:url("images/box_solid.gif") no-repeat 100% 100%;
}

.solid .bb div  {
	position:relative;
	left:-10px;
	width:10px;
	height:10px;
	background:url("images/box_solid.gif") no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

.solid .i1 {
	padding:0 0 0 7px;
	background:url("images/box_solid_bdr.gif") repeat-y 0 0;
}
.solid .i2 {
	padding:0 7px 0 0;
	background:url("images/box_solid_bdr.gif") repeat-y 100% 0;
}
	/* wrapper - own use*/
.solid .i3 {
	display:block;
	margin: 0px;
	padding:0px 4px;
        color: black;
        background-color: #ffcc00;}

.solid .i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;}

.solid .i3 {display:inline-block;}
.solid .i3 {display:block;}

.solid_pad {margin-left: 10px; margin-right: 10px}

.dark .cb {margin: 0.1em 0;}
.dark .bt { /* top */
	height:10px;
	margin:0 0 0 10px;
	background:url("images/box_dark.gif") no-repeat 100% 0;
}
.dark .bt div {
	position:relative;
	left:-10px;
	width:10px;
	height:10px;
	background:url("images/box_dark.gif") no-repeat 0 0;
	font-size:0;
	line-height:0;
}
.dark .bb { /* bottom */
	height:10px;
	margin:0 0 0 10px;
	background:url("images/box_dark.gif") no-repeat 100% 100%;
}

.dark .bb div  {
	position:relative;
	left:-10px;
	width:10px;
	height:10px;
	background:url("images/box_dark.gif") no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

.dark .i1 {
	padding:0 0 0 7px;
	background:url("images/box_dark_bdr.gif") repeat-y 0 0;
}
.dark .i2 {
	padding:0 7px 0 0;
	background:url("images/box_dark_bdr.gif") repeat-y 100% 0;
}
	/* wrapper - own use*/
.dark .i3 {
	display:block;
	margin: 0px;
	padding:0px 4px;
        background-color: #280000;}

.dark .i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;}

.dark .i3 {display:inline-block;}
.dark .i3 {display:block;}

.dark_dashb {border: 1px dashed #280000; }

.spcr_s { /* spacer small */
margin: 0; padding: 0; height: 5px }





