/* CSS Document */

body {font-family:'Roboto';}

header h1 {background:#222; color:#fff; padding: 10px;border-bottom:1px solid #000; box-shadow:0 3px 6px rgba(0,0,0,0.1); margin-bottom: 45px; text-align:center; font-weight:100; letter-spacing:2px; font-size: 14px;}
header {border-bottom:1px solid #ddd;}

#logo {font-size:0px; white-space:nowrap; max-width:550px; margin:20px auto 20px auto; width:90%;}
#logo img {display:inline-block;vertical-align:top; opacity:0;}
#logo img:nth-of-type(1) {width:11.1%;}
#logo img:nth-of-type(2) {width:12.3%;}
#logo img:nth-of-type(3) {width:11.2%;}
#logo img:nth-of-type(4) {width:6.2%;}
#logo img:nth-of-type(5) {width:6.2%; margin-right: 1.8%;}
#logo img:nth-of-type(6) {width:14.5%;}
#logo img:nth-of-type(7) {width:15.2%; margin-left:-5.5%;}
#logo img:nth-of-type(8) {width:13.1%; margin-left:-2%;}
#logo img:nth-of-type(9) {width:12.8%;}
#logo img:nth-of-type(10) {width:3.9%;}

.imgPic {max-width:100%;}

#bookingEngine {background:url(https://paymonthlysite-com.stackstaging.com/wp-content/uploads/2024/06/ball-7280265_1280.jpg) no-repeat 50% 0; background-size:cover; padding: 30px 0; text-align:center;}

#bookingEngine h3 {font-size: 32px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.5); font-weight: 100; margin:30px 0;}

#bookingBox {min-height: 370px;background:rgba(255,255,255,0.8);border-radius: 12px;padding: 20px;margin:0px auto;text-align:left;}


.content h1 {font-size: 30px; color:#1e4b92; margin-bottom: 30px; text-align:center;}
.content h2 {color:#444; line-height:1.5; font-size: 22px; text-align:center; position:relative; padding-right: 30%; padding-left: 5%}
.content p {padding: 20px 0; text-align:center; font-style:italic; font-size: 14px; padding-right: 30%; padding-left: 5%;}

footer {background:#222; color:#ddd; padding: 20px 0; text-align:center;}
footer p {font-weight:100;}

.est65, .war3 {position:relative;}
.est65 span {width:30%; height: 30%; background:url(../images/est65.png) no-repeat; background-size:contain; position:absolute; right:20px;; top:20px; opacity:0;}
.war3 span {width:30%; height: 30%; background:url(../images/3yearWarranty.png) no-repeat; background-size:contain; position:absolute; right:20px; top:20px; opacity:0;}

.japan {position:absolute; right:0; width: 22%; top:-0px;}

h5 {text-align:center; font-size: 18px; padding: 20px 20px; line-height:1.5;  background:#ddd; color:#333;}
h5 a {color:#1e4b92; font-weight: 500;}

.visitQR {padding: 80px 0 20px 0; text-align:center;}
.visitQR img {max-width: 240px; margin:10px auto; display:block; }
.visitQR p {color:#fff; font-size: 18px; max-width:320px; display:inline-block; line-height:1.4; font-weight: 300;}
.visitQR p a {color:#fff; font-weight:bold;}


 .calendarMonth {font-size: 32px; font-weight: 100; position:relative;}
 .calendarMonth b {font-weight: 400;}
 .calendarMonth input {border:none; background:#1e4b92; color:#fff; position:absolute; right:10px; top:4px; padding: 6px 12px; border-radius:6px;}
 .calendarMonth input[value="Prev"] {right: 70px;}
 .calendarMonth input:hover {background:#333;}
.calendarDay {cursor:pointer; display:inline-block; width:14%; font-size: 12px; padding-top:8%; margin-right:0; overflow:hidden; position:relative;}
.calendarDay>div {position:absolute;left:0;top:0;width:100%;height:100%;border: 1px solid #ccc;}
.calendarDay>div h3 {position:absolute !important;right: 3px !important;top: -10px !important;min-width:24px;text-align:center;font-size: 12px!important;padding: 5px;border-radius: 30px;background: #444 !important;font-weight:100;}
.calendarDay.today>div h3 {background:red !important; color:#fff; font-weight: 400;}
.weekDays li {display:inline-block;width:13.8%;font-size: 20px;font-weight: 100;padding:10px 2px;text-align:right;margin-top:  20px;}
.day_7 {background: rgba(255,255,255,0.8) !important;}
.day_6 {background: rgba(255,255,255,0.8) !important;}
.calendarDay {margin-top:-1px;margin-left:-1px;background: rgba(255,255,255,0.3);}
.calenderJobs {position:absolute; left: 6px; right:6px; top:50px; bottom:6px; overflow:auto;}
.calenderJobs li {display:inline-block; vertical-align:bottom; width:100%; font-size: 11px; padding: 2px 8px; border-radius: 6px; background:#f5f5f5; margin-bottom:2px; font-weight: 500; cursor:pointer;}

.calenderJobs {-webkit-transform: scaleY(-1); transform: scaleY(-1); }
.calenderJobs li {-webkit-transform: scaleY(-1) !important; transform: scaleY(-1) !important; } 

.calendarDay>div:hover {background:#eff !important;}

.calendarDay.predate >div{background:url(../images/hatching.png) !important; opacity:0.4;}

.calenderJobs li.pending {background:pink;}
.calenderJobs li.applied {background:lightblue; color:#333;}
.calenderJobs li.assigned {background:green; color:#fff;}
.calenderJobs li.denied {background:#aaa; color:#555;}
.calenderJobs li.cancelled {background:#000; color:#aaa;}
.calenderJobs li.ignored {background:#f5f5f5; color:#bbb;}

#stage2 p {margin: 10px 0;}
#stage2 ul {margin:10px 0 5px 0;}
#stage2 li {display:inline-block; min-width: 32%; background:#1e4b92; color:#fff; padding: 7px 13px 6px 29px; border-radius: 30px; position:relative; font-size: 14px; margin-bottom: 5px;}
#stage2 li input {position:absolute; left: 4px; top: 4px; transform:scale(1.4);}
#stage2 fieldset {border:none; padding:0; margin:10px 0;}
#stage2 fieldset label {display:inline-block; width: 80px; font-size: 12px; text-align:right; padding: 5px 6px 0 0px; position:relative; top: 5px;}
#stage2 fieldset input[type="text"] {display:inline-block; border:1px solid #ccc; padding: 5px 10px; width: 220px; margin-top: 10px; vertical-align:middle;}
#stage2 fieldset input[type="button"] {display:block; margin: 20px 0; width:100%; background:#1e4b92;  color:#fff; padding: 6px 10px;  font-size: 20px; border:none; border-radius: 4px;}


@media(max-width: 640px){

	.calendarDay>div h3 {top: -20px !important; min-width:22px; text-align:center;font-size: 13px!important;padding: 3px;border-radius: 20px;}
	#bookingBox {min-height: 290px;}
	.calendarMonth {font-size: 24px;}
	.calendarDay {padding-top:12%!important;}
	#stage2 li {display:block; margin: 6px 20%;}
	#stage2 fieldset label {width: 30%;}
	#stage2 fieldset input[type="text"] {width:65%; margin-top: 7px;}
	
}



.newsStoryImg {position:relative; overflow:hidden; padding: 20px; background-color:darkblue;}
.newsStoryImg span {position:absolute; left:-5%; top:-5%; width:110%; height:110%; opacity:0.8; background-size:cover; filter:blur(20px); z-index:1;}
.newsStoryImg>div,.newsStoryImg>p {position:relative; z-index:10;}
.newsStoryImg p img {max-width:100%;}

#newsStoryShell {padding: 40px 0;}
#newsStoryShell p {font-size: 18px; line-height:1.6; margin-bottom: 15px; color:#444; font-weight: 300; }
#newsStoryShell h1 {font-size: 32px; text-align:center; margin-bottom: 30px; color:#333;}
time {padding: 20px 0; display:block;}
time strong {font-weight: 100;}
#newsStoryShell p a {color:darkblue; text-decoration:none; font-weight:bold;}
#newsStoryShell ol {margin-lefT: 20px;}
#newsStoryShell ol li {font-size: 18px; line-height:1.6; margin-bottom: 15px; color:#444; font-weight: 300; list-style-type:decimal; padding-left: 20px;}


.newsList_h {font-size: 32px; text-align:center; padding: 50px 0 0 0; color:#444; font-weight: 300; }
.newsList {display:block; padding: 50px 0;}
.newsList li {padding: 5px 0 25px 0; border-bottom:1px solid #ddd; position:relative; min-height: 150px;}
.newsList li a {color:#333;}
.newsList li a:hover {color:darkblue;}
.newsList li span {position:absolute; left:0; top:10px; width: 240px; height: 130px;}
.newsList li h3 {padding-left: 280px; font-size: 24px; line-height:1.4;}
.newsList li p {padding-left: 280px; padding-top: 20px; font-size: 17px; line-height:1.5;}
@media(max-width:640px){
.newsList li span {position:static; display:block; padding-top: 60%; width:100%; margin-bottom: 20px;}
.newsList li h3 {padding-left: 0; font-size: 20px;}
.newsList li p {padding-left: 0; padding-top: 15px; font-size: 15px; }

}