/*body styles*/
body{
width: 99.5%;
margin: .5% .25%;
text-align: center;
background-color: #004080;#cac4ce;CAC4CE;#0066cc;#3399ff; #222222;#800000;#001a33;#555555;#d27979;#800000;#994d00;#800000;#993333;#555555;#cc6666;#ac3939;#d27979; #df9f9f;#006666;#708090;
font-size: 1em;
border: 0px ridge #cccccc;
float: none;
box-sizing: border-box;
}

/*media queries*/
/*
@media only screen and (min-width: 799px) {

body{
font-size: 1.05em;
}




.infodisplay td, .infodisplay table.eventinfo td, .infodisplay table.eventinfo td.right, .infodisplay tr.displaytop td, .infodisplay table.eventinfo td.left{
font-size: 2em;
}


.infodisplay tr.displaytop td{
font-size: 1.2em;
}
.infodisplay table.eventinfo td.left{

font-size: 1.2em ;

}
}*/

@media only screen and (min-width: 799px) {

body{
font-size: 1.0em;
}


}

@media only screen and (min-width: 1000px) {

body{
font-size: 1.1em;
}



/*
.infodisplay td, .infodisplay table.eventinfo td, .infodisplay table.eventinfo td.right, .infodisplay tr.displaytop td, .infodisplay table.eventinfo td.left{
font-size: 2em;
}


.infodisplay tr.displaytop td{
font-size: 1.2em;
}
.infodisplay table.eventinfo td.left{

font-size: 1.2em ;

}*/
}

@media only screen and (min-width: 1250px) {

body{
font-size: 1.25em;
}


}

@media only screen and (min-width: 1400px) {

body{
font-size: 1.5em;
}


}

@media only screen and (min-width: 1600px) {

body{
font-size: 1.65em;
}

}

@media only screen and (min-width: 1900px) {

body{
font-size: 1.80em;
}

}


/*page wrap border*/
div.pagewrap{
width: 100%;
margin: 0% auto;
border: 0px ridge #cccccc;

display: flex;
background-color: #001a33;#d27979;#800000;
box-sizing: border-box;
}


/*top page bar for admin navigation*/

div.top{
width: 100%;
height: 35px;
background-color: #ffffff;
margin: 0px auto;
border-bottom: 0px solid #cccccc;
border-top: 0px solid #cccccc;
padding: 2px 0px 0px 0px;
}

/*style for page wrapper*/
div.page{
width:100%;
background-color: #ffffff;
padding: 0px;
margin: 0% 0%;
border: 0px outset #ffffff;
box-sizing: border-box;
border: 0px #0000ff inset;
}

/*pagetop box includes website title and login form*/

header{
width: 100%;
height: 65px;
margin:     0px auto;
padding: 10px 0px;
background-color: #ffffff;
border-bottom: 2px solid #cccccc;
border-top: 0px solid #cccccc;
clear: both;
}

/*top left section for website title*/

section.topleft{
width: 30%;
height: 65px;
padding: 0px;
float: left;
background-color: transparent;
margin:     0px;
text-align: left;
border-right: 0px solid black;
/*
background-image:       url('../../scbsignup2018/images/whitecross70.jpg');
background-position:       top -3px  right 0px;
background-repeat:      no-repeat;*/
}

/*website title*/

h1.sitetitle{
font: bold 1.2em arial, tahoma, helvitica,  papyrus, serif;
margin: 10px 10px 0px 20px;
text-align: left;
color: #708090;
}

/*title image*/

img.title{
max-width: 82%;
max-height:55px;
margin-left: 7%;
}

/*website title link*/

.sitetitle a:link, .sitetitle a:visited{
border: none;
text-decoration: none;
background-color: transparent;
color: #222222;
}

#headleft a:hover{
background-color: #ffffff;
text-decoration:  none;
}

/*website subtitle font*/

p.subtitle{
font: bold 10pt arial, tahoma, 'lucida handwriting', arial, tahoma, helvetica, serif;
text-align: left;
margin: -17px 0px 0px 8.45%;
padding: 0px 0px;
line-height: 3.5em;
background-color: transparent;

clear: both;
color: #222222;
}

/*top right header section used for login and logged in user menus*/

section.loginform{
width: 70%;
height: 65px;
padding: 0px;
float: right;
margin: 0px auto;
text-align: center;

color: #ffffff;
background-color:  transparent;
/*
background-image:       url('../../scbsignup2018/images/whitecross70.jpg');
background-position:       top -3px  left 0px;
background-repeat:      no-repeat;*/
}

/*loginform h2*/

.loginform h2{
width: 50%;
margin: 5px auto;
color: #800000;
background-color:transparent;
font-size: .65em;
}

/*loginform fieldset*/

.loginform fieldset{
width: 90%;
border: 0px solid red;
float: right;
padding: 0px;
margin: 8px auto;
}

/*login form form labels*/

.loginform label{
font: bold .75em  arial, tahoma, helvetica, serif;
color: #333333;
margin: 10px 2px;
float: left;
}

/*login form field*/

.loginform input{
padding: 0px;
width: 15%;
float: left;
margin: 10px 10px 10px 3px;
background-color: #ffffff;
border: #ececec 1px inset;
font: bold .75em arial, tahoma, helvetica, serif;
}

/*loginform button*/

.loginform button{
width: 12%;
float: left;
margin:  7px 5px;
background-color: #cccccc;
font: bold .85em arial, tahoma, helvetica, serif;
color: #000000;
border: #ffffff 2px outset;
}

/*loginform ul*/

.loginform ul{
margin: 0px auto;
float: left;
list-style-type: none;
padding:     0px;
background-color: transparent;
width: 240px;
}

/*loginform li*/

.loginform li{
width: 120px;
text-align: center;
float: left;
list-style-type: none;
margin: 0px auto;
padding:     0px;
}

/*loginform p*/

.loginform p{
margin: 7px;
}

/*login form link*/

.loginform a:link, .loginform a:visited{
width: 15%;
font: bold .85em arial,tahoma,  helvetica, serif;
text-decoration: none;
color:  #ff0000;
margin: 65px 0px 0px 0px;
}

/*loginform link hover*/

.loginform a:hover{
color: #333333;
background-color: #f3f3f3;
}

 /*main content section of page*/

div.content{
width: 100%;
margin: 0px auto;
padding: 0px;
background-color: #ffffff;
float: left;
border: 0px solid blue;
}

/*main content area when users are logged in and using one of the account pages*/

div.loggedincontent{
width: 76%;
margin: 00px 2% 0px 2%;
padding: 0px;
background-color: #ffffff;
float: left;
border: 0px solid black;
}

#contenttitle{
width:              500px;
margin:             0px;
padding:                3px 0px;
background-color:   transparent;
color:              #333333;
font:               bold 10pt arial, tahoma,helvetica,serif;
margin:             0px 0px;
}


/*management navigation properties*/


nav.managenav{
width: 100%;
margin: 0px 0% 0px 0%;
padding: 0px;
background-color: #ffffff;
float: left;
display: block;
text-align: center;
border: 0px solid blue;
}


.managenav a:link, .managenav a:visited, .managenav ul li a:link, .managenav ul li a:visited{
width: 100%;
margin: 0px Opx 3px 0px;
padding: 5px 0px;
background-color: #cccccc;
color:  #000000;
font: bold .75em tahoma, arial, helvetica;
text-align: center;
text-decoration: none;
float: left;
}


.managenav ul li ul li a:link, .managenav ul li ul li a:visited, .managenav ul li a:link, .managenav ul li a:visited{
width: 100%;
margin: 2px 0% 2px 0%;
padding: 5px 0px;
font: .65em tahoma, arial, helvetica, serif;
background-color: #ffffff;
color:#000000;
text-align: center;

border: 0px #ffffff outset;
}


.managenav ul li ul li a:link, .managenav ul li ul li a:visited{
width: 100%;
margin: 0px 0px 3px 0px;
padding:    5px 0px;
background-color: #ffffff;
color: #000000;
font:  .65em tahoma, arial, helvetica;
text-align: center;


}

.managenav li ul li, .managenav ul li ul li, .managenav li, .managenav ul li{
background-color: #990012;
width: 12.5%;
}

.managenav li ul li, .managenav ul li ul li{
background-color: #990012;
width: 100%;
}


/*horiz. navigation properties*/

nav.hznav, nav.adminnav, nav.mobilenav{
width: 100%;
text-align: center;
margin:     0px auto;
padding: 0px;
background-color: #cccccc;
}

button.mobile{
width:              80%;
float:              left;
text-align: center;
margin:              10px 8%;
padding:                5px 1%;
background-color:   #cce6ff;#787878;
font:                bold 2.5em arial, tahoma, helvetica, serif;
color:              #222222;#ffffff;
border:                 orange 0px solid;
box-sizing: border-box;
border-radius: 10px;
display: none;
/*background-image:       url('../../sccyoticks/images/bowtie_sm_2.png');
background-position:    center;
background-repeat:      no-repeat;
background-size: 65% 65%;*/
}



nav.mobilenav, #campaddress{
display: none;
z-index:1;
}

nav.adminnav{
width: 100%;
margin: 0px auto;
}

/*horiz. navigation properties*/

.hznav ul, .admnnav ul{
width: 100%;
margin: 0px;
list-style-type: none;
padding:    0px;
float: left;
}

.adminnav ul, .hznav ul, .managenav ul{
width:  100%;
margin:     0px auto;
padding: 0px;
}

.hznav li, .hznav li ul li, .adminnav li, .adminnav li ul li, .topnav li ul li{
width: 100%;
background-color: #cccccc;
}


.topnav li{
background-color: red;
border-bottom: 0px solid #cccccc;
border: 0px solid #cccccc;
padding: 0px;
margin: 0px;
width: 25%;
float: left;
display: inline block;
}


/*horiz. navigation properties*/

.hznav li, .adminnav li, .managenav li, .mobilenav li{
width: 12.5%;
text-align: center;
float: left;
list-style-type: none;
margin: 0px;
padding:    0px;
}

.adminnav li{
width: 12.5%;
text-align: center;
float: left;
list-style-type: none;
margin: 0px;
padding:    0px;
}

/*horiz. navigation properties*/

.mobilenav ul li a:link, .mobilenav ul li a:visited{
width: 80%;
margin: 2px 8%;
padding: 5px 1%px;
font: bold .7em tahoma, arial, helvetica, serif;
background-color:#cce6ff;#0066ff;#cccccc;#f17102; #66ff99;#66cc80;#e6e6ff;#cce6ff;#99ccff;#66b3ff; #99ccff;#ffffff;
color: #330066;#ffffff;#000000;
text-align: center;
text-decoration: none;
float: left;
display: block;
border: 2px outset #ffffff;
box-sizing: border-box;
border-radius:10px;
}


.hznav li ul, .adminnav li ul,  .managenav li ul, .topnav li ul{
width: 12.5%;
background-color: transparent;
visibility: hidden;
position: absolute;
margin-top: 27px;
}
.managenav li ul{
width: 12.5%;
margin-top: 25px;
}

.topnav ul li ul{
width: 25%;
margin-top: 24px;
}


/*horizontal navigation link properties*/

.hznav a:link, .hznav a:visited, .hznav ul li ul li a:link, .hznav ul li ul li a:visited{
width: 100%;
margin: 0px 0% 2px 0%;
padding: 5px 0px;
font:   .75em tahoma, arial, helvetica, serif;
background-color: #ffffff;
color:#000000;
text-align: center;
text-decoration: none;
float: left;
border: 0px #ffffff outset;
}

/*link properties at topright of page when logged in*/

.topnav a:link, .topnav a:visited, .topnav ul li a:link, .topnav ul li a:visited, .topnav ul li ul li a:link, .topnav ul li ul li a:visited{
width: 100%;
padding: 2px 0px 2px 0px;
text-align: center;
text-decoration: none;
font:  .75em tahoma, arial, helvetica, serif;
margin: 0px 0px 0px 0px;
color: #000000;
background-color:  #ffffff;
float: left;
display: inline block;
}

.topnav ul{
border-bottom: 2px solid #cccccc;
border-top: 2px solid #cccccc;
margin: 0px 10% 0px 10%;
width: 80%;
background-color: blue;
}

nav.topnav{
color: #ffffff;
margin: 2px 10%;
text-align: center;
width: 90%;
}

/*admin nav located at top of page when logged in*/

.adminnav a:link, .adminnav a:visited, .adminnav ul li a:link, .adminnav ul li a:visited{
width: 100%;
margin: 0px 0px 1px 0px;
padding: 5px 0px;
background-color: #ffffff;#ffffff;
color: #000000;
font: .65em tahoma, arial, helvetica, serif;
text-align: center;
text-decoration: none;
float: left;
}
/*
.adminnav ul li ul li a:link, .adminnav ul li ul li a:visited{
width: 100%;
margin: 0px 0px 1px 0px;
padding: 5px 0px;
background-color: #0066cc;
color: #ffffff;
font:  .75em tahoma, arial, helvetica, serif;
text-align: center;
text-decoration: none;
float: left;
}
*/
#current, #current1, #current2, #current3, #currentside{
background-color: #ececec;
color: #003399;
font-weight: bold;
}

.topnav #current{
background-color:  #ececec;
color: #003399;
font-weight: bold;
}

/*navigation hover styles*/

.hznav a:hover, .hznav ul li ul li a:hover, .adminnav ul li a:hover,  #current:hover, #current1:hover, #current2:hover,.topnav a:hover, .topnav ul li a:hover, .topnav ul li ul li a:hover{
background-color: #0000ff;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}


/*right side styles*/

div.sideright{
float: right;
width: 18%;
padding: 0px 0px 10px 0px;
margin: 10px 2% 10px 0%;
background-color: #990012;
border: 0px solid black;
}

.sideright ul{
margin:                     0px auto 0px auto;
list-style-type:            none;
padding:                0px;
}

.sideright li{
width: 100%;
list-style-type: none;
margin: 0px auto;
padding: 0px 3px 0px 3px;
background-color: #333333;
font: .35em arial, helvetica, serif;
text-align: left;
letter-spacing: 1px;
line-height: 1.4em;
text-indent: 0em;
}

.sideright  a:link, .sideright  a:visited{
margin: 2px auto;
padding:    0px 0px;
}

.sideright  ul li a:link, .sideright ul li a:visited{
width:92% ;
font:  bold 2em tahoma, arial, helvetica, serif;
background-color: #f3f3f3;#ffe6cc;#dfd4a7;
color: #333333;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color:   #333333;
text-decoration: none;
margin: 0px 2% 0px 2%;
padding: 5px 1%;
text-align: left;
float: left;
}

#currentside{
background-color: #ffffff;
color: #990012;
}

.sideright ul li a:hover,#currentside:hover{
background-color: #0000ff;
color: #ffffff;
border-style:   solid;
border-width: 0px 0px 1px 0px;
border-color:   #333333;
text-decoration: none;
}

.sideright p{
margin:  3px 3px;
padding: 2px;
text-align: left;
letter-spacing: 1px;
line-height: 1.4em;
text-indent: 0em;
}

.sideright p.c{
background-color:#ffffff;
padding:    5px 5px;
margin: 5px 10px;
}


/*p element displays date*/

p.date{
margin: 0px auto;
padding: 2px 0px;
text-align: center;
letter-spacing: 1px;
line-height: 1.4em;
text-indent: 0em;
font: bold 10pt  arial, helvetica, serif;
color: #ffffff;
background-color: transparent;
padding:    5px 0px;
}

img.help_page{
width: 100%;
margin: 10px;
float: left;
display: inline-block;
}

/*default link style*/


a:link{
color: #006;
text-decoration: underline;
}

a:visited{
color: #006;
text-decoration: underline;
}

a:hover{
color: #ffffff;
background-color: #ff0000;
text-decoration: underline;
}

/*content p elements*/

p.c{
margin: 10px 20px;
font: .8em arial, tahoma, helvetica, serif;
text-align: left;
color: #000000;
letter-spacing: 1px;
line-height: 1.5em;
text-indent: 0em;
background-color: transparent;
}

p.formoutput{
margin: 2px 30px;
font: 10pt arial,tahoma,  helvetica, serif;
text-align: left;
color: #000066;
letter-spacing: 1px;
line-height: 1.5em;
text-indent: 0em;
background-color: transparent;
}

/*index page p elements*/

p.index{
width: 70%;
float: left;
display: block;
margin: 10px 15%;
font: .8em arial, tahoma, helvetica, serif;
text-align: justify;
color: #000;
letter-spacing: 1px;
line-height: 1.5em;
text-indent: 0em;
background-color: transparent;
}

/*footer style*/

footer{
width: 100%;
font: bold .75em arial, tahoma, helvetica, serif;
text-align: center;
background-color: #ffffff;
color: #555555;
margin: 10px auto;
padding: 2px 0px;
display: block;
line-height: 1.5em;
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #cccccc;
clear: both;
}

footer a:link, footer a:visited{
color: #990012;
text-decoration: none;
font-weight: bold;
}

.footer a:hover{
color: #ffcccc;
background-color: #ff0000;
}

/*error output p style*/

p.php{
width: 96%;
font: bold .70em arial, tahoma, helvetica, serif;
text-align: left;
color: #464646;
background-color: #ececec;
margin: 10px 1%;
padding:    3px 1%;
letter-spacing: 1px;
line-height: 1.5em;
float: left;
clear: both;
}
.content p.php{
width: 96%;
margin: 10px 1%;
}

/*p element appears as instructions on some forms*/

p.instruct{
font: .70em arial, tahoma, helvetica, serif;
text-align: left;
color: #222222;
margin: 5px 15px;
padding:    5px 10px;
letter-spacing: 1px;
line-height: 1.5em;
background-color: #feedea;
clear: both;
}

span.hl{
color:                   #c00;
font-weight:                 bold;
}


span.s{
font: bold 8pt arial, tahoma, helvetica, serif;
color: #000000;
}
span.entity{
color: #990000;
font-weight: bold;
}

/*heading style*/

.content h2{
font: bold .85em Arial;
color: #ffffff;
background-color: #004080;#ececec;#0066cc;#ff7733;#cc8800;#669900;#3399ff;#0066cc;#004080;#dcdcdc;
margin: 15px 1% 5px 1%;
padding: 5px 0px;
width: 98%;
float: left;
}

h1{
margin: 10px;
font: bold  20pt  arial, tahoma, helvetica,serif;
text-align: center;
background-color: transparent;
color: #000066;
}


h2{
width: 100%;
padding:    3px 0px;
margin: 5px 0px 0px 0px;
font: bold 12pt arial, tahoma,helvetica,serif;
text-align: center;
background-color: transparent;
color: red;
}


h2.manage{
color: #990012;
background-color: #ececec;
margin: 10px 0% 5px 0%;
padding: 5px 0px;
width: 100%;
float: left;
}

h3{
font: bold 12pt  arial, tahoma, helvetica,  serif;
text-align: center;
margin: 0px;
padding:    2px;
background-color: red;
color: #333333;
}

h4{
font: bold 12pt  arial, tahoma, helvetica,  serif;
text-align: left;
margin: 3px 1% 3px 1%;
background-color: #4dabaa;
color: #333333;
width: 98%;
float: left;
}

h5{
font: bold 12pt  arial, tahoma, helvetica,  serif;
text-align: center;
margin: 5px 10px 5px 10px;
background-color: transparent;
color: #003333;
}

h6{
font: bold italic 10pt  arial, tahoma, helvetica,  serif;
text-align: center;
margin: 5px 15px;
background-color: transparent;
color: #990033;
}


/*content display and table styles*/

div.display{
width: 980px;
display: block;
float: left;
background-color: #ffffff;
margin: 5px 10px 5px 10px;
padding: 0px 0px 5px 0px;
border-bottom: 0px solid #ccc;
border-top: 0px #ccc solid;
}

div.description{
width: 974px;
float: left;
display: block;
margin: 5px 0px 10px 0px;
padding: 0px;
background-color: #fff;
border: 0px solid #4a9400;
}

.datatable{
clear: both;
}

.display table{

display: inline;
float: left;
background-color: #ffffff;
padding:    10px;
margin: 5px 0px 5px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 0px solid #ccc;
border-top: 0px #ccc solid;
border-spacing: 0px;
border:  0px #4abaaa solid;
}

.display tr{
width: 980px;
margin:     0px 0px;
padding:  0px;
}

.display td{
text-align: left;
margin: 0px 0px;
padding: 5px 2px;;
border: 1px solid #cccccc;
font: 9pt arial,tahoma, helvetica, serif;
color: #000000;
letter-spacing: 1px;
line-height: 1.2em;
background-color: #ffffff;
vertical-align: top;
}

.display p{
margin: 5px 5px;
font: 10pt arial,  tahoma, helvetica, serif;
text-align: left;
color: #000000;
letter-spacing: 1px;
line-height: 1.5em;
text-indent: 0em;
background-color: transparent;
}

.display ul{
width: 770px;
margin:  5px 0px;
padding: 0px;
list-style-type: none;
}

.display li{
width: 108px;
list-style-type: none;
text-align: left;
float: left;
display: block;
margin: 0px 0px;
padding: 0px;
border: 1px solid #cccccc;

}

.display button{
width: 150px;
margin: 0px;
padding: 2px;
background-color: #ececec;
font: bold 12pt arial, tahoma, helvetica, serif;
color: #000000;
border: #fff 2px outset;
}

.display  a:link{
font: 10pt bold arial, tahoma, helvetica, serif;
padding: 2px 0px;
text-align: left;
text-decoration: underline;
margin: 0px 0px;
float: left;
color: #000066;
background-color: transparent;
}

.display a:hover{
background-color: #000066;
color: #ffffff;
}

.display h4,.ship h4, .total h4{
margin: 10px 5px 5px 5px;
font: bold 10pt arial, tahoma,helvetica,serif;
text-align: left;
background-color: transparent;
padding: 0px 0px;
color: #000066;
}
/*
table.smEvent{
width: 220px;
background-color: #ececec;
margin: 15px auto;
display: block;
border: 2px #fff outset;
border-top: 0px #ececec solid;
}

td.smEventR{
min-width: 139px;
max-width: 133px;
margin: 0px;
padding: 3px 0px 3px 2px;
background-color: #ffffff;
font: 8pt arial;
color: #000000;
text-align: left;
vertical-align:  top;
border-bottom: 0px #ececec solid;
}


td.smEventL{
min-width: 69px;
max-width: 63px;
margin: 0px;
padding: 3px 0px 3px 2px;
background-color: #ffffff;
font: 8pt arial;
color: #000000;
text-align: left;
vertical-align: top;
border-bottom: 0px #ececec solid;
}

*/

div.attendance{
width: 100%;
float: left;
display: block;
height: 500px;
overflow-x: scroll;
overflow-y: scroll;
}
div.infodisplay{
width: 100%;
display: block;
float:  left;
background-color: #ffffff;
margin: 2px 0%;
padding:  0px 0px 5px 0px;
border-bottom:  0px solid #cccccc;
border-top:  0px #cccccc solid;
height:500px;
overflow-x: scroll;
overflow-y: scroll;
}


div.infoscroll{
width: 100%;
display: block;
float:  left;
background-color: #ffffff;
margin: 2px 0%;
padding:  0px 0px 5px 0px;
border-bottom:  0px solid #cccccc;
border-top:  0px #cccccc solid;
font-size: 1.15em;
overflow-x: scroll;
overflow-y: scroll;
height: 400px;
}


#narrow{
width: 80%;
margin: 2px 10%;
float: left;
display: block;
}




#slim{
width: 60%;
margin: 2px 20% 2px 20%;
padding: 0px ;
float: left;
display: block;
}

.infodisplay h4,.ship h4, .total h4, .infoscroll h4{
width: 98%;
margin: 5px 1% 0px 1%;
font: bold 12pt arial, tahoma, helvetica, serif;
text-align: center;
background-color: transparent;
padding: 10px 0px;
color: #333333;
}

.infoscroll table tr td ul{
width: 100%;
margin:  2px 0px;
padding:  0px;
list-style-type: none;
}
.infoscroll table tr td ul li{
width: 100%;
background-color: white;
}

.infoscroll table tr td.printhide ul li ul{
list-style-type:  none;
text-align:  left;
display:  none;
margin:  1px 0px 0px 0px;
padding:  0px;
border: 0px solid #cccccc;

}


.infoscroll table tr td.printhide{
overflow:scroll;
width: 8%;
}

.infoscroll table tr td.printhide:hover ul li ul{
display: block;
}


/*
.infodisplay p{
margin:     5px 5px;
font: 10pt arial,  helvetica, serif;
text-align: left;
color: #000;
letter-spacing: 1px;
line-height: 1.5em;
text-indent: 0em;
background-color: transparent;
}
*/
.infodisplay ul{
width: 770px;
margin:  5px 0px;
padding:  0px;
list-style-type: none;
}

.infodisplay li{
width: 108px;
list-style-type:  none;
text-align:  left;
float:  left;
display:  block;
margin:  0px 0px;
padding:  0px;
border: 1px solid #cccccc;
}


.infodisplay table tr td ul li, .infoscroll table tr td ul li{
list-style-type:  none;
text-align:  left;
float:  left;
display: block;
margin:  0px 0px;
padding:  0px;
border: 0px solid #cccccc;
font: .9em arial, tahoma, helvetica, serif;
width: 98%;
}

.infodisplay table tr td ul li ul li{
list-style-type:  none;
text-align:  left;
float:  left;
display: block;
margin:  10px 0px;
padding:  0px 1%;
border: 0px solid #cccccc;
font: .7em arial, tahoma, helvetica, serif;
}

.infodisplay button{
width: 150px;
margin:  0px;
padding: 5px;
background-color: #ececec;
font: bold 2em arial, tahoma, helvetica, serif;
color: #000;
border: #ffffff 2px outset;
}

.infodisplay table tr td ul li ul li a:link, .infodisplay table tr td ul li ul li a:visited, .infoscroll table tr td ul li ul li a:link, .infoscroll table tr td ul li ul li a:visited{
font:  bold 1em arial, tahoma, helvetica, serif;
padding: 5px 0px;
text-align: left;
text-decoration: none;
margin:     1px auto;
color:  #000066;
background-color:  white;
width: 98%;
float: left;
display: block;
border: 0px outset purple;
}
.infodisplay table tr td ul li ul li a:hover, .infoscroll table tr td ul li ul li a:hover{
background-color: #660066;
color: #ffffff;
width: 100%;
}

.infodisplay  a:link, .infodisplay a:visited, .infoscroll  a:link, .infoscroll a:visited{
font:  1.05em arial, tahoma, helvetica, serif;
padding: 2px 0px;
text-align: left;
text-decoration: none;
margin:     0px 0px;
color:  #000066;
background-color:  transparent;
width: 100%;
}

.infodisplay a:hover, .infoscroll a:hover{
background-color: #ff0000;
color: #ffffff;
font-weight: ;
width: 100%;
}

.infodisplay table, .infoscroll table{
clear: both;
width: 98%;
background-color: #ffffff;
margin: 2px auto;
padding:  0px 0px 0px 0px;
border-spacing: 0px;
border-style: solid;
border-color: #cccccc;
border-width: 1px 0px 0px 1px;

}



.infodisplay tr{
margin:  0px 0px;
padding:  0px;
background-color: transparent;#ececec;
}


tr.dark{
background-color:#f9f9f9; #f1f1f1;#f8f8f8;
}

tr.lite{
background-color: #ffffff;#f8f8f8;#fff5ee;#ffffff;
}

tr.lite:hover, tr.dark:hover{
background-color: #cce6ff;#ccccff; #f1dae6;#f8ecf2;#ecc6d9;#cc6699;#ccccff;#ffffcc;
font-weight: bold;
color: white;
}
/*
tr.lite:hover, tr.dark:hover{
    background-color: #edda74;
}

.infodisplay tr td:hover{
color: #000000;
}
*/
.infodisplay table tr td, .infodisplay table.eventinfo tr td, .infoscroll table tr td, .infoscroll table.eventinfo tr td{
text-align:  left;
vertical-align: top;
margin:  0px 0px;
padding:  7px 3px;
border-style: solid;
border-color: #464646;
border-width: 0px 0px 0px 0px;
font: .60em arial, tahoma, helvetica, serif;
color: #000000;
background-color: transparent;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}



.infoscroll table tr td, .infoscroll table.eventinfo tr td{

}
.infodisplay tr.displaytop td, .infoscroll tr.displaytop td{
background-color:#ececec;
color: #000000;
font-weight: bold;
font-size: .65em;
text-align: center;
position: sticky;
top: 0;

}
.infodisplay tr.displaytop td.lefttd{
text-align: left;
}

td.small{
width: 60px;
}

td.medium{
width:120px;
}

td.large{
width: 180px;
}

h2.printpagetitle{
display: none;
clear: both;
font:  10pt arial, tahoma, helvetica, serif;
margin: 10px auto;
text-decoration: none;
}

p.tbldsply{
width:  96%;
font: 12pt arial, tahoma, helvetica, serif;
text-align: left;
color: #333333; #990012;#464646;
background-color: #ffffff;#feedea;#787878;#fff5ee;#dfd4a7;
margin: 1px 1%;
padding: 1px 1%;
letter-spacing: 1px;
line-height: 1.5em;
float: left;
clear: both;
}

/*event info table display*/

.infodisplay table.eventinfo{
width: 98%;
background-color: #ffffff;
margin: 10px auto;
border-spacing: 0px;
border-style: solid;
border-color: #cccccc;
border-width: 1px 0px 0px 1px;

}
/*
.infodisplay table.eventinfo tr{
margin:  0px 0px;
padding:  0px;
background-color: transparent;
border: none;
}
*/
.infodisplay table.eventinfo td.left{
width: 20%;
margin: 0px;
padding: 3px 5px;
background-color: transparent;
font: bold .65em arial, tahoma, helvetica, serif;
color: #990020;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}


.infodisplay table.eventinfo td.right{
width: 80%;
margin: 0px;
padding: 3px 5px;
background-color: transparent;
font: .65em arial, tahoma, helvetica, serif;
color: #000000;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}

button.printbutton{
width: 12%;
margin:  5px 45%;
padding: 5px;
background-color: #ececec;
font: bold .85em arial, tahoma, helvetica, serif;
color: #000000;
border: #ffffff 5px outset;
}

.infodisplay table tr td span.radiocheckhorz{
width: 100px;
float: left;
text-align: left;
padding:                0px 0px 0px 0px;
margin:             0px 15px 10px 2px;
display: inline block;
text-indent:            0px;
color:                  #000000;
font:               1.1em arial, tahoma,helvetica;
border:                 0px solid black;

}

.infodisplay table tr td input.choose{

margin:                 0px 0px 0px 10px;
width:              15px;
border:             0px solid #000000;
display: inline block;
background:             #cccccc;
float: left;
}

.infodisplay table tr td span.message{
width: 100px;
font:               bold 1.2em arial, serif;
color:              #ff0000;
margin:             0px 0px 0px 0px;
display: inline block;
float:              left;
text-align:       left;
}

span.tbldat{
width: 100px;
font:               bold 1.2em arial, serif;
color:              #333333;
margin:             12px 0px 0px 10px;
display: inline block;
float:              left;
text-align:       left;
}

div.barcode{
margin: 20px auto;
text-align: center;
width: 100%;
display: block;

}


div.barcodelabel{
font:1em tahoma, arial;
margin: 2px auto;
width:100%;
display: block;
text-align: center;
}

div.barcodename{
font:1.2em tahoma, arial;

margin: 25px auto;
width:100%;
text-align: center;
display: block;
}

img.barcodeimg{
height: 75px;
width: 20%;
margin: 10px auto 0px auto;

}


option.colorout{
background-color: orange;
}
/*
@media only screen and (min-width: 1400px) {

body{
font-size: 1.3em;
}


.infodisplay td, .infodisplay table.eventinfo td, .infodisplay table.eventinfo td.right{
font-size: 2em;
}
.infodisplay tr.displaytop td{
font-size: .75em;
}
.infodisplay table.eventinfo td.left{

font-size: 2em ;

}
}*/