/* Popup */
body {background-size: cover;}

.popup {min-height: 40%; margin: 70px auto; text-align: left; padding: 20px; background: #ccc; border-radius: 5px; width: 150%; position: relative; transition: all 5s ease-in-out; color: #333;}
.popup h2 {margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif;}
.popup .close {position: absolute; top: 0px; right: 5px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333;}
.popup .close:before {color: rgba(0, 0, 0, 0.9); content: "X"; font-size: 24px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9);}
.popup .close:hover {color: #124734;}
.popup .content {max-height: 30%; overflow: auto;}
.popup:first-letter {font-family: Georgia, Arial, Helvetica, sans-serif; font-size: 180%; font-weight: bold; font-style: italic; color: #124734;}
.popup .title {font-family:  Georgia, Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; color: #124734;}

.overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0;}
.overlay:target {visibility: visible; opacity: 1;}

/* Popup link boxes */

.box {display: inline; width: 20%; margin: 0 auto; background: rgba(255,255,255,0.1); padding: 10px; border: 1px solid green; border-radius: 20px/50px; background-clip: padding-box; text-align: center;}
.button {font-size: 1em; padding: 2px 5px 5px 5px; color: #936F37; border: 1px solid #000; border-radius: 20px/50px; text-decoration: none; font-style: italic; font-weight: bold; cursor: pointer; transition: all 0.3s ease-out;}
.button:hover {background: #124734;}

.holder {width: 100px; margin: 11px 0 0 20px; padding: 0; border: 1px solid #a9a9a9; float: right; background: transparent;}


/* Tabs */
.radiotabs {width: 100%; margin: 0 auto;} /* Width of whole content area - Centre of screen and 50px from top and bottom */
input.tabs {position:absolute;; left:-9999px;}
input.tabs + label {float:left; display:block; font:normal 12px/30px arial, sans-serif; border:1px solid #aaa; border-radius:5px 5px 0 0; background:#124734; padding:0 20px; margin-right:2px; text-decoration:none; color:#fff; position:relative; cursor:pointer;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}

.tabcontent {width: 96%; padding: 10px; border:1px solid #aaa; border-radius:0 5px 5px 5px; background:#fff; position:relative; z-index:10; clear:left; top:-1px;
 box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}
.tabcontent p {padding: 0 0 5px 0; margin:0; font: normal; font-size: 9px/20px; font-style: arial, sans-serif; color:#333;}
.tabcontent h4 {padding:0 0 10px 0; margin:0; font: bold 14px/25px arial, sans-serif; color:#000;}
.tabcontent {display:none;}
.tabcontent ul li {list-style: none; margin-left: 0; padding-left: 0em; text-indent: -1.4em;}

input.tabs:checked + label {background-color:#fff; border-bottom:1px solid #fff; color:#000; z-index:20;}
input#tab1:checked ~ div#view1 {display:block;} /* Add one line and increment numbers to reflect each tab added to the PHP */
input#tab2:checked ~ div#view2 {display:block;} /* This set is used in railmaster.php */
input#tab3:checked ~ div#view3 {display:block;}
input#tab4:checked ~ div#view4 {display:block;}
input#tab5:checked ~ div#view5 {display:block;}
input#tab6:checked ~ div#view6 {display:block;}
input#tab7:checked ~ div#view7 {display:block;}
input#tab8:checked ~ div#view8 {display:block;}
input#tab9:checked ~ div#view9 {display:block;}
input#tab10:checked ~ div#view10 {display:block;}
input#tab11:checked ~ div#view11 {display:block;}
input#tab12:checked ~ div#view12 {display:block;}