/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    width: 100%;
    height: 100%;
	font-family: 'Microsoft JhengHei', sans-serif;
	background: #fff;
	/* background-image: url('../images/test_bg.jpg'); */
}

html {
    width: 100%;
    height: 100%;
}

a{
  color:#333;
}

a:hover {
  color:#666;
  text-decoration:none;
}

.navbar-brand {
  float: left;
  min-height: 70px;
  /* padding: 0; */
  padding: 25px 0;
}

h1 { color:#3f8b89; }
h2 { color:#F80;}
h3 { font-weight:bold; }

.shadow { box-shadow: 3px 3px 5px #888888; padding:20px 50px 50px 50px; margin-bottom:20px; }

@media(min-width:767px) {
    .navbar {
        padding: 10px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

.navbar-toggle {
    margin-top: 18px;
}

#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: #FFF;
}
#custom-bootstrap-menu.navbar-default {
    font-size: 16px;
    background-color: #388b89;
    border-bottom-width: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li {
	padding-top:10px;
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
	font-family: 'Microsoft YaHei', 'Microsoft JhengHei';
	font-size: 20px;
	font-weight:400; 
	letter-spacing: 2px;
    color: #FFF;
    background-color: #388b89;
	
	-webkit-transition: all ease .3s;
       -moz-transition: all ease .3s;
         -o-transition: all ease .3s;
            transition: all ease .3s;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: #FFF;
    background-color:#50c2c3;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: #FFF;
    background-color: #50c2c3;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #FFF;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #FFF;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #388b89;
}

/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

.row { font-size: 16px; letter-spacing:2px} 

a[name] {
  padding-top: 80px;
  margin-top: -80px;
  display: inline-block; /* required for webkit browsers */
}

@media(max-width: 767px) {
	.home-section {
		margin-top:40px;
	}
	.caption { display:none; }
	h2 { font-size:24px; }
}

.register-section {
    height: auto;
    padding: 0px 0;
	color:#388b89;
}

.btn-main {
  color: #FFF;
  background-color: #7C7C7C;
  border-color: #FFF;
}

.btn-main:hover,
.btn-main:focus,
.btn-main.focus,
.btn-main:active,
.btn-main.active,
.open > .dropdown-toggle.btn-main {
  color: #fff;
  background-color:#8fc13e;
  border-color: #fff;
}

.row { font-size:16px; color:#333; }

.topic { color:#c09d78; font-size:22px } 

.error { color:#F30; font-size:14px; }

.star { color:#F60; }

.btn-primary.gradient {
	background: -moz-linear-gradient(top,  #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #33a6cc 50%,#0099cc 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */
	border:none;
}

.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {
	background: -moz-linear-gradient(top,  #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #66b2cc 50%,#33a6cc 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */
}

label { display: block; float:left; }

.thumbnail:hover { box-shadow: 2px 2px 5px grey; }

.dropdown-menu > li > a {
  font-size: 16px;
  padding: 6px 20px;
}

/* change breakpoint */

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
	
	/* dropdown menu */
	
	.navbar-nav .open .dropdown-menu {
    	position: static;
    	float: none;
    	width: auto;
    	margin-top: 0;
    	background-color: #aaa7a7;
    	border: 0;
    	-webkit-box-shadow: none;
            	box-shadow: none;
		font-size:18px;
  	}
  	.navbar-nav .open .dropdown-menu > li > a,
  	.navbar-nav .open .dropdown-menu .dropdown-header {
    	padding: 5px 15px 5px 25px;
		color:#FFF;
  	}
  	.navbar-nav .open .dropdown-menu > li > a {
    	line-height: 20px;
  	}
  	.navbar-nav .open .dropdown-menu > li > a:hover,
  	.navbar-nav .open .dropdown-menu > li > a:focus {
    	background-image: none;
		color:#333;
  	}
}

/* end change breakpoint */

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color:#CCC;
}