/* main style sheet */

@media (max-width: 800px) {
  /* Mobile layout */
.title {margin:0; padding:5px; background-color: #3298c8; font-size:1.5em; color:yellow; text-align:center; font-weight:bold}
iframe {width:100%;  height:80vh;}
.gbox {width:100%; min-width:90%; height:80vh; overflow-x: auto; overflow-y: auto; text-align:left; border:1px solid #000; }
.gbox img {width: 100% !important; height: auto !important;}
.hide {display:none;}
.box {overflow-x:auto}
.log {position:absolute; right:5px; font-size:0.7em; color:black; top:25px}
.lphoto {width:100%; height:auto; padding-top:8px;}

.leftimg, .rightimg, .centreimg, .centreimg100, .centreimg75, .centreimg100a {width:100%; height:auto; border:1px solid #000;}
.leftimg2 {float:left; margin-right:10px;}
.rightimg0 {float:right; margin:0px;}
.rightimg2 {float:right; margin-left:10px;}
.centreimg0 {margin:0px; border:1px solid #000;}
.centreimg2 {margin-left:10px; margin-right:10px;}
.centreimg3 {max-width: 75%; margin-left:10px; margin-right:10px; margin-bottom:5px}
.centreimg4 {margin:1px;}

.hleftimg, .hleftimg2, .hleftimg2r .hcentreimg0, .hcentreimg, .hcentreimg2, .hcentreimg3, .hcentreimg4, .hrightimg, .hrightimg2 {display:none;}

.pledit {width:100%; margin:0;}
.predit {width:100%; margin:0; padding:10px 0px}
.peimg {max-height:300px; max-width:80%;}
.ptext {width:90%; height:200px;}
.pdate {width:25%; margin-top:5px;}
.gname {width:30%; margin-top:5px;}
.pname {width:50%; margin-top:5px;}

.pledit {width:100%; margin:0; padding:10px 0px}
.predit {width:100%; margin:0;}
.peimg {max-height:300px; max-width:80%;}
.ptext {width:90%; height:200px;}


.cttext {text-align:center;}
.lctext {text-align:center; margin-left:5%; margin-right:5%}
.pdf-disp {width:650px; height:400px;}
.photomod {max-width:90%;}
.textarea {max-width:90%;}

.fs75box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:90%; vertical-align:middle;}
.fsc55box {display:inline-block; margin:0px; padding: 0px; text-align: center; width:85%; vertical-align:middle;}
.fs50box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:85%; vertical-align:middle;}
.fsc45box {display:inline-block; margin:0px; padding: 0px; text-align: center; width:80%; vertical-align:middle;}
.fs40box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:80%; vertical-align:middle;}
.fs25box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:60%; vertical-align:middle;}
.fs20box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:40%; vertical-align:middle;}
.fs15box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:40%; vertical-align:middle;}
.boxed {display:inline-block; border:10px solid blue; width:40%; margin:0px; padding:15px; font-size:1.7em; color:red; font-weight:bold; vertical-align:middle;} 
.boxed2 {display:inline-block; border:10px solid orange; width:80%; margin:0px; padding:5px; vertical-align:middle;}

.thumbnail span, .thumbnail span img, .thumbnail:hover span {display:none;}

.thumbnail{
position: relative;
z-index: 1;
}

.thumbnail:hover{
background-color: transparent;
z-index: 1;
}

}
  
@media (min-width: 800px) {
  /* Desktop layout */

.title {margin:0; padding:5px; background-color: #3298c8; font-size:2.2em; color:yellow; text-align:center; font-weight:bold}
.log {position:absolute; right:5px; font-size:0.7em; color:white; top:3px}
.lphoto {max-width:100%; height:auto; padding-top:15px;}

.leftimg, .hleftimg {float:left; margin:10px; border:1px solid #000;}
.leftimgh {float:left; margin:10px; border:1px solid #000;}
.leftimgh:hover {height: 400px;}
.leftimg2, .hleftimg2 {float:left; margin:10px;}
.hleftimg2r {float:left; margin:10px; transform: scaleX(-1);}
.rightimg0, .hrightimg2 {float:right; margin:0px;}
.rightimg, .hrightimg {float:right; margin:10px; border:1px solid #000;}
.rightimgh {float:right; margin:10px; border:1px solid #000;}
.rightimgh:hover {height: 400px;}
.rightimg2, .hrightimg2 {float:right; margin:10px;}
.centreimg0, .hcentreimg0 {margin:0px; border:1px solid #000;}
.centreimg, .hcentreimg {margin:10px; border:1px solid #000;}
.centreimg2, .hcentreimg2 {margin:10px;}
.centreimg3, .hcentreimg3 {margin:10px;}
.centreimg4, .hcentreimg4 {margin:1px;}
.centreimg75 {max-width:75%; max-height:75vh; border:1px solid #000;}
.centreimg100 {max-width:100%; border:1px solid #000;}
.centreimg100a {max-width:900px; border:1px solid #000;}

iframe {width:90%; min-width:700px; height:80vh;}
.gbox {width:90%; min-width:700px; height:80vh; overflow-x: hidden; overflow-y: auto; text-align:left; border:1px solid #000; }

.pledit {display:inline-block; width:33%; margin:0;}
.predit {display:inline-block; width:66%; margin:0; padding:10px 0px}
.peimg {max-height:300px; max-width:95%;}
.pgimg {max-height:200px}
.ptext {width:90%; height:200px;}
.pgtext {width:90%; height:150px;}
.pdate {width:20%; margin-top:5px;}
.gname {width:20%; margin-top:5px;}
.pgord {width:30px; margin-top:5px;}
.pname {width:40%; margin-top:5px;}

.Oledit {display:inline-block; width:66%; margin:0; padding:10px 0px}
.Oredit {display:inline-block; width:33%; margin:0;}
.Oeimg {max-height:200px; max-width:95%;}
.Ofimg {max-height:75px; max-width:100px;}
.Ogimg {margin:5px; border:1px solid #000;}
.Ogimg:hover {height: 200px;}
.Otext {width:90%; height:250px;}


.cttext {text-align:center; margin-left:5%; margin-right:5%;}
.lctext {text-align:left; margin-left:5%; margin-right:5%}
.pdf-disp {width:1000px; height:800px;}

.fs75box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:75%; vertical-align:middle;}
.fsc55box {display:inline-block; margin:0px; padding: 0px; text-align: center; width:55%; vertical-align:middle;}
.fs50box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:50%; vertical-align:middle;}
.fsc45box {display:inline-block; margin:0px; padding: 0px; text-align: center; width:45%; vertical-align:middle;}
.fs40box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:40%; vertical-align:middle;}
.fs25box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:25%; vertical-align:middle;}
.fs20box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:20%; vertical-align:middle;}
.fs15box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:15%; vertical-align:middle;}
.boxed {display:inline-block; border:10px solid blue; width:20%; margin:0px; padding:15px; font-size:1.7em; color: red; font-weight:bold; vertical-align:middle;} 
.boxed2 {display:inline-block; border:10px solid orange; width:65%; margin:0px; padding:5px; vertical-align:middle;}

.thumbnail{
position: relative;
z-index: 1;
}

.thumbnail:hover{
background-color: transparent;
z-index: 1;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
z-index: 1;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
z-index: 50;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -250px; /*position where enlarged image should offset vertically */
left: 100px; /*position where enlarged image should offset horizontally */

z-index: 50;
}

}



/* Common styling */
html {
height:100%; 
max-height:100%; 
padding:0;
margin:0; 
border:0; 
background:#F0F5FB; 
font-family:Verdana, Helvetica, Lucida Sans, arial, sans-serif;
}

body {margin:0}

#content {width:100%; font-size:0.85em}

#foot {margin:0; width:100%; height:25px;background-color:black; color:white; text-align:center;  font-size:0.7em; font-weight:normal; padding-top:10px}

dl {margin-top:10px}
dd {display:none;}

a.nav, a.nav:link, a.nav:visited, a.nav:active {margin-left:15px; display:block; background:transparent; width:160px; border:2px solid #000; text-decoration:none; text-align:center; line-height:23px; font-weight:bold; font-family:sans-serif; padding:2px; background:transparent; color:yellow; margin-top:2px}

a.nav:hover {background:#0099ff; color:#ffffff;  }

a.back, a.back:link  {margin-left:15px; display:block; background:transparent; width:160px; border:2px solid #000; text-decoration:none; text-align:center; line-height:23px; font-weight:bold; font-family:sans-serif; padding:2px; background-color:#5887D1; filter:alpha(opacity=60); opacity:0.6; color:#5887D1; margin-top:2px}


a.footer, a.footer:link a.footer:visited, a.footer:active {color:white}
a.footer:hover {color:red}

a.main, a.main:link, a.main:visited, a.main:active {color:blue; font-weight:bold}
a.main:hover {color:red}

a.main4, a.main4:link, a.main4:visited, a.main4:active {color:red; font-weight:bold}
a.main4:hover {color:green}

a.main2, a.main2:link, a.main2:visited, a.main2:active {color:blue; font-weight:bold; text-decoration:none;}
a.main2:hover {color:red}

a.main3, a.main3:link, a.main3:visited, a.main3:active {color:blue; font-weight:normal; text-decoration:none;}
a.main3:hover {color:darkorange}

a.Wenter, a.Wenter:link, a.Wenter:visited, a.Wenter:active {color:#FF3399; font-weight:bold; text-decoration:none;}
a.Wenter:hover {color:black}

a.cover, a.cover:link, a.cover:visited, a.cover:active {display:block; width:64px; border:solid white 2px}
a.cover:hover {border:solid black 2px}
a.cover2, a.cover2:link, a.cover2:visited, a.cover2:active {display:block; width:74px; border:solid white 2px}
a.cover2:hover {border:solid blue 2px}
a.cover3, a.cover3:link, a.cover3:visited, a.cover3:active {display:block; width:149px; border:solid white 2px}
a.cover3:hover {border:solid blue 2px}

.c10text {text-align:center; margin-left:10%; margin-right:10%}
.c5text {text-align:center; margin-left:5%; margin-right:5%}
.c2text {text-align:center; margin-left:10px; margin-right:10px}
.c0text {text-align:center}
.l10text {text-align:left; margin-left:10%; margin-right:10%}
.l5text {text-align:left; margin-left:5%; margin-right:5%}
.l2text {text-align:left; margin-left:10px; margin-right:10px}
.l0text {text-align:left;}

.footer {margin-top:0px; text-align:center;  font-size: 0.7em}
.photos {text-align:center}
#count {text-align:center}

h2 { font-size:1.8em}
h3 { font-size:1.3em}
h4 { font-size:1.0em}
#small { font-size:0.75em}
#pronly {display:none;font-size:0.75em}

#show { text-align:left;font-size:13px;margin-left: auto;margin-right: auto;border:0px}
#show td {padding-left:3px;padding-right:3px;padding-top:3px;padding-bottom:3px;border:0px}

.mar00 {margin-top:0px; margin-bottom:0px;}
.mar03, li {margin-top:0px; margin-bottom:3px;}
.mar06 {margin-top:0px; margin-bottom:6px;}
.mar0A {margin-top:0px; margin-bottom:15px;}
.marA0 {margin-top:15px; margin-bottom:0px;}
.mar60 {margin-top:6px; margin-bottom:0px;}
.mar30 {margin-top:3px; margin-bottom:0px;}
.mar33 {margin-top:3px; margin-bottom:3px;}
.mar36, ul, ol {margin-top:3px; margin-bottom:6px;}
.mar3A {margin-top:3px; margin-bottom:15px;}
.marA3 {margin-top:15px; margin-bottom:3px;}
.mar63 {margin-top:6px; margin-bottom:3px;}
.mar66 {margin-top:6px; margin-bottom:6px;}
.mar6A {margin-top:6px; margin-bottom:15px;}
.marA6 {margin-top:15px; margin-bottom:6px;}
.marAA {margin-top:15px; margin-bottom:15px;}

.red {color:red;}
.blue {color:blue;}
.green {color:green;}
.tab0 { text-align:left;font-size:12px;margin-left: auto;margin-right: auto;border:0px}
.tab0 td {padding-left:3px;padding-right:3px;}
.tab0 th {font-size:16px;padding-left:3px;padding-right:3px;}

.tab0s {font-size:12px;margin-left: auto;margin-right: auto;border:0px}
.tab0s td {text-align:left;padding-left:3px;padding-right:3px;}
.tab0s th {text-align:center;font-size:14px;padding-left:3px;padding-right:3px;}

.tab0c { text-align:center;font-size:12px;margin-left: auto;margin-right: auto;border:0px}
.tab0c td {padding-left:3px;padding-right:3px;}
.tab0c th {font-size:16px;padding-left:3px;padding-right:3px;}

.tab1 { text-align:center; font-size:12px; margin-left: auto; margin-right: auto; border:3px outset #D3D3D3; border-collapse:collapse}
.tab1 td { padding-left:3px;padding-right:3px;border:1px solid gray}
.tab1 th {font-size:16px; border-color:gray; border-style:solid; border-width:1px 1px 3px 1px;padding-left:3px;padding-right:3px;}

.tab1s { text-align:center; font-size:12px; margin-left: auto; margin-right: auto; border:3px outset #D3D3D3; border-collapse:collapse}
.tab1s td { padding-left:3px;padding-right:3px;border:1px solid gray}
.tab1s th {font-size:14px; border-color:gray; border-style:solid; border-width:1px 1px 3px 1px;padding-left:3px;padding-right:3px;}

.tab1m { text-align:center; font-size:12px; margin-left: auto; margin-right: auto; border:3px outset #D3D3D3; border-collapse:collapse}
.tab1m td.ycell { font-size:14px; padding-left:3px;padding-right:3px;background-color:#F0F5FB;border:1px solid gray}
.tab1m td { padding-left:3px;padding-right:3px;background-color:#dddddd;border:1px solid gray; width:60px}
.tab1m th {font-size:14px; border-color:gray; border-style:solid; border-width:1px 1px 3px 1px;padding-left:3px;padding-right:3px;}



.tleft {text-align:left;}

.lcap-R {font-size:0.85em; text-align:right; margin-top:0px; margin-bottom:3px;}
.lcap {font-size:0.85em; text-align:center; margin-top:3px; margin-bottom:10px;}

.banner {max-width:100%; height:152px; overflow:hidden;}

.photosort {max-width:100%;}
.photosort2 {max-width:75%;text-align:center;}
.pgall {display:inline-block; width:350px; margin:0px; padding: 10px 0px;}
.psort {display:inline-block; width:205px; margin:0px; padding: 10px 0px; vertical-align: top}
.psortg {display:inline-block; width:150px; margin:0px; padding: 10px 0px; vertical-align: top; font-size:0.85em; }
#gallery{
    max-width:100%;
}
#image-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
#image-list li { 
    margin: 10px 5px 10px 5px; 
    display: inline-block;
	vertical-align: top;
}
#image-list li img{
	max-height:145px;
	max-width:145px
}
#image-container{
    margin-bottom: 14px;
}
#txtresponse 
{
    padding: 10px 20px;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    display: none;
    border :#E0E0E0 1px solid;
    color:#212121;
   
}
.btn-submit {
    padding: 10px 30px;
    background: #333;
    border: #E0E0E0 1px solid;
    color: #FFF;
    font-size: 0.9em;
    width: 100px;
       
    border-radius: 0px;
    cursor:pointer;
    position: absolute;
}
.psortb {display:inline-block; width:205px; margin:0px; padding: 10px 0px; vertical-align: bottom}
.psortm {display:inline-block; width:80px; margin:0px; padding: 0px 0px; vertical-align: top; border:1px solid #200;}
.psortm2 {display:inline-block; width:160px; margin:0px; padding: 0px 0px; vertical-align: top; border:1px solid #200;}
.psortms {display:inline-block; width:78px; margin:0px; padding: 0px 0px; vertical-align: top; border:2px solid red;}
.psortms2 {display:inline-block; width:158px; margin:0px; padding: 0px 0px; vertical-align: top; border:2px solid red;}
.psorti {display:inline-block; width:275px; margin:0px; padding: 10px 0px; vertical-align: top}

.odb {display:inline-block; width:250px; margin:0px; padding: 10px; border-bottom:1px dotted #000;}
.mdb {display:inline-block; width:350px; margin:0px; padding: 10px; border-bottom:1px dotted #000;}
.pgimg {max-height:300px; max-width:300px;}
.psimg {max-height:200px; max-width:200px;}
.pggimg {max-height:145px; max-width:145px}
.pgsimg {max-height:100px; max-width:100px}
.ptimg {max-height:50px; max-width:65px;}
.ptimg:hover{transform:scale(2.5);}
.pmimg {max-height:50px; max-width:65px; vertical-align:middle;}
.pmimg:hover{transform:scale(2.5);}
.pstext {width:40%; margin-top:5px;}
.psnum {width:15%; margin-top:5px;}
.pebox {max-width:100%;}
.ppimg {height:50px; vertical-align:middle;}
.ppimg:hover{transform:scale(4);}
.pplimg {height:50px; vertical-align:middle;}
.pplimg:hover{transform:scale(4) translateX(25px);}
.pprimg {height:50px; vertical-align:middle;}
.pprimg:hover{transform:scale(4) translateX(-25px);}

.photomod {max-width:75%; margin-left:12%;}
.modb {display:inline-block; width:205px; margin:0px; padding: 10px 0px;}
.mimg {max-height:200px; max-width:200px;}
.vimg {max-height:400px; max-width:400px;}

.catitem {display:inline-block; width:200px; height:40px; text-align: left; vertical-align: text-top;}

.lefticon {float:left; margin:10px; border:1px solid #000;}
.upicon {margin:10px; border:1px solid #000;}
.righticon {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; margin:10px; border:0px;}
.righttext {float:right; margin:10px; border:0px;}

.fgall {color:blue; font-weight:bold; font-style: italic;}
.rgall {color:black; font-weight:bold; font-style: normal;}
.Nsel {color:blue; font-weight:bold; font-style: italic;}
.Ysel {color:black; font-weight:bold; font-style: normal;}

.desbox {display:inline-block; margin:0px; padding: 0px; max-width:100%; text-align:center;}
.dimg {max-height:120px; max-width:120px; margin:5px;}
.menbox {display:inline-block; margin:0px; padding: 0px; max-width:100%; text-align:center;}
.menimg {max-height:50px; margin:0px; padding: 0px;}

.Wbox {display:inline-block; border:5px; border-style:double; width:70%; margin:10px; padding:5px; background-color: pink; vertical-align:middle;}

.fpbox {display:inline-block; margin:15px; padding: 0px; text-align: center; width:100px; vertical-align:top;}
.f95box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:95%; vertical-align:middle;}
.f75box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:75%; vertical-align:middle;}
.f60box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:60%; vertical-align:middle;}
.f50box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:50%; vertical-align:middle;}
.f40box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:40%; vertical-align:middle;}
.f35box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:35%; vertical-align:middle;}
.f30box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:30%; vertical-align:middle;}
.f25box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:25%; vertical-align:middle;}
.f20box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:20%; vertical-align:middle;}
.f15box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:15%; vertical-align:middle;}
.f10box {display:inline-block; margin:0px; padding: 0px; text-align: left; width:10%; vertical-align:middle;}
.nordir {direction:ltr;}
.revdir {direction:rtl;}
.small { font-size:80%}

/* unclicked style div.more */
.l5text div.more i {cursor:pointer; color:#C00; font-weight:bold;}
.l5text div.more i.hide {display:none;}
.l5text div.more ul {display:none;}
.l5text div.more img {display:none;}

/* clicked style div.click */
.l5text div.click i.show {display:none;}
.l5text div.click i.hide {display:block;}
.l5text div.click ul {display:block;}
.l5text div.click img {display:block; float:left; padding-right:10px;}

.page-break	{ display: none; }

.indent1 {margin-left:75px;}
.indent2 {margin-left:100px;}


hr.dash {border-top: 1px dashed;}
hr.dot {border-top: 1px dotted;}
hr.wide1 {border: 1px solid;}
hr.wide2 {border: 2px solid;}


.Rmanimg{
z-index: 1;
}

a.Rmanimg, a.Rmanimg:link, a.Rmanimg:visited, a.Rmanimg:active {color:blue; font-weight:normal; text-decoration:none; position: relative; z-index: 1}

.Rmanimg span{ /*CSS for manual image*/
position: absolute;
padding: 0px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
z-index: 25;
}

.Rmanimg span img{ /*CSS for manual image*/
border-width: 0;
padding: 2px;
z-index: 50;
}

.Rmanimg:hover span{ /*CSS for manual image on hover*/
visibility: visible;
top: -50px; /*position where manual image should offset vertically */
left: 100px; /*position where manual image should offset horizontally */
z-index: 50;
}

a.Rmanimg:hover{
color:darkorange;
}

.Lmanimg{
position: relative;
z-index: 1;
}

a.Lmanimg, a.Lmanimg:link, a.Lmanimg:visited, a.Lmanimg:active {color:blue; font-weight:normal; text-decoration:none; position: relative; z-index: 1}

.Lmanimg span{ /*CSS for manual image*/
position: absolute;
padding: 0px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
z-index: 25;
}

.Lmanimg span img{ /*CSS for manual image*/
border-width: 0;
padding: 2px;
z-index: 50;
}

.Lmanimg:hover span{ /*CSS for manual image on hover*/
visibility: visible;
top: -50px; /*position where manual image should offset vertically */
right: 250px; /*position where manual image should offset horizontally */
z-index: 50;
}

a.Lmanimg:hover{
color:darkorange;
}