.toptitle .topmenu { text-align:center; line-height:50px; width:100%; font-weight:bold; font-size:11pt; color:#fff;}
.toptitle .toptitle_button_home { position:absolute; top:5px; left:10px; background-image:url(./images/top_menu_button_home_small.png); width:40px; height:40px;}
.toptitle .toptitle_button_menu { position:absolute; top:5px; left:10px; background-image:url(./images/top_menu_button_menu_small.png); width:40px; height:40px;}
.toptitle .toptitle_button_reload { position:absolute; top:5px; right:10px; background-image:url(./images/top_menu_button_reload_small.png); width:40px; height:40px;}
.toptitle .toptitle_button_back { position:absolute; top:5px; right:10px; background-image:url(./images/top_menu_button_back_small.png); width:40px; height:40px;}


.menuitem { height:50px; background-image:url(./images/menu_item_bg.gif); background-repeat: repeat-x; font-size:11pt; vertical-align: middle; padding-left:20px; font-weight:bold;}

li.mainmenuitem { height:50px; background-image:url(./images/menu_item_bg.gif); background-repeat: repeat-x; font-size:11pt; vertical-align: middle; list-style:none;}
li.mainmenuitem:hover { background-image:url(./images/menu_item_selected_bg.gif);}

li.mainmenuitem div { height:100%; position:relative; padding:0px; line-height:50px; padding-left:10px; padding-right:0px; font-weight:bold; cursor: pointer;}
li.mainmenuitem div div { position: absolute; right:0px; top:0px; width:35px; height:50px; background-image:url(./images/menu_item_arrow.png); background-repeat:no-repeat;}

.c { letter-spacing: 1px; font-family: 微軟正黑體, Arial, sans-serif;}
.p { letter-spacing: 0px; font-family: Arial, sans-serif;}

a:link {color:#000000; text-decoration:none;}
a:visited {color:#000000; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:none;}

a.newslink:link {color:#003d85; text-decoration:none;}
a.newslink:visited {color:#003d85; text-decoration:none;}
a.newslink:hover{color:#003d85; text-decoration:none;}

.tmpholder { height: 530px; width: 485px; overflow: auto; }

.newstitle {font-weight:bold; color:#003d85;}
.newscontent { font-size:11pt; text-align:justify; text-justify:inter-ideograph;}



.phototitle{ color:#003d85; font-weight:bold; padding-bottom:8px; font-size:9pt; text-align:left; font-family: Arial, sans-serif;} 


td.listing_photo { padding-right:10px;}

p.news {  margin-bottom: 15px;   text-indent:2em; font-size:11pt;}



#maincontent {min-height:600px;}
#maincontent2 {min-height:600px;}

#mainheading { width:100%; }
#maintitle {width:100%; }

#mainpage_footer {background-color:#aaaaaa; margin-top:10px; padding:15px; text-align:left; font-size:9pt; font-family: 微軟正黑體, Arial, sans-serif; color:#333333;}

/* youtube styles */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Interests photo & video style */

ul.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.submenu {
    padding-left: 0px;
    z-index: 5;
}
ul.submenu li {
    color: grey;
    background: #fefefe;
    width: 50%;
    padding: 14px 0px 10px;
    margin: 0px 0px 10px 0px;
    position: relative;
    float: left;
    text-align: center;
    z-index: 1;
}
ul.submenu li::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 70%;
    height: 100%;
    border-style: solid;
    border-color: #eee;
    border-width: 2px 0 2px 2px;
    border-radius: 8px 0 0 0;
    -webkit-transform: skewX(-20deg);
       -moz-transform: skewX(-20deg);
         -o-transform: skewX(-20deg);
            transform: skewX(-20deg);
    background-color: inherit;
    z-index: -1;
}
ul.submenu li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 70%;
    height: 100%;
    border-style: solid;
    border-color: #eee;
    border-width: 2px 2px 2px 0;
    border-radius: 0 8px 0 0;
    -webkit-transform: skewX(20deg);
       -moz-transform: skewX(20deg);
         -o-transform: skewX(20deg);
            transform: skewX(20deg);
    background-color: inherit;
    z-index: -1;
}
ul.submenu li.active {
    color: orange;
    z-index: 10;
}
ul.submenu li.active::before,
ul.submenu li.active::after {
    background-color: #fff;
    border-bottom-color: #fff;
}
ul.submenu li:not([class='active'])::before,
ul.submenu li:not([class='active'])::after{
    background-color: #dddddd; 
}

ul.submenu li:not([class='active']):hover::before,
ul.submenu li:not([class='active']):hover::after {
    background-color: #afafaf; 
}