@import url("obj.light.css");

@import url("leaflet.css");



body {

    background-color: #dfdfdf;

}



#pageresponse {

    background: #efef99;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

    text-align: center;

    font-size: 9pt;

    line-height: 1.7;

    color: #000;

}



#sitecontainer {

	padding-top: 92px;

}



#pageheader {

    z-index: 99;

	position: fixed;

    height: 90px;

	width: 100%;

    background-color: #000;

}



#pagehelp {

    margin: 0 auto;

    padding: 5px;

    width: 100%;

    background: #efefcc;

    border: 1px solid #000;

    border-radius: 0 0 5px 5px;

    display: none;

}

#pagehelpclose {

    position: relative;

    float: right;

    border: 1px solid #000;

}





#pageheaderlogo {

    background: transparent url("../site/logo.png") left center no-repeat;

    margin: 2px 0 0 10px;

    height: 45px;

    width: 45px;

}



#pageheadertitle {

    background: transparent url("../site/spiersmedia.png") left center no-repeat;

    margin: 3px 0 0 60px;

    height: 40px;

    width: 400px;

}



#pageheadermenu {

    top: 48px;

    border-top: 1px solid darkblue;

    border-bottom: 2px solid darkblue;

    background-color: #171717;

}



.headertabs {

    color: #ededed; 

}



.headertabs ul {

    list-style: none; 

    padding: 0; 

    margin: 0; 

    display: flex;

}



.headertabs ul li {

    color: #ededed; /* Text color for each tab */

    font-size: 12pt; /* Font size for tab text */

    line-height: 40px; /* Sets the height of the tab for vertical alignment */

    padding: 0px 14px; /* Padding around the tab */

    border-left: 1px solid transparent; /* Left border */

    border-right: 1px solid transparent; /* Right border */

    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */

}



.headertabs ul li a {

    text-decoration: none; 

    color: inherit; 

}



.headertabs ul li img {

    vertical-align: middle;

    padding-right: 5px; 

}



.headertabs ul li:hover {

    background-color: #333; 

    border-left: 1px solid darkblue; 

    border-right: 1px solid darkblue; 

    color: #0571fa;//lightblue

}





/* Paragraph */

p {

    line-height: 1.4;

    padding-left: 6px;

}



p small,

.small {

    font-size: 8pt;

}



p big,

.big {

    font-size: 14pt;

    line-height: 1.8;

}



p em,

.em {

    font-style: italic;

}



p strong,

.strong {

    font-weight: bold;

}



.data {

    font-size: 10pt;

    margin-left: 5px;

    color: #222;

}



.message {

    font-size: 10pt;

    text-align: center;

    color: #dd3c10;

    margin: 5px;

}



.warning {

    font-size: 32pt;

    font-weight: bold;

    text-align: center;

    color: #dd3c10;

    margin: 5px;

}



/* Headings */

h1, h2, h3, h4, h5, h6 {

    font-size: 14pt;

}



h1 {

    font-weight: bold;

    font-size: 18px;

    color: darkblue;

}



h2 {

    font-weight: bold;

    font-size: 16px;

    color: darkblue;

}



h3 {

    font-weight: normal;

    font-size: 14px;

    color: #333;

}



h4 {

    font-weight: bold;

    font-size: 12px;

    color: #333;

}



h5 {

    font-weight: bold;

    font-size: 10px;

    color: #993399;

}



h6 {

    font-weight: normal;

    font-size: 10px;

    color: #337600;

}



/* Anchor */

a {

    color: #333;

    background-color: transparent;

    text-decoration: none;

}



a:visited {

    text-decoration: underline;

}



a:active,

a:hover {

    color: #ff0000;

    text-decoration: underline;

}



.pagemenu {

    margin-top: 12px;    

	margin-left: 4px;

}



/* Lists */

#menucontainerinner li {

    margin-bottom: 6px;

}

#menucontainerinner ul {

    list-style-type: none;

    padding: 0;

}

#menucontainerinner ol {

    list-style-type: none;

    margin: 0;

    padding: 0;

}





/* Lists */

li {

    position: relative; 

    margin-bottom: 6px;

	padding-left: 10px;

}

li::marker {

    margin-right: 50px;

}

ul{

    list-style-type: disc;

    margin: 0;

    padding-left: 20px;

}

ol {

    list-style-type: decimal;

    margin: 0;

    padding-left: 30px;

}





/* Input Fields */
input,
select,
textarea {
    color: #000;
    border: 1px solid darkblue;
    padding: 3px;
    margin: 3px;
    background: #efefcf;
    border-radius: 3px;
    font-size: 14px;
}

input:focus,
textarea:focus {
    outline: none !important;
    border-color: red;
    box-shadow: 0 0 10px red;
}

.textarea {
    box-shadow: 0 0 10px #red;
}

[contentEditable=true]:empty:not(:focus):before {
    content: attr(data-text);
    color: #222;
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: #D6E6FF;
    color: #000;
    border-color: darkblue;
}



/* Buttons */

.button,

.buttonaction {

    text-align: center;

    padding: 3px 6px;

    border-radius: 5px;

    margin: 2px;

    cursor: pointer;

    border-color: darkblue;

    font-size: 14px;

}



.button:hover,

.buttonaction:hover {

    box-shadow: 2px 4px 4px #ff9999;

}



/* Formatting */

.wide {

    width: 100%;

}



.top {

    vertical-align: top;

}



.center {

    text-align: center;

}



.right {

    text-align: right;

    padding-right: 5px;

}



.middle {

    vertical-align: middle;

    margin: 0 auto;

}



.padding {

    padding: 3px;

}



.margin {

    margin: 3px;

}



.bold,

.strong {

    font-weight: bold;

}



.required {

    border: #dd3c10 1px solid;

}



.disabled {

    background-color: #efefa9;

    border: 1px solid #efefa9;

}



.stroke {

    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;

}



.stroke-black {

    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}



.fill {

    background: #f5f5ff;

}



.fillsub {

    background: #efefef;

}

.filledit {

	background:	#efefcf;	

}

.fillsup {

    background: #cc6dcc;

}



.fillrow1 {

    background: #cdcdcd;

}



.fillrow2 {

    background: #ededed;

}



.opacity {

    opacity: 0.5;

}



/* Borders */

.border {

    border: darkblue 1px solid;

    border-radius: 7px;

    overflow: hidden;

}



.border-radius {

    border: darkblue 1px solid;

    border-radius: 5px;

}



.border-top {

    border-top: darkblue 1px solid;

}



.border-notop {

    border: darkblue 1px solid;

    border-top: none;

    border-bottom-left-radius: 7px;

    border-bottom-right-radius: 7px;

}



.border-bottom {

    border-bottom: darkblue 1px solid;

}



.border-nobottom {

    border: darkblue 1px solid;

    border-bottom: none;

    border-top-left-radius: 7px;

    border-top-right-radius: 7px;

}



.border-right {

    border-right: darkblue 1px solid;

}



.border-left {

    border-left: darkblue 1px solid;

}



.border-box {

    border: darkblue 1px solid;

}

.border-dash {

    border: darkblue 1px dashed;

}

.shadow {

    margin-right: 2px;

    margin-bottom: 2px;

    box-shadow: 1px 1px 2px #ef99ef;

}



/* Tiling */

.flex{

	display:					flex;

}



.tilepair{

	width:						49%;

	float:						left;

	padding:					3px;

}

.tilethird {

	width: 						33%;

	float:						left;

}

.tilefourth {

	width: 						25%;

	float:						left;

}

.tilefifth {

	width: 						20%;

	float:						left;

}

.tileimage img {

    position:					absolute;

    top:						0;

    bottom:						0;

	left:						0;

	right:						0;

    margin:						auto;

	border: 					1px solid black;

	vertical-align: 			middle;

}







.footer {

    clear: both;

    background: #f2f2f2;

    padding: 10px;

}



.footer a {

    text-decoration: none;

    font-weight: bold;

}



.footer a:hover {

    text-decoration: underline;

}



/* Hidden Elements */

.hidden {

    display: none !important;

}

.square {
  aspect-ratio: 1 / 1;

}