@media screen and (orientation: portrait) and (pointer: coarse) { 
  html { 
    -webkit-transform: rotate(90deg); 
    transform:rotate(90deg);
    transform-origin: left top;
    width:100%;
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
  }
}

.page{
background-color: #513C0C;
width:850px;
margin:auto;
list-style-type: none;
font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

.navigation {
font-size:10px;
text-decoration:none;
font-weight: bold;
position:sticky;
z-index:5;
}
.navigation ul {
    list-style-type: none;
    margin:auto;
}

.navigation li {
    float: left;
    text-align: left;
    padding-top:10px;
    padding-bottom:10px;;
    width:25%;

}

.navigation li a {
    text-align:center;
    display: inline-block;
    text-decoration: none;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    border-radius:5px;
    color: #ededed;
    background-color: #666;
    width:90%;

}

.navigation .dropdown-content {
    display: none;
    position: absolute;
    background-color: #666;
    z-index: 5;
    border-radius:5px;
    width:250px;
}

.navigation .dropdown-content a {
    color: #ededed;
    text-decoration: none;
    display: block;
    width:230px;
    text-align: left;
    padding-left:10px;
    padding-right:10px;
}
/*No dropdown menu on touch screens*/
@media only screen and (pointer: coarse){
.drop-down:hover  .dropdown-content {
    display: none;
}
}
/*dropdown menu when mouse connected*/
@media only screen and (pointer: fine){
.drop-down:hover  .dropdown-content {
    display: block;
}
}

.navigation li a:hover {
	background-color:#555;
	color:#E6D231;}

.navigation .selected {
	background-color:#555;
	color:#E6D231;
	border-radius:5px;}

.navigation .dropdown-content .selected {
	color:#E6D231;
	}

.navigation .dropdown-content .selected:hover {
	color:#E6D231;
	}

.news {
padding-left:20px;
height:90px;
overflow:auto;
display:block;
}
.news-content {
display:block;
padding:5px;
}

.news-title {
font-weight:bold;
text-align:center;
}

.footer {
position: fixed;
overflow: hidden;
bottom: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width:100%;
margin: auto;
font-size:12px;
font-weight:normal;
line-height:20px;
color:#efefef;
text-align: center;
}

.footer a {
text-decoration:none;
}

.footer a:link,
.footer a:active,
.footer a:visited {
    color: #ededed;
}

.footer a:hover{
	color: #E6D231;
	}

.center {
text-align: center;
margin-left: auto;
margin-right: auto;
padding:10px;
}

.justify {
text-align: justify;
margin-left: auto;
margin-right: auto;
padding:10px;
}


.gallery .center a:link,
.gallery .center a:active,
.gallery .center a:visited {
color:#0000FF;
}

.gallery {
position:relative;
overflow:hidden;
width:530px;
margin: 10px auto;
padding: 10px;
background:#ededed;
border-radius:20px;
}

.gallery a:link,
.gallery a:active,
.gallery a:visited {
color:#555;
outline:0;
text-decoration:none;
}

.gallery a:hover {color:blue;} 

.gallery img {border:0;
border-radius:10px;
width:40%;
}

.gallery .float-left {float:left;}
.gallery .float-right {
float:right;
font-weight:bold;}

.gallery .clear {clear:both;}
.gallery .clearb10 {padding-bottom:10px;clear:both;}

.gallery .titlebar {
height:15px;
font-size:12px;
line-height:24px;
margin:0 5px;
}

.gallery .title {
font-weight:bold;
}

.gallery .thumb-album {
overflow:hidden;
width:120px;
height:100px;
float:left;
margin-left:35px;
margin-top:10px;
/*margin:10px;
*/
padding:5px;
background-color:#222;
font-size:10px;
font-weight:bold;
text-align:center;
color:#bbb;
}

.gallery .thumb-album a {color:#bbb;}

.gallery .thumb-album:hover {
background-color:#fff;
color:#333;
}

.gallery .thumb-album a {color:#bbb;}
.gallery .thumb-album:hover a {color:#444;}

.gallery .thumb {
overflow:hidden;
float:left;
width:110px;
height:67px;
margin-top:10px;
margin-left:40px;
background-color:#444;
border:5px solid #222;
}

.gallery .thumb:hover {
border:5px solid #f6f6f6;
}

.gallery .thumb-wrapper {
width:100%;
height:84px;
overflow:hidden;
}

.gallery .thumb-wrapper img {height:auto;
width:100%;
}

.shadow {
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
border-radius:15px;
}

/***** pagination style *****/
.gallery .paginate-wrapper {
padding:10px 0;
font-size:11px;
}

.gallery a.paginate {
color:#555;
padding:0;
margin:0 2px;
text-decoration:none;
}

.gallery a.current-paginate, 
.gallery a.paginate:hover {
color:#333;
font-weight:700;
padding:0;
margin:0 2px;
text-decoration:none;
}

.gallery a.paginate-arrow {
text-decoration:none;
border:0;
}

}