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

www.regattaspotter.org
Copyright (C) 2017, Carl Popolo and AEI, LLC.  All Rights Reserved

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

* {
    font-family: "Droid Sans",sans-serif;
}
* { 
  /* font-family: 'Roboto Condensed', 'Ropa Sans', 'Droid Sans', sans-serif; */
  font-family: 'Droid Sans', sans-serif;
}

div#fixedheader {
    position: fixed; 
    overflow: hidden; 
    height: 80px; 
    top: 0; 
    left: 0; 
    background: #fff;    
    width: 100%;
    padding: 20px 10px;
    margin: 0;   
    /*font-size: 4em;*/
    color: gray;
    border-bottom: 4px solid silver;
    z-index: 999;
    vertical-align: top;
}


div#contentheader {
    width: 100%;
    padding: 10px;
    margin: 12px 0;   
    /*font-size: 4em;*/
    color: gray;
    height: auto;
}
div#regattadatetime {
    float: right;
    text-align: right;
}
div#userarea {
    font-size: 2em;
    padding: 10px 0;
    margin-top: 15px;
}
div#userarea input, div#userarea select {
    /*padding: 2px 8px;*/
    /*width: 300px;*/
}
div#userarea label, div#userarea input[type=submit] {
    margin-top: 20px;
}
input[type=submit] {
    background: orange;
    border-radius: 10px;
    color: white;
    padding: 10px 30px;
    box-shadow: none;
}

div,h1,h2,h3,p { 
    margin: 0; 
    font-weight: bold;
}
div.divevent h2 span {
    font-size: 2vw;
}

div.divevent {
    position: relative;
    padding: 5px;
    border-radius: 10px 10px 0 0;
    /* background: white; */
    display: inline-block;
}

div.eventheader {
    position: relative;
    width: 95%;
    margin-right: 5%;
    cursor: pointer;
    display: inline-block;
}
div.eventheader:after {
    clear: both;
    content: "";
    display: table;
}

*.card- { border: 4px solid silver; border-left: 24px solid silver; }
*.card-red { border: 4px solid red; border-left: 24px solid red; }
*.card-green { border: 4px solid green; border-left: 24px solid green; }
*.card-blue { border: 4px solid blue; border-left: 24px solid blue; }
*.card-purple { border: 4px solid #bb19b5; border-left: 24px solid #bb19b5; }
*.card-orange { border: 4px solid darkorange; border-left: 24px solid darkorange; }
*.card-yellow { border: 4px solid gold; border-left: 24px solid gold; }
*.card-pink { border: 4px solid pink; border-left: 24px solid pink; } 
*.card-turquoise { border: 4px solid turquoise; border-left: 24px solid turquoise; } 

input.btn.btn- { background: silver !important; color: white !important; }
input.btn.btn-red { background: red !important; color: white !important; }
input.btn.btn-green { background: green !important; color: white !important; }
input.btn.btn-blue { background: blue !important; color: white !important; }
input.btn.btn-purple { background: #bb19b5 !important; color: white !important; }
input.btn.btn-orange { background: darkorange !important; color: white !important; }
input.btn.btn-yellow { background: gold !important; color: white !important; }
input.btn.btn-pink { background: pink !important; color: white !important; }
input.btn.btn-turquoise { background: turquoise !important; color: white !important; }

div.divevent.card-          { border: 24px solid silver; border-left: 64px solid silver; margin-bottom: 10px; }
div.divevent.card-red       { border: 24px solid red; border-left: 64px solid red; margin-bottom: 10px; }
div.divevent.card-green     { border: 24px solid green; border-left: 64px solid green; margin-bottom: 10px; }
div.divevent.card-blue      { border: 24px solid blue; border-left: 64px solid blue; margin-bottom: 10px; }
div.divevent.card-purple    { border: 24px solid #bb19b5; border-left: 64px solid #bb19b5; margin-bottom: 10px; }
div.divevent.card-orange    { border: 24px solid darkorange; border-left: 64px solid darkorange; margin-bottom: 10px; }
div.divevent.card-yellow    { border: 24px solid gold; border-left: 64px solid gold; margin-bottom: 10px; }
div.divevent.card-pink      { border: 24px solid pink; border-left: 64px solid pink; margin-bottom: 10px; }
div.divevent.card-turquoise { border: 24px solid turquoise; border-left: 64px solid turquoise; margin-bottom: 10px; }

.minibowcard.card- { border-color: silver; }
.minibowcard.card-red { border-color: red; }
.minibowcard.card-green { border-color: green; }
.minibowcard.card-blue { border-color: dodgerblue; }
.minibowcard.card-purple { border-color: #bb19b5; }
.minibowcard.card-orange { border-color: darkorange; }
.minibowcard.card-yellow { border-color: gold; }
.minibowcard.card-pink { border-color: pink; }

div.xcarddata { background: silver; }
div.xcarddata.red { background: indianred; }
div.xcarddata.green { background: seagreen; }
div.xcarddata.blue { background: dodgerblue; }
div.xcarddata.purple { background: #bb19b5; }
div.xcarddata.orange { background: darkorange; }
div.xcarddata.yellow { background: gold; }
div.xcarddata.pink { background: pink; }

*.card-m { color: black; background: white; }
*.card-w { color: white; background: black; }

/* 2025 *.card-mx { color: darkmagenta; background: #ccc; } */
*.card-mx { color: black; background: white; }

div.divevent div.eventid { position: absolute; left: 70px; top: 15px; }
div.divevent div.eventdesc { position: relative; left: 35%; top: 15px; width: 35%; }
div.divevent div.eventdesc.timer { left: 25%; }
div.divevent div.eventtimer { right: 25%; border: 1px solid silver; width: 100px; }

div.divevent div.eventcounts { position: absolute; right: 2%; top: 15px; width: 20%; text-align: center; padding: 5px; border-radius: 6px; color: white; background: seagreen; transition: 1s; }
div.divevent div.eventimg { position: absolute; left: 1%; top: 5px; width: 70px; height: 70px; border: 0px solid silver; margin-left: 0px; z-index: -500; }
div.divevent div.eventimg img { transform: scaleX(-1); }
div.divevent div.eventminibar { 
    width: 95%;
    margin-right: 5%; 
    border: 0px solid silver;
    display: inline-block;
    margin-top: 30px;
}

div.divboats {
    clear: both;
    width: 100%;
    margin-right: 1%;
    height: 500px;
    transition: 0.3s;
    overflow-y: scroll;
    display: inline-block;
    margin-top: 30px;
}
div.collapsed {
    height: 0;
}

div.divboat {
    display: inline-block;
    width: auto;
    min-width: 260px;
    padding: 5px;
    margin: 0 5px 5px 0;
    border-radius: 10px;
    border: 8px solid black;
    background: white;
    transition: 0.5s;
    color: #222;
    cursor: pointer;
}
div.divboatmini {
    width: 6vh;
    float: left;
    font-size: 2vh;
    padding: 3px;
    margin: 1px;
    border-radius: 6px 6px 0 0;
    border: 3px solid silver;
    color: silver;
    background: white;
    text-align: center;
    cursor: pointer;
}

div.divboat div.boatorg {
    /* height: 40px */;
    width: 230px;
    overflow: hidden;
    font-size: 1.7em;
    white-space: nowrap;
    line-height: 1.3em; /* 2023 */
}
div.boatcardblade {
    min-width: 250px;
    height: 50px;
    padding: 0px;
}
div.divboat div.boatperson {
    font-size: 0.8em;
    line-height: 0.8em;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    overflow: hidden;
}
div.boatdata {
    min-width: 250px;
    padding: 0;
    margin-top: 2px;
}
div.divboat div.boatbow {
    display: block;
    float: left;
    width: 100px;
    height: 55px;
    padding: 2px 4px 2px 0;
    border-radius: 6px 6px 0 0;
}
div.divboat div.boatcardblade div.boatbow h3 {
    font-size: 2.5em;
    padding: 0;
    margin: 0;
    text-align: center;
}
div.divboat div.bowblade {
    display: block;
    float: left;
    margin-left: 10px;
    width: 90px;
    height: 50px;
    margin-top: 0;
    background-position: -350px 0px;
    border: 0px solid silver;
}

div.divboat div.boatspotted { font-size: 0.8em; }

div.divboat.late1 { background: pink; }
div.divboat.late2 { background: red; }
div.divboat.seen { background: silver; }


div.divboat.spotted, div.divboatmini.spotted {
    /* background: #aaa; */
    color: white;
}
div.divboat.spotted.late {
    /* background: #f66; */
}
div.divboat.spotted.early {
    /* background: #0e0; */
}
div.divboat.scratch {
    background: repeating-linear-gradient(
        45deg,
        #a55,
        #a55 10px,
        #800 10px,
        #800 20px
    ) !important;
    border-color: #800 !important;
}
div.divboatmini.scratch {
    background: repeating-linear-gradient(
        45deg,
        #a55,
        #a55 4px,
        #800 4px,
        #800 8px
    ) !important;
    border-color: #800 !important;
}

div#recentspots {
    display: none;
    position: absolute;
    top: 25vh;
    left: 20vw;
    width: 60vw;
    height: 50vh;
    border: 1px solid silver;
    background: white;
    box-shadow: 0 0 10px #aaa;
    border-radius: 12px;
    padding: 15px;
}

table#tablerecentspotsbyspotter {
    display: block;
    width: 100%;
    margin-top: 20px;
    max-height: 40vh;
    overflow-y: scroll;
}
table#tablerecentspotsbyspotter tr td,
table#tablerecentspotsbyspotter tr th  {
    font-size: 1.2em;
    border: 1px solid silver;
    padding: 2px 4px;
    min-width: 12%;
    width: 12%;
    max-width: 12%;
    overflow: hidden;
}
table#tablerecentspotsbyspotter tr td.bowcard ,
table#tablerecentspotsbyspotter tr th.bowcard  {
    width: 15%;
    min-width: 15%;
    max-width: 15%;
}
    

table#tablerecentspotsbyspotter tr th  {
    background: gray;
    color: white;
    vertical-align: bottom;
}