/* ---- ELLESMERE SUB CENTRE STYLES ----- */

body {margin:0; font:14px Verdana, Arial, sans-serif; background-color:#FFFFFF; color:#083060;}

h1, h2, h3, h4, h5, h6 {color:#1050A0; font-family:Verdana, Arial, sans-serif; font-weight:bold;}

h1 {font-size: 24px; margin:14px 0;}
h2 {font-size: 20px; margin:12px 0;}
h3 {font-size: 18px; margin:10px 0;}
h4 {font-size: 16px; margin:8px 0;}
h5 {font-size: 14px; margin:6px 0;}
h6 {font-size: 12px; margin:4px 0;}

a:link, a:visited {color: blue; text-decoration: underline;}
a:hover, a:active {color:red; text-decoration:underline;}

b {color: #1050A0; font-weight:bold;}

a, input, label, select {cursor:pointer;}
textarea {resize:vertical;}
input[type='text'], input[type='password'], textarea {font-family:inherit; font-size:1.0em; padding:2px; color:#2B3856; background:#FFFFFF; border-radius:4px; border:1px solid #083060; cursor:text;}
input[type='text'], input[type='password'] {height:16px; margin-right:3px;}
select {padding:0 2px; font-size:1.0em; height:28px; color:#2B3856; background:#FFFFFF; border-radius:4px; border:1px solid #666;}
select option {padding:0 2px;}
button {font-size:0.9em; font-weight:bold; height:22px; padding:0px 4px; color:#2B3856; background:#FFFFFF; border-radius:4px; border:1px solid #666; cursor:pointer;}
button:hover {border:2px solid #A66; color:#800;}
fieldset {margin:0 auto 10px; padding:10px 16px; border:1px solid #888888; background:#FFFFFF; border-radius:5px;}
legend {font-weight:bold; padding:0 5px; color:#1050A0; background:#FFFFFF;}
table {background:#FFFFFF; cursor:default;}
table th {background:#D0D0D0; padding:4px;}
table tr:nth-child(even) {background:#F4F4F4}
table td {padding:0 4px;}
dl {margin:0 0 1em 0;}
[onClick] {cursor:pointer;}

/*general styles */
.floatR {float:right;}
.floatL {float:left;}
.floatC {display:block; margin:auto;}
.alignR {text-align:right;}
.alignL {text-align:left;}
.alignC {text-align:center;}
.alignM {vertical-align:middle;}
.clear {clear:both;}
.press {cursor:pointer;}
.arrow {cursor:default;}
.hide {display:none;}
.blue {color:#1050A0;}
.red {color:#F00050;}
.green {color:green;}
.bold {font-weight:bold;}
.info, .note {margin:auto; width:400px; text-align:center; color:#2B3856;}
.info {background:#A0F0A0;}
.note {background:#F0A0A0;}
.onClick {color: blue; text-decoration: underline; cursor:pointer;}
.onClick:hover {color:red;}
.even {background:#F8F8F8;}
.italic {font-style:italic;}
.hilite {font-weight:bold; color:#1050A0; background:#FF8080;}
.melite {font-weight:bold; color:#1050A0; background:#FFD090;}
.lolite {font-weight:bold; color:#1050A0; background:#80FF80;}
button.noBut {font-size:1.1em; font-weight:bold; color:#083060; background:#D0D0D0; border:none; cursor:pointer;}
button.logOut {position:fixed; top:8px; right:50px; z-index:1000;}
span.fullScreen {position:fixed; top:0px; right:10px; color:#F02030; font-size:2em; cursor:pointer; z-index:1000;}

/* ---- PAGE BANNER ----- */
#banner {padding:12px 0; position:fixed; top:0px; left:0; right:0; background:#FFFFFF; text-align:center; z-index:10;}
#logoImg {height:6vw; vertical-align:middle; cursor:pointer; transition: 0.2s;}
#logoTxt {font:calc(8px + 3.0vw) 'Franklin Gothic Medium',sans-serif; color:#1050A0; margin-left:1vw; vertical-align:middle; transition: 0.2s;}


/* ---- NAVIGATION --- */
#nav {padding:0 4% 0 4%; margin-top:calc(6vw + 24px);}
#menu, #menu * {list-style:none; margin:0; padding:0; z-index:10;}
#menu a {display:block; color:inherit; text-decoration:none; padding:0.5rem;}
#menu li {display:block; color:#606060; background:#FFFFFF; font:18px Arial; white-space:nowrap; border-radius:5px;}
#menu li ul {position:absolute; display:none;}
#menu li:hover, #menu li.active {color:#000000; background:#909090; transition:all 0.5s ease;}
#menu li:hover > ul, #menu li ul:hover {display:block;}
@media screen and (min-width:601px) { /* horizontal */
  #menu > li {float:left; margin:0 2px;}
}
#nav span.cmButton {font-size:2em; float:right; cursor:pointer; display:none;}
@media screen and (max-width:600px) { /* vertical */
  #menu {display:none; width:40vw;}
  #menu li ul {left:100px; width:40vw;}
  #menu li ul li {background:#E0E0E0;}
  #nav span.cmButton {display:inline-block;}
}

/* ---- PAGE BODY --- */

#pageBody {position:relative; background:#EFEFEF; padding:4px 4% 26px; margin-bottom:20px;}

@media screen and (min-width:761px) { /* wide-> show */
 .wideVp {display:inline;}
}

@media screen and (max-width:760px) { /* narrow-> hide */
 .wideVp {display:none;}
}

p.title {font:bold calc(12px + 1.6vw) arial; color:#1050A0; text-shadow:12px 5px 0 #C0C0C0; margin:6px 0;}

button.topRight {height:30px; font-weight:bold; color:#000000; background:#FF8080; padding:0px 6px; margin:16px 0 0 20px; border-radius:6px; float:right;}

/* ---- HOME PAGE --- */

iframe#homeShow {display:block; margin:0 auto; width:90vw; height:45vw; max-width:56em; max-height:28em; padding:4px; border:1px solid #A0A0A0; border-radius:4px;}
div.clubs {margin:16px;}
div.clubs div {margin:4px 0;}
div.flexBox {display:flex;}
div.flexBox div {flex-grow:1; width:30vw;}
div.flexBox div:nth-child(2) {text-align:center; margin-top:40px;}

/* ---- LOGIN PAGE ---- */

div.logIn {width:400px; margin:10px auto;}
fieldset.logIn {position:relative; height:160px;}
fieldset.logIn span.icon {font-size:20px; margin-right:12px;}
fieldset.logIn div.input {margin:20px 0 0 10px;}
fieldset.logIn div.input input {width:200px;}
fieldset.logIn div.logLinks {position:absolute; right:0px; bottom:10px; width:150px;}
fieldset.logIn div.logLinks button {border:none; color:#6060FF; background:none; cursor:pointer; text-decoration:underline;}
fieldset.logIn div.logLinks button:hover {color:#A060FF;}
button.logSel {margin:0 0 10px 30px; width:250px;}
span.eye {margin-left:-28px; font-size:1.4em;}

/* ---- CONTACT PAGE--- */

div.flex {display:flex; width:650px; margin:0 auto;}
div.flex > div {flex-grow:1; padding:0 4px;}
fieldset.contact {position:relative; width:80vw; max-width:600px; padding:20px;}
img.mail {position:absolute; top:30px; right:30px;}
span.msgCol1 {display:inline-block; width:9em;}
div.n-o-s-p-a-m {display:none;}
textarea.message {width:98%;}
div.confirm {width:80vw; max-width:600px; margin:0 auto;}
dl.contactMsg dt {font-weight:bold;}
dl.contactMsg dd {margin:-1.1em 0 0 6em; padding:0 0 1.1em .1em;}

/* ---- REGISTER PAGE --- */

.pageTop {margin-top:calc(4vw + 24px);}

div.regBoxE {height:calc(100vh - 310px); padding:0 8px 0 0; overflow:auto;}
div.regBoxE .title {padding-top:10px; font-weight:bold;}
div.regBoxE textarea:nth-of-type(1) {height:70px;}
div.regBoxE textarea:nth-of-type(2) {height:95px;}
div.regBoxR {height:calc(100vh - 310px); padding:0 8px 0 0; overflow:auto;}
div.regBoxV {height:calc(100vh - 265px); padding:0 8px 0 0; overflow:auto;}

.regGrid div {padding-top:14px;}
.regGrid span {display:inline-block; width:160px;}
.regGrid input[type='text'] {width:320px;}

#regForm.input {width:100%;}

div.regBoxE input[type='text'], div.regBoxE textarea {width:98%;}

/* ---- OFFICIALS PAGE ---- */

div.bColor2 {background-color:#FFF0C0;}
div.bColor3 {background-color:#E0FFDF;}
div.bColor4 {background-color:#FFD0E0;}
div.bColor5 {background-color:#E0F0FF;}
h1.offSection {text-align:center; margin:10px 0 0 0;}
div.flexBox {display:flex; flex-wrap:wrap;}
div.offBox {width:350px; margin:10px 12px 12px 0;}
div.officer {position:relative; width:100%; height:140px; border:1px solid #E0E0E0;}
div.officer img {float:left; max-width:30%; height:140px; margin-right:10px;}
div.ofCred {padding:10px;}
p.ofName {font:bold 1.2em Verdana, Arial; margin:0 0 10px 0;}
p.ofXtra {font-size:1.2em; font-style:italic; margin:0 0 10px 0;}
p.ofPhone {font-size:1.2em; margin:0;}
div.ofJob {position:absolute; top:0; right:0; bottom:0; left:30%; top:0; padding:10px; background-color:#FFFFFF; overflow-y:auto; z-index:10; display:none;}
div.ofJob div {display:inline-block; cursor:pointer;}
div#jobBox {position:fixed; color:#083060; background:#F8F8F8; font-size:1.1em ; padding:10px; border:1px solid #336699; border-radius:5px; box-shadow:5px 5px 5px #888; visibility:hidden; z-index:10;}

/* ---- ADMIN PAGES --- */

span.admin {position:fixed; top:10px; left:10px; font-size:1.2em; font-weight:bold; color:#F00050; padding:0 4px; border:1px solid #F00050; z-index:10;}
span.eMode {position:fixed; top:10px; right:124px; font-size:1.2em; font-weight:bold; color:#F00050; padding:0 4px; border:1px solid #F00050; z-index:10;}

div.boxS {width:calc(320px + 15vw); margin:10px auto;}
div.boxL {width:100%; margin:10px auto;}

fieldset.small {height:30vh;}
fieldset.center {display:flex; justify-content:center; align-items:center;}
fieldset.large {height:calc(100vh - 390px);}

div.evtBox {height:100%; overflow:auto;}

table.listXL {display:block; height:100%; overflow:auto;}
table.listXL tr:nth-child(1) th {position:sticky; top:0;}

table.regList tr td:nth-child(1) {min-width:140px; text-align:center;}
table.regList tr td:nth-child(2) {width:24%;}
table.regList tr td:nth-child(3) {width:22%;}
table.regList tr td:nth-child(4) {width:22%;}
table.regList tr td:nth-child(5) {min-width:70px; text-align:center;}
table.regList tr td:nth-child(6) {min-width:140px; text-align:center;}

table.evtList tr td:nth-child(1) {min-width:82px; text-align:center;}
table.evtList tr td:nth-child(2) {width:22%;}
table.evtList tr td:nth-child(3) {width:22%;}
table.evtList tr td:nth-child(4) {width:110px; text-align:center;}
table.evtList tr td:nth-child(5) {width:110px; text-align:center;}
table.evtList tr td:nth-child(6) {width:65px; text-align:center;}
table.evtList tr td:nth-child(7) {min-width:100px;}
table.evtList tr td:nth-child(8) {width:140px; text-align:center;}

table.evtForm {padding:0px 40px;}
table.evtForm td {padding:6px 0; }
table.evtForm input.evtID {width:90px;}
table.evtForm input.name {width:300px;}
table.evtForm input.date {width:90px;}
table.evtForm input.notes {width:300px;}

.dtPick {cursor:pointer; font-size:14px;}

/* ---- RESULTS & EVENTS PAGES --- */

.drSection {line-height:1.4em;}
.secHead {margin:24px 0; font-size:1.6em; font-weight:bold;}
.parHead {font-size: 1.2em; font-weight:bold; margin:12px 0 0 0;}
.men, .women, .mixed {margin:12px 0 0 20px; font-weight:bold;}
.men {color:blue;}
.women {color:magenta;}
.mixed {color:limegreen;}
#men, #women, #mixed {scroll-margin-top:46px;}
.par {margin:0;}
.noLink {cursor:default; font-style:italic;}
.dateName {display:inline-block; width:260px;}
.viewReg {display:inline-block; width:130px;}
img.gPhoto {width:92%; padding:6px; margin:12px 0 40px 0; border:1px solid #336699; border-radius:5px; box-shadow:5px 5px 5px #888;}

/* ---- ADMIN DRAWS & RESULTS PAGE ---- */

.noLinkH {cursor:pointer; font-style:italic; background:#E0A050}
.noLinkH:active {background:#F06060}
div#drForm {
	position:fixed; top:40%; left:50%;
	transform:translate(-50%, -50%);
	background:#FFFFFF;
	padding:12px 20px;
	width:500px; 
	border:1px solid #606060; border-radius:5px; box-shadow:5px 5px 5px #888;
	z-index:20;
}
div#drForm fieldset {padding:8px 20px 20px}
input#drLink {width:100%;}

/* ---- PAGE HONOURS BOARD --- */

p.hbTopC {position:absolute; top:6px; left:4vw; right:4vw; text-align:center;}
span.hbTopR {position:absolute; top:20px; right:4vw;}
div.hbWrapper {height:calc(100vh - 280px); overflow-y:auto;}
table.hBoard {table-layout:fixed; width:100%; border:1px solid #A0A0A0; border-radius:5px;}
table.hBoard th {position:sticky; top:0;}
table.hBoard th.season {width:65px; padding:0;}
table.hBoard th.stars {width:45px; padding:0;}
table.hBoard td:first-child {text-align:center;}
table.hBoard td {padding:2px;}
div#htmlPop {position:absolute; font-size:1.2em; color:#336699; background:#FFFFFF; padding:4px; border:1px solid #E0E0E0; border-radius:5px; box-shadow:5px 5px 5px #888; visibility:hidden; z-index:10;}
div.hbdBoxP {height:calc(100vh - 215px); padding:0 8px 0 0; overflow:auto;}
div.hbdBoxA {height:calc(100vh - 275px); padding:0 8px 0 0; overflow:auto;}
textarea.text {width:100%; height:calc(50% - 85px); min-height:40px;}

/* ---- PAGE FOOTER --- */

#footer {position:fixed; bottom:0; width:100%; line-height:30px; text-align:center; color:#FFFFFF; background:#494949; z-index:100;}

/* ---- DATE PICKER STYLES ---- */

table.dPicker {table-layout:fixed; width:150px; text-align:center; color:#2B3856; background:#FEFEFE; border:1px solid #B0B0B0; border-radius:5px; box-shadow:5px 5px 5px #888;}
table.dPicker th {font:bold 12px arial;}
table.dPicker td {width:14.5%; font:bold 11px Arial; padding:0; border:1px solid #FEFEFE;}
table.dPicker td span.dpArrow {padding:0 6px; cursor:pointer;}
table.dPicker tr.dpWdays {font:bold 11px Arial; color:#F0F0F0; background:#1888D8;}
table.dPicker td.dpTDHover {background:#C0C0C0; color:red; cursor:pointer;}
table.dPicker td div.dpHilight {color:red; font-weight:bold;}
table.dPicker td button {height:16px; margin:6px 2px; padding:0 6px;}