/*body styles*/
body{
width: 100%;
padding: 0%;
margin: 0% auto;
text-align: center;
background-color:#ffffff;#333333;
font-size: 1em;
border: 0px solid #cccccc;
float: none;
box-sizing: border-box;
border-radius: 20px;
/*background-image: url('../../scbvbs2020/images/grgrgridlg.png');
background-position:       top right;
background-repeat:      repeat;*/
}

/*#787878; #d6ccc2;#898989;#787878;#d4d4d4;#898989;#cccccc;#464646;#767676;#adad85;#787878;#cccccc;#f1f1f1;#222222;#464646;#fff5cc;#c2d6d6;#669999; #996633;#ffcc66;#d5d5c3; #d7d7c1; #adad85; #999966; #d6d6c2; #669999; #d1e0e0; #898989; #a3c2c2; #c2d6d6; #b3cccc; #87abab; #d1e0e0; #cccccc; #787878;*/


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

display: flex;
background-color: #ffffff;#001a33;
box-sizing: border-box;
}
/*top page bar for admin navigation*/

div.top{
width: 100%;

background-color: #ffffff;
margin: 0px auto;
border-bottom: 0px solid #cccccc;
border-top: 0px solid #cccccc;
padding: 0px 0px 0px 0px;
}

/*style for page wrapper*/
div.page{
width:98%;
background-color: #ffffff;
padding: 10px 3px;
margin: .75% 1%;
border: 0px solid #c2c2a3;
box-sizing: border-box;
 border-radius:20px;
}

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

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

/*top left section for website title*/

section.topleft{
width: 30%;

padding: 0px 0px 0px 0px;
float: left;
background-color: transparent;
margin:     0px;
text-align: left;
border: 0px solid black;
}

/*website title*/

h1.sitetitle{
width: 100%;
font: bold  1.50em  mono, arial, tahoma, helvitica,  papyrus, serif;
margin: -5px 0px 0px 10%;
text-align: left;
color: #708090;
border: 0px solid black;

}

/*title image*/


img.logo{
width: 60%;
margin:  0px 7.5% 0px 7.5%;
padding:5px 15px;
border: 5px outset #c2c2a3;
float: left;
box-sizing: border-box;
 border-radius:40px;
 background-color: #444444;
}


/*website title link*/

.sitetitle a:link, .sitetitle a:visited{
border: none;
text-decoration: none;
background-color: transparent;
color: #660066;
letter-spacing:.1em;

}

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

/*website subtitle font*/

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

color: #000066;
}

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

section.loginform{
width: 70%;

padding: 0px;
float: right;
margin: 0px 0%;
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: 97%;
margin: 0px auto 0px auto;
color: #222222;
background-color: #ffffff;#e6e6e0;
padding:5px 0px;
font: bold .85em arial,helvetica, tahoma;
box-sizing: border-box;
border-radius: 20px;
}

/*loginform fieldset*/

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

/*login form form labels*/

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

/*login form field*/

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

/*loginform button*/

.loginform button{
width: 12%;
float: left;
margin:  0px 5px;
background-color: #ececec;
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: 0px;
}

/*login form link*/

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

/*loginform link hover*/

.loginform a:hover{
color: #ffffff;
background-color: #660066;
}

 /*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: 10px 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;
}


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

nav.adminnav ul, nav.hznav ul{
width:  100%;
margin:  0px auto;
padding: 3px .5%;
background-color:#dcdcdc;
float: left;
display: block;
box-sizing: border-box;
border-radius: 20px;
border: 0px solid #ccffcc;
border: 0px outset #cccccc;
clear: both;
}

nav.adminnav ul li ul{
border: 0px;
}

nav.hznav ul{
background-color: #dcdcdc;
border: 0px solid #ffcc66;
clear: both;
}

.adminnav li, .hznav li{
width: 12.5%;
text-align: center;
float: left;
display: block;
list-style-type: none;
margin: 0px;
padding:    0px;
background-color: transparent;
}

.adminnav ul li ul, .hznav ul li ul{
width:12%;
background-color: transparent;
visibility: hidden;
position:absolute;
padding: 0px 0px;
float: left;
margin: 25px auto 0px auto;
}

.adminnav ul li ul li, .hznav ul li ul li{
width:97%;
background-color: transparent;
clear: both;
padding: 0px;
float: left;
display: block;
margin: 0px auto 0px auto;


}

.adminnav ul li a:link, .adminnav ul li a:visited, .hznav ul li a:link, .hznav ul li a:visited{
width: 98%;
margin: 2px 1% 3px 1%;
padding: 2px 0px;
font:   .80em tahoma, arial, helvetica, serif;
background-color:#ffffff;
color: #222222;
text-align: center;
text-decoration: none;
float: left;
display: block;
border: 0px solid #989898;
border: 1px outset  #cccccc;
box-sizing: border-box;
border-radius:20px;
}

.adminnav ul li ul li a:link, .adminnav ul li ul li a:visited, .hznav ul li ul li a:link, .hznav ul li ul li a:visited{
width: 97%;
margin: 1px 1% 0px 1%;
padding: 2px 0px;
font:   .80em tahoma, arial, helvetica, serif;
background-color:#ffffff;
color: #222222;
text-align: center;
text-decoration: none;
float: left;
border: 2px outset #989898;
box-sizing: border-box;
border-radius: 20px;
border: 1px outset #cccccc;
}

.hznav ul li a:link, .hznav ul li a:visited, .hznav ul li ul li a:link, .hznav ul li ul li a:visited{
background-color: #ffffff;
color:#222222;
}

nav.topnav{
width: 96%;
color: #ffffff;
padding: 0px;
margin: 2px 2% 2px 2%;
text-align: center;
float: right;
display: block;
clear: both;
border: 0px solid gray;
}

.topnav ul{
width: 90%;
background-color: #c2d6d6;
border: 0px solid #ececec;
border: 2px solid #cccccc;
margin: 1px 5% 1px 5%;
padding: 1px 1%;
float: left;
display: block;
box-sizing: border-box;
border-radius: 20px;
border
}

.topnav li{
background-color: transparent;
border-bottom: 0px solid #cccccc;
border-top: 0px solid #cccccc;
width: 20%;
float: left;
display: block;
border: 0px solid red;
}

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

.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: 99%;
padding: 2px 0px 2px 0px;
text-align: center;
text-decoration: none;
font:  .75em tahoma, arial, helvetica, serif;
margin: 3px .5% 3px .5%;
color:#222222;
background-color: #f1f1f1;
float: left;
display:block;
border: 0px solid #989898;
border: 2px solid #cccccc;
box-sizing: border-box;
border-radius: 20px;
}

.hznav ul li a:hover, .hznav ul li ul li a:hover, .adminnav ul li a:hover, .adminnav ul li 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, .topnav #current a:hover{
background-color: #ececec;
color: #4d004d;
text-decoration: none;
font-weight: regular;
border: 1px outset #000000;
}

#current, #current1, #current2, #current3, #currentside{
background-color: #e6e6e0;
color:  #000000;
font-weight: regular;
border: 1px outset #cccccc;
}


/*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;
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;
}

/*pagination link style*/


p.paginate{
width: 98%;
margin: 3px auto;
padding: 7px 1%;
font:  .65em tahoma, arial, helvetica, serif;
background-color: #ececec;
color: #990020;
text-align: left;
text-decoration: none;

clear: both;
box-sizing: border-box;
border-radius: 20px;

}
.paginate a:link{
margin: 0px 3px 0px 3px;
padding: 0px 0px;
font:   1em tahoma, arial, helvetica, serif;
background-color: transparent;
color: #000066;
text-align:left;
text-decoration: none;
float: left;

}

.paginate a:visited{
margin: 0px 3px 0px 3px;
padding: 0px 0px;
font:   1em tahoma, arial, helvetica, serif;
background-color: transparent;
color: #000066;
text-align: left;
text-decoration: none;
float: left;

text-decoration: underline;
}

.paginate a:hover{
color: #ffffff;
background-color: #0000ff;
text-decoration: underline;
}

.paginate a:current{
color: #ff0000;
}

/*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.75em;
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: 65%;
float: left;
display: block;
margin: 2px 14%;
padding: 1%;
font: .7em arial, tahoma, helvetica, serif;
text-align: justify;
color: #000;
letter-spacing: 1px;
line-height: 1.75em;
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, p.phphidden{
width: 96%;
font: .78em arial, tahoma, helvetica, serif;
text-align: left;
color: #0c0c0c;
background-color:#d6c2c2;
margin: 3px 1%;
padding:    3px 1%;
letter-spacing: 1px;
line-height: 1.5em;
float: left;
clear: both;
border-radius: 20px;
}

.content p.phphidden{
width: 96%;
font: bold 1em arial, tahoma, helvetica, serif;
text-align: left;
color: #222222;
background-color: #feedea;
margin: 2px 1%;
padding:    3px 1%;
letter-spacing: 1px;
line-height: 1.5em;
float: left;
clear: both;
border-radius: 25px;
display: none;
}


/*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;
border-radius: 25px;
}

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{
color: #ffffff;
background-color:#787878;
margin: 3px 1% 3px 1%;
width: 98%;
float: left;
border-radius: 20px;
padding: 3px 0px;
border: 0px solid #cccccc;
}

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 auto 0px auto;
font: bold .9em 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: 98%;
display: block;
float: left;
background-color: #ffffff;
margin: 5px 10px 5px 10px;
padding: 0px 0px 0px 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.page{
width: 100%;
margin:  0px auto;
padding: 0px;
list-style-type: square;

}

.display li{
letter-spacing: 0px;
list-style-type: none;
text-align: left;
width: 65%;
margin: 10px auto;
padding: 0px;
border: 0px solid #cccccc;
font: .72em arial, helvetica, serif;
line-height: 1.5em;
}

.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;
}

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;
}

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


.infodisplay h4,.ship h4, .total h4{
width: 98%;
font: bold .85em arial, tahoma, helvetica, serif;
text-align: center;
color: #ffffff;#222222;
background-color:  #4d004d;;#e6e6e0;#d6d6c2;#d1d9e0;#b3bfcc;#94a6b7; #ccd6c2;#d1d9e0;#b3bfcc;#a4b3c2;#94a6b7; #d6d6c2;#e6e6e0;#ccd6c2;
margin: 3px 1% 3px 1%;
float: left;
border-radius: 20px;
padding: 3px 0px;
border: 0px solid #cccccc;
}


.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;
font: .85em 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  a:link, .infodisplay a:visited{
font:  1em 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{
background-color: #ff0000;
color: #000000;

width: 100%;
}

.infodisplay table{
clear: both;
width: 97.5%;
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;
}


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

tr.lite{
background-color: #fefefe;
}

.infodisplay td, .infodisplay table.eventinfo 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: .75em arial, tahoma, helvetica, serif;
color: #000000;
background-color: transparent;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}

.infodisplay tr.displaytop td{
background-color: #e6e6e0;
color: #000000;
font-weight: bold;
font-size: .7em;
text-align: center;
}

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;
background-color: #ffffff;
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: 97.5%;
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: 5px 5px;
background-color: transparent;
font: bold .75em arial, tahoma, helvetica, serif;
color: #660066;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}


.infodisplay table.eventinfo td.right{
width: 30%;
margin: 0px;
padding: 5px 5px;
background-color: transparent;
font: .75em 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 44%;
padding: 5px;
background-color: #ececec;
font: bold .85em arial, tahoma, helvetica, serif;
color: #000000;
border: #ffffff 3px outset;
box-sizing: border-box;
border-radius: 20px;
}