/*
	Client: NTU
	Date: September 2013
	Version: 1.0
	Author: Emma Lu
*/

/* Imports */
@import url("reset.css");
@import url("icons.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
@import url("http://fonts.googleapis.com/css?family=Droid+Serif");

/***** Global *****/
/* Body */
html {background: #2f0000 url(/images/default/body_bg.gif) 0 0 repeat-x scroll;}
body {color: #444; margin: 0; width: 100%; font: 400 13px/1.5 "Open Sans", 微軟正黑體, sans-serif; position: relative;
  background: url(/images/default/body_deco.png) 50% 130px no-repeat scroll;}

/* Headings */
h1 {font-size: 1.43em;}	/* 20px */
h2 {font-size: 1.29em;}	/* 18px */
h3 {font-size: 1.15em;}	/* 16px */
h4 {font-size: 1em;}	/* 14px */

h1, h2, h3, h4 {font-weight: bold; line-height: 1.5; cursor: default; color: #760000; margin-bottom: 0.5em;}
	
/* Anchors */
a {outline: 0; color: #760000; cursor: pointer; text-decoration: underline; transition: color 0.3s linear 0s;}
a img {border: 0;}
a:link, a:visited { text-decoration: underline;}
a:hover {text-decoration: underline; color: #917c45;}
a:active {text-decoration: underline;}

/* Paragraphs */
p {margin-bottom: 0.6em; cursor: default;}
*p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #760000; color: #f1ce73; text-shadow: none;}
::selection {background: #760000; color: #f1ce73; text-shadow: none;}
::-webkit-scrollbar {width: 12px; height: 12px;}
::-webkit-scrollbar-thumb {border: 1px solid #B8B8B8; -webkit-border-radius: 0px; border-radius: 0px; background: #ccc;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background: #eee;}

/* Layout */
html, body {height: 100%;}
.wrap {width: 940px; position: relative; margin: 0 auto -100px; height: auto !important; min-height: 100%; *display: table; /* For IE7 Hack */
  background: #FFF url(/images/default/wrap_bg.gif) 0 0 repeat-x scroll;}
.push {height: 100px;}
.break {border: none; border-top: 3px solid #777; margin: 0; clear: both; width: 100%; *margin-top: -10px; *height: 3px;}
.break-system {margin: 0 0 15px; background-color: #d8b967; height: 2px; border: 0; border-top: 1px solid #fcf5e3;}
.position-r {position: relative;}
[class*="span"] {float: left; min-height: 1px; margin-left: 20px;}
.span640 {width: 640px;}
.span230 {width: 230px;}
.container .span-none {margin-left: 0;}

/* header */
.main-header {height: 120px;}
.main-header .navbar-top {position: relative; top: 10px; right: 0; height: 24px; width: 940px; text-align: right;}
.main-header .navbar-top span {cursor: default;}
.main-header .form-account {display: inline-block; float: right; margin-right: 20px;}
.main-header .form-account .welcome {color: #c1a55c; margin: 0 2px; font-size: 12px;}
.main-header .form-account .password {color: #bb8080; margin: 0 4px 0 2px; font-size: 12px; text-decoration: none;}
.main-header .form-account .password:hover {color: #c1a55c;}
.main-header .form-account .f-c-gray {color: #913333;}
.main-header .body {position: relative; width: 940px; margin: 0 auto;}
.main-header .logo {position: absolute; top: 30px; left: 5px; height: 71px; background: url(/images/default/header_logo.png) 0 0 no-repeat scroll; text-decoration: none;}
.main-header .logo:hover {text-decoration: none;}
.main-header .body h1 {font-size: 20px; color: #f1ce73; line-height: 28px; padding-left: 95px; font-weight: bold; cursor: pointer; margin-bottom: 0;}
.main-header .body h2 {font-size: 17px; color: #f1ce73; line-height: 25px; padding: 18px 0 0 95px; font-weight: normal; cursor: pointer; margin-bottom: 0;}
.main-header .cursor h1, .main-header .cursor h2 {cursor: default;}

/* language */
.navbar-top .lang {display: inline-block; float: right;}
.navbar-top .lang .switch {color: #c1a55c; display: inline-block; height: 24px; text-decoration: none;}
.navbar-top .lang .switch:hover {text-decoration: none;}
.navbar-top .dropdown {background: #c1a55c; display: none; position: absolute; top: 23px; right: 5px; box-shadow: 1px 1px 3px rgba(59, 0, 0, 0.3);}
.navbar-top .dropdown li {list-style: none;}
.navbar-top .dropdown li a {padding: 2px 12px 2px 8px; display: block; text-decoration: none;}
.navbar-top .dropdown li a:hover {text-decoration: none; background: #f1ce73;}
.navbar-top .dropdown li a:last-child {padding-bottom: 3px;}
.navbar-top .lang:hover .dropdown {display: inline-block;}

/* container */
.container {position: relative; margin: 0 auto; *zoom: 1; min-height: 380px; height: auto; background: #FFF;}
.container:before, .container:after {display: table; line-height: 0; content: "";}
.container:after {clear: both;}
.container-index {width: 890px; padding: 30px 25px;}
.container-inside {width: 900px; padding: 30px 20px;}
.container .form-body {background: url(/images/default/form_bg.gif) 0 0 repeat scroll;}
.container .main-title {color: #760000; position: relative; margin-bottom: 10px; font-size: 19px; letter-spacing: 0.025em;}
.container .sub-title {color: #444; height: 24px; border-bottom: 1px solid #dcac0e; line-height: 1.65; font-size: 14px; position: relative;
  font-weight: normal; padding: 0 10px; background-color: #f6c420;}
.container .alert {padding: 5px 10px; border: 1px solid #CCC; background-color: #EEE; margin-bottom: 10px; position: relative;}
.container .alert p {margin: 0; padding-right: 30px;}
.container .alert .close {position: absolute; right: 10px; top: 4px; background: none repeat scroll 0 0; border: 0 none; cursor: pointer; padding: 0;
  color: #000; font-size: 20px; line-height: 20px; font-weight: bold; opacity: 0.3;}
.container .alert .close:hover, .alert .close:focus {opacity: 0.5;}
.container .alert-danger {background-color: #FFDEDE; border-color: #EED3D7; color: #C00;}
.container .application-college {position: relative; padding-left: 20px; line-height: 1.5;}
.container .application-college [class^="icon-"], .container .application-college [class*=" icon-"] {position: absolute; top: 3px; left: 0;}

/* submenu */
.submenu {padding: 5px 0 10px; margin: 0;}
.submenu li {list-style: none;}
.submenu li a {color: #a96b00; font-size: 13px; height: 29px; line-height: 2.3; position: relative; display: block; padding: 0 20px 0 5px; border-bottom: 1px solid #cba666;}
.submenu li a:hover {text-decoration: none; background: #eee1cc;}
.submenu .current a {background: #eee1cc;}
.submenu .current a:after {background: url(/images/default/bootstrap/glyphicons-halflings-sub.png) -267px -74px no-repeat scroll; opacity: 0.6; content: ""; display: inline-block;
  height: 11px; width: 11px; position: absolute; right: 4px; top: 10px;}

/* jsd-article */
.container .jsd-article {padding: 40px 30px 20px; background: url(/images/default/article_bg.gif) 0 0 repeat-x scroll; min-height: 350px; height: auto; position: relative;}
.container .jsd-article .published {position: absolute; top: 6px; right: 10px; font-size: 12px; color: #c1a55c; font-style: italic;}
.container .off-top {background-position: left -1px; padding-top: 20px;}

/* jsd-list-normal */
.jsd-list-normal {margin: 0;}
.jsd-list-normal li {list-style: none; position: relative; margin-bottom: 12px;}
.jsd-list-normal .date {margin-bottom: 2px; color: #dcac0e;}
.jsd-list-normal .title {font-size: 14px; font-weight: normal; color: #444;}

/* sorting */
.procedure {position: relative; background: #f1ce73; padding: 0 5px; height: 28px; margin-bottom: 5px;}
.procedure .name {margin: 0; line-height: 2;  display: block; color: #760000; font-weight: bold; letter-spacing: 0.025em; text-decoration: none;}
.procedure .name:hover {text-decoration: none;}
.procedure .process {position: absolute; top: 5px; right: 5px; text-align: right; color: #760000;}
.sorting {margin-left: 0;}
.sorting li {list-style: none; margin-bottom: 4px;}
.sorting li span, .sorting li a {background: #DDD; color: #555; height: 26px; line-height: 2; padding: 0 16px 0 8px; display: block; font-size: 13px; cursor: default; text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;}
.sorting li a:hover {text-decoration: none; cursor: pointer;}
.sorting .current span, .sorting .current a {background: #760000; color: #f1ce73; position: relative; text-decoration: none;}
.sorting .current span:after, .sorting .current a:after {content: ''; display: block; position: absolute; top: 6px; right: 4px; width: 10px; height: 18px;
  background: url(/images/default/arrow-right.png) 0 0 no-repeat;}

/* status */
.status {margin: 0;}
.status li {list-style: none; font-size: 14px; width: 280px; height: 30px; float: left; padding: 0 10px; line-height: 2; background-color: #DDD; color: #555; cursor: default;}
.status .current {background-color: #F5C010; color: #444;}
.recommendation li {width: 310px;}

/* login */
.login {position: relative; background-color: #fbf0d5; margin-top: 10px;}
.login h3 {color: #760000; height: 25px; line-height: 2; font-size: 13px; margin: 0; padding-left: 10px; font-weight: normal; background-color: #d8b967;}
.login .content {padding: 10px 10px 15px; border: 1px solid #d8b967;}
.login .field-label {line-height: 1.7; display: block; margin-top: 5px;}
.login .field input {height: 21px; padding: 2px 4px; font-size: 12px;}
.login .verification, .login iframe, .field .verification, .field iframe {float: left;}
.login .verification, .field .verification {width: 40px; margin: 1px 5px 0 0;}
.login .renew {margin: 3px 0 0 5px;}
.login .renew i {margin-top: 2px;}
.login .forgot-p {margin-left: 8px; font-size: 12px; text-decoration: none;}
.login-btn {clear: both; padding-top: 15px;}

/* apply-box */
.container .apply-box {color: #f1ce73; font-size: 20px; font-weight: bold; display: block; height: 42px; margin-bottom: 5px; text-align: center; line-height: 2; position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 1px 1px rgba(200, 200, 200, 0.5); text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #913333;
  
  background-image: -moz-linear-gradient(top, #760000, #913333);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#760000), to(#913333));
  background-image: -webkit-linear-gradient(top, #760000, #913333);
  background-image: -o-linear-gradient(top, #760000, #913333);
  background-image: linear-gradient(to bottom, #760000, #913333);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff760000', endColorstr='#ff913333', GradientType=0);
  background-repeat: repeat-y;
  background-size: 100% 100%;
  background-position: 0 -21px;
  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;}
.container .apply-box:hover {text-decoration: none; background-position: 0 -42px;}
.container .apply-box .mark {background: url(/images/default/arrow-right.png) 0 0 no-repeat scroll; display: inline-block; width: 8px; height: 15px; margin-left: 10px;}

/* footer */
.footer {height: 100px; width: 940px; position: relative; margin: -100px auto 0; /* negative value of footer height */ clear: both;
  background: url(/images/default/footer_bg.gif) 0 0 repeat-x scroll;}
.footer p {font-size: 12px; line-height: 1.8; color: #a89050; padding-top: 15px; text-align: center;}
.footer p span, .footer p a {color: #a89050; padding: 0 5px; text-decoration: none;}
.footer a:hover {text-decoration: underline;}