/*
	Name: Jesda Framework
	Date: December 2013
	Version: 1.0
	Author: Emma Lu
*/

/* Imports */
@import url("reset.css");
/*@import url("global_forms.css");*/

/***** Global *****/

html, body {
	height: 100%;
}

/* Body */
body {color: #333; background: url(../images/body_bg.png) 0 0 repeat-x scroll; margin: 0; width: 100%; position: relative;
  font: 80%/1.5 Arial, Helvetica, "Microsoft JhengHei", sans-serif; overflow: hidden;}
 
body.simple {color: #333; background: url(../images/body_bgB.png) 0 0 repeat-x scroll; margin: 0; width: 100%; position: relative;
  font: 80%/1.5 Arial, Helvetica, "Microsoft JhengHei", sans-serif; overflow: hidden;}

body.mail {color: #333; background: url(../images/body_bgC.png) 0 0 repeat-x scroll; margin: 0; width: 100%; position: relative;
  font: 80%/1.5 Arial, Helvetica, "Microsoft JhengHei", sans-serif; overflow: hidden;}

/* Headings */
h2 {font-size: 1.84em;}	/* 24px */
h3 {font-size: 1.53em;}	/* 20px */
h4 {font-size: 1.38em;}	/* 18px */
h5 {font-size: 1.15em;}	/* 15px */
h6 {font-size: 1em;}	/* 13px */

h2, h3, h4, h5, h6 {font-weight: 400; line-height: 1.1; margin-bottom: .8em; cursor: default;}
	
/* Anchors */
a {outline: 0;}
a img {border: 0; text-decoration: none;}
a:link, a:visited {color: #446597; text-decoration: none;}
/*a:hover, a:active {color: #fff; text-shadow: 1px 1px 1px #333;}*/

/* Paragraphs */
p {margin-bottom: 10px; cursor: default; font-size: 13px}
*p:last-child {margin-bottom: 0;}

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

/*::-moz-selection {background: #cc6600; color: #fff;}
::selection {background: #cc6600; color: #fff;}
::-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 */
#main-container {min-width: 960px; width: auto !important; height: 100%; display: block; margin: 0 auto; padding: 0 20px; overflow: hidden;}
#header {width: 100%; margin: 0 auto; height: 190px; }
#header-mail {width: 100%; margin: 0 auto; height: 30px; position: relative;}
#header-mail h5 {line-height: 30px; color: #AAA; margin: 0;}
#header-simple {width: 100%; margin: 0 auto; height: 132px;}
#header-simple .title-bar {margin-top: 30px;}
#center {width: 100%; height: 100%; overflow: auto;}
.left-content {width: 200px; float: left; height: 100%; overflow: hidden; position: relative;}
.left-content .system-back {padding-left: 20px; display: block; font-size: 1.15em; position: absolute; top: 20px; height: 16px; line-height: 16px; color: #444;}
.left-content .system-back:hover {color: #09f; text-shadow: none;}
.left-content .system-back .icon {background: url(../images/global.png) 0 -337px no-repeat scroll; display: inline-block; width: 16px; height: 16px; position: absolute; left: 0;}
.left-content .system-back:hover .icon {background: url(../images/global.png) 0 -363px no-repeat scroll;}
.left-content.hideNavi { width: 50px; }
#right-content {width: auto; height: 100%; position: relative; overflow: hidden;}
#right-content form #data-container {overflow: auto;}
.mail-PA {padding: 0 16px 0 10px; overflow: auto}
.mail-PB {padding: 20px;}
.ml200 {margin-left: 200px; }
.ml20 {margin-left: 20px; }
.footer {width: 100%; clear: both; height: 50px; margin: 0 auto; position: relative;}
.footer-mail {width: 100%; clear: both; height: 20px; margin: 0 auto;}
.hidden {overflow: hidden;}

#header nav {
	position: absolute;
}
/* Header *****************/

    /* system-menu */
	.system {height: 30px; clear: both;}
	.system-menu li {float: left; display: inline; padding-right: 16px;}
	.system-menu li a {border-top: 3px solid transparent; color: #AAA; display: block; float: left; height: 27px; line-height: 27px;}
	.system-menu li a:hover {color: #FFF;}
	.system-menu li.current a {border-top: 3px solid #8fa5c8; color: #8fa5c8;}
	.system-menu li.current a:hover {cursor: default;}
	
	/* management */
	.management {float: right; display: inline;}
	.management .item {margin-top: 3px;}
	.management .item:hover {background-color: #333;}
	.management .item a {color: #AAA; display: block; height: 27px; line-height: 27px; padding: 0 8px;}
	.management .item a:hover {color: #FFF;}
	.management .item:hover .level_B {display: block;}
	.management .level_B {display: none; background: #333; text-align: right;
		-webkit-box-shadow: 0 2px 2px #333;
		-moz-box-shadow: 0 2px 2px #333;
		box-shadow: 0 2px 2px #333;}
	.management .account .level_B {position: absolute; top: 30px; right: 0; width: auto; min-width: 100px; z-index: 999;}
	.management .level_B li {padding: 0 8px; white-space: nowrap;}
	.management .level_B li:hover {background-color: #09f;}
	.management .level_B li:hover a {color: #FFF;}
	
	/* title-bar */
	.title-bar {height: 70px; clear: both;}
	.title-bar h1 {color: #333; float: left; font-size: 1.84em; font-weight: 400; height: 70px; line-height: 70px; cursor: default;}
	
	/* search */
	.title-bar .search {display: inline; float: right; margin-top: 21px; width: 260px; height: 27px; position: relative;}
	.title-bar .search .text {width: 227px; height: 21px; padding-right: 27px;}
	.title-bar .search .submit {background: url(../images/icons_all.png) 6px 7px no-repeat scroll; height: 27px; width: 27px; position: absolute;
    	right: 0; top: 2px; border: 0; font-size: 0; cursor: pointer;}
	.title-bar .search .submit:hover, .function-bar .search .submit:hover {background-position: -26px 7px;}
	.function-bar .search {display: inline; position: relative; width: 200px; height: 26px;}
	.function-bar .search .text {width: 167px; height: 21px; padding: 2px 27px 2px 4px; border-color: #BBB;}
	.function-bar .search .submit  {background: url(../images/icons_all.png) 6px 7px no-repeat scroll; height: 27px; width: 27px; position: absolute;
    	right: 0; top: 0; border: 0; font-size: 0; cursor: pointer;}

	/* nav */
	nav .dropdown {height: 36px; padding-top: 2px;} 
	nav .dropdown .item {position: relative; float: left; zoom: 1;}
	nav .dropdown .item:hover {background-color: #333;}
	nav .dropdown .item:hover a {color: #FFF;}
	nav .dropdown .item:hover .icon:after {content: ""; background: url(../images/nav_arrow_down.gif) 0 -20px no-repeat scroll; width: 5px; height: 3px;
		position: absolute; right: 10px; top: 15px;}
	nav .dropdown .item a {display: block; padding: 0 10px; height: 36px; line-height: 34px; color: #333; position: relative;}
	nav .dropdown .item a:hover {color: #FFF;}
	nav .dropdown a:hover.icon:after {content: ""; background: url(../images/nav_arrow_down.gif) 0 -20px no-repeat scroll; width: 5px; height: 3px;
		position: absolute; right: 10px; top: 15px;}
	nav .dropdown .item .icon {padding-right: 20px;}
	nav .dropdown .icon:after {content: ""; background: url(../images/nav_arrow_down.gif) 0 0 no-repeat scroll; width: 5px; height: 3px;
		position: absolute; right: 10px; top: 15px;}
	nav .dropdown .current {background-color: #446597;}
	nav .dropdown .current a {color: #FFF;}
	nav .dropdown .current .icon:after {content: ""; background: url(../images/nav_arrow_down.gif) 0 -20px no-repeat scroll; width: 5px; height: 3px;
		position: absolute; right: 10px; top: 15px;}
	nav .dropdown .sub-menu {position: absolute; top: 100%; left: 0; width: auto; min-width: 130px; padding: 0; background-color: #333; visibility: hidden; z-index: 999;
		-webkit-box-shadow: 0 2px 2px #333;
		-moz-box-shadow: 0 2px 2px #333;
		box-shadow: 0 2px 2px #333;}
	nav .dropdown .sub-menu li {float: none;}
	nav .dropdown .sub-menu li a {display: block; float: none; padding: 2px 10px; white-space: nowrap; height: 27px; line-height: 27px;}
	nav .dropdown .sub-menu li:hover {background: #09f;}
	nav .dropdown li:hover > ul {visibility: visible;}

    /* breadcrumbs */
	.breadcrumbs {position: absolute; top: 150px; left: 20px; right: 20px; height: 34px; border-bottom: 1px solid #FFF; }
	.breadcrumbs ul {clear: both; height: 33px; border-bottom: 1px solid #446597;}
	.breadcrumbs li {float: left;}
	.breadcrumbs li a {line-height: 33px; height: 33px; float: left; padding: 0 8px; color: #555; font-size: 1.1em; display: inline-block; position: relative;}
	.breadcrumbs li a:hover {color: #FFF; background: #333;
	    -moz-border-radius: 5px 5px 0 0;
   		-webkit-border-radius: 5px 5px 0 0;
   		border-radius: 5px 5px 0 0;}
	.breadcrumbs .home {background: url(../images/global.png) left 0 no-repeat scroll; padding-left: 17px;}
	.breadcrumbs a:hover .home {background-position: left -27px;}
	.breadcrumbs .step {background: url(../images/global.png) 6px -74px no-repeat scroll; padding: 0 6px 0 7px;}
	.breadcrumbs a:hover .step {background-position: 6px -100px;}
	.breadcrumbs .closetab {background: url(../images/global.png) 6px -130px no-repeat scroll; display: inline-block; border: none;
		position: relative; top: 0; top: -1px \9; width: 19px; height: 13px;}
	.breadcrumbs .closetab:hover {background-position: 6px -156px; cursor: pointer;}
	.breadcrumbs .current, .breadcrumbs .current:hover {color: #FFF; cursor: default; background: #446597;
	    -moz-border-radius: 5px 5px 0 0;
   		-webkit-border-radius: 5px 5px 0 0;
   		border-radius: 5px 5px 0 0;}
	.breadcrumbs .current .home, .breadcrumbs .current:hover .home {background-position: left -50px;}
	
	/* category */
	.category {padding-top: 50px;}
	.category a {height: 28px; line-height: 28px; padding: 0 10px 0 20px; display: block; color: #444; font-size: 1.15em; position: relative;}
	.category a:hover {color: #0099ff; text-shadow: 0px 0px 1px #FFF;}
	.category a:hover .step {background: url(../images/global.png) 0 -312px no-repeat scroll; display: inline-block; width: 16px; height: 16px;
		position: absolute; top: 6px; left: 0;}
	.category .current, .category .current:hover {color: #446597; position: relative;}
	.category .current .step, .category .current:hover .step {background: url(../images/global.png) 0 -182px no-repeat scroll; display: inline-block; width: 16px; height: 16px;
		position: absolute; top: 6px; left: 0;}
		
	/* data-container */
	#data-container {clear: both; width: auto; background-color: #FFF; margin-top: 6px; border: 1px solid #CCC; padding:8px;}
	#data-container.bg-gray {background-color: #DDD;}
	#data-container.bg-mail {background-color: #f5f5f5;}
		
	/* data-content */
	#data-content {height: auto; width: auto; color: #000;}
	#data-content .edit, #data-content .move-up, #data-content .move-down, #data-content .view-result {font-size: 0; background: url(../images/icons_all.png) 0 0 no-repeat scroll;
		display: inline-block; width: 14px; height: 14px; vertical-align: middle;}
	#data-content .edit {background-position: -64px -128px;}
	#data-content .edit:hover {background-position: -96px -128px;}
	#data-content .move-up {background-position: -128px -128px; margin-left: 2px;}
	#data-content .move-up:hover {background-position: -160px -128px;}
	#data-content .move-down {background-position: -192px -128px;}
	#data-content .move-down:hover {background-position: -224px -128px;}
	#data-content .view-result {background-position: -128px -160px;}
	#data-content .view-result:hover {background-position: -160px -160px;}
	.sort {width: 11px; height: 11px; display: inline-block; position: absolute; top: 8px; right: 5px; cursor: pointer;
		background: url(../images/global.png) 2px -208px no-repeat scroll;}
	.sort:hover {background-position: 2px -234px;}
	#data-content form {padding: 10px;}
	#data-content .space {padding: 10px 0 20px 5px; position: relative;}
	#data-content .space:after {clear: both; content: ""; display: block; height: 0; visibility: hidden;}
		
	/* album */ 
	#data-content .album-new, #data-content .album {width: 148px; height: 210px; float: left; margin-right: 4px; overflow: hidden;}
	#data-content .album-new .content {width: 144px; height: 144px; line-height: 144px; border: 2px dashed #BBB; display: block; overflow: hidden; text-align: center;
		font-size: 1.38em; background-color: #e2f9ff;}
	#data-content .album-new .content:hover {background-color: #0099FF; border: 2px solid #0099FF;}
	#data-content .album .cover {width: 146px; height: 146px; border: 1px solid #CCC; overflow: hidden; position: relative;}
	#data-content .album .cover .action {display: none; position: absolute; right: 4px; top: 4px; z-index: 1; width: 148px;}
	#data-content .album .cover .action a {width: 20px; height: 20px; font-size: 0; border-width: 1px; border-style: solid; border-color: #FFF #CCC #999 #FFF; 
		margin: 0; padding: 0; overflow: hidden; margin-left: 3px; float: right;}
	#data-content .album .cover .edit {background: #EEE url(../images/icons_all.png) -252px -124px no-repeat scroll;}
	#data-content .album .cover .edit:hover {background: #FFF url(../images/icons_all.png) -284px -124px no-repeat scroll;}
	#data-content .album .cover .delete {background: #EEE url(../images/icons_all.png) -284px 4px no-repeat scroll;}
	#data-content .album .cover .delete:hover {background: #FFF url(../images/icons_all.png) -316px 4px no-repeat scroll;}
	#data-content .album .cover .download {background: #EEE url(../images/icons_all.png) -60px -156px no-repeat scroll;}
	#data-content .album .cover .download:hover {background: #FFF url(../images/icons_all.png) -92px -156px no-repeat scroll;}
	#data-content .album .cover .cover-setting {background: #EEE url(../images/icons_all.png) -316px -92px no-repeat scroll;}
	#data-content .album .cover .cover-setting:hover {background: #FFF url(../images/icons_all.png) -316px -124px no-repeat scroll;}
	#data-content .album .cover .action .cover-cancel {background: transparent url(../images/icons_all.png) 0 -160px no-repeat scroll;
		position: absolute; top: 1px; left: 6px; border: 0;}
	#data-content .album .cover .action .cover-cancel:hover {background: transparent url(../images/icons_all.png) -32px -160px no-repeat scroll;}
	#data-content .album .cover:hover .action {display: inline-block;}
	#data-content .album .cover a {display: inline-block; width: 146px; height: 146px; max-width: 146px; max-height: 146px; overflow: hidden; background-color: #CCC; text-align: center;}
	#data-content .album .cover img {display: inline-block; height: 146px;}
	#data-content .album .status .title, .album .status p {width: 146px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
	#data-content .album .status .title {font-size: 1.15em; display: inline-block; color: #446597; margin: 10px 0 0; line-height: 1;}
	#data-content .album .status .title:hover {color: #09f; text-shadow: none; text-decoration: underline; cursor: pointer;}
	#data-content .album .status p {color: #666; line-height: 1; cursor: default; margin: 0;}
							
	/* filter */
	#filter {margin-top: 4px; padding: 2px 6px; border: 1px solid #d5d5d5; border-bottom-color: #CCC;
		background: #f5f5f5;
		-moz-border-radius: 3px;
 		-webkit-border-radius: 3px;
 		border-radius: 3px;
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f5f5f5), to(#CCC));
		background: -webkit-linear-gradient(#f5f5f5, #CCC);
		background: -moz-linear-gradient(#f5f5f5, #CCC);
		background: -ms-linear-gradient(#f5f5f5, #CCC);
		background: -o-linear-gradient(#f5f5f5, #CCC);
		background: linear-gradient(#f5f5f5, #CCC);
		-pie-background: linear-gradient(#f5f5f5, #CCC);
		behavior: url(/pie/PIE.htc);}
	#filter:after {content: ""; display: table; clear: both;}
	#filter span {line-height: 22px; float: left; margin-right: 4px; padding-top: 2px;}
	#filter .inline-select {margin: 2px 2px 0 0; height: 24px; line-height: 24px; height: 22px\9; line-height: 22px\9; padding: 0 0 0 4px; float: left; background-color: #FFb; background-color: #FFF\9;
		-moz-border-radius: 0;
 		-webkit-border-radius: 0;
 		border-radius: 0;}
	#filter .inline-select option {background-color: #FFF;}
	#filter .button-group {float: left; padding: 1px 0 0 4px; padding-top: 2px \9;}
	@media screen and (-webkit-min-device-pixel-ratio:0){
		#filter .inline-select { line-height: 17px; }} /* Safari */
	#filter .button-group button {padding: 0 3px; padding: 0 5px\9;}
	@media screen and (-webkit-min-device-pixel-ratio:0){
		#filter .button-group { padding: 2px 0 0 0; margin-left: 4px; }} /* Safari */
	@media screen and (-webkit-min-device-pixel-ratio:0){
		#filter .button-group button { margin: 0; padding: 0 5px; }} /* Safari */
	
	/* filter-condition */
	.filter-condition {clear: both;}
	.filter-condition:after {content: ""; display: table; clear: both;}
	.filter-condition > ul >li {float: left; margin: 4px 4px 0 0;}
	.filter-condition .delete {cursor: default; width: 14px; height: 14px; font: 0/0 serif; overflow: hidden; display: inline-block; float: left; margin: 3px 2px 0 4px;
		background: url(../images/icons_all.png) -288px 0 no-repeat scroll; margin-top: 4px\0\9;}
	.filter-condition .delete:hover {background-position: -320px 0; cursor: pointer;}
	
	/* info_bar */
	.info-bar {border: 1px solid #CCC; border-top: none; height: 35px; padding-top: 8px;
		-moz-border-radius: 0 0 6px 6px;
  		-webkit-border-radius: 0 0 6px 6px;
   		border-radius: 0 0 6px 6px;
		background: #EEE;
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEE), to(#CCC));
		background: -webkit-linear-gradient(#EEE, #CCC);
		background: -moz-linear-gradient(#EEE, #CCC);
		background: -ms-linear-gradient(#EEE, #CCC);
		background: -o-linear-gradient(#EEE, #CCC);
		background: linear-gradient(#EEE, #CCC);
		-pie-background: linear-gradient(#EEE, #CCC);
		behavior: url(/pie/PIE.htc);}
			
	/* paginator */
	.paginator {position: relative; height: 30px;}
	.paginator .right {position: absolute; right: 0; clear: both;}
	.paginator .left {position: absolute; left: 10px; clear: both;}
	.paginator a, .paginator span {display: block; float: left; margin: 2px;}
	.paginator .paginator-F-btn {width: 10px; height: 10px; background: url(../images/paginator.png) 0 -75px no-repeat scroll; margin: 8px 4px 0 0;}
	.paginator .paginator-F-btn:hover {background-position: 0 -85px;}
	.paginator .paginator-B-btn {width: 10px; height: 10px; background: url(../images/paginator.png) 0 -95px no-repeat scroll; margin-top: 8px;}
	.paginator .paginator-B-btn:hover {background-position: 0 -105px;}
	.paginator .paginator-N-btn {width: 22px; height: 22px; background: url(../images/paginator.png) 0 0 no-repeat scroll;}
	.paginator .paginator-N-btn:hover {background-position: 0 -25px;}
	.paginator .paginator-N-disabled {width: 22px; height: 22px; background: url(../images/paginator.png) 0 -50px no-repeat scroll;}
	.paginator .paginator-N-disabled:hover {background-position: 0 -50px; cursor: default;}
	.paginator .paginator-link {padding: 0 5px; height: 20px; background-color: #EEE; border: 1px solid #BBB; line-height: 22px; font-size: 12px; text-align: center;} 
	.paginator .paginator-link:hover {text-shadow: none; background-color: #FFF; color: #446597; border: 1px solid #446597;}
	.paginator .current {background-color: #446597; color: #FFF; font-weight: bold; cursor: default; border: 1px solid #446597;}
	.paginator .current:hover {text-shadow: none; background-color: #446597; color: #FFF;}
	.paginator .paginator-jump {float: left; width: 30px; padding: 2px 2px 2px 4px; margin-left: 8px;}
	.paginator .pr10 {padding-right: 10px;}
	.paginator span {line-height: 22px; padding: 0 2px; text-align: center;}
				
	/* trash-can */
	.trash-can {width: 19px; height: 24px; display: block; position: absolute; top: 7px; right: 8px;
		background: url(../images/global.png) 4px -255px no-repeat scroll;}
	.trash-can:hover {background-position: 4px -281px;}
	
	/* login-info */
	.login-info {background-color: #FFF; border: 1px solid #CCC; overflow: hidden;
		width: 460px; min-height: 180px; height: auto; margin: 0 auto; padding-bottom: 20px; margin-bottom: 20px;
		-webkit-box-shadow: 1px 1px 2px #CCC;
		-moz-box-shadow: 1px 1px 2px #CCC;
		box-shadow: 1px 1px 2px #CCC;}
	.login-info h4 {margin: 30px 20px 20px 30px;}
	.login-info .hd {margin: 0 0 20px 0; color: #FFF; padding: 10px 20px; text-shadow: 0 1px 0 rgba(000, 000, 000, 0.5); font-weight: bold;
		background: #000; 
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#777), to(#000));
		background: -webkit-linear-gradient(#777, #000);
		background: -moz-linear-gradient(#777, #000);
		background: -ms-linear-gradient(#777, #000);
		background: -o-linear-gradient(#777, #000);
		background: linear-gradient(#777, #000);
		-pie-background: linear-gradient(#777, #000);
		behavior: url(/pie/PIE.htc);}
	.login-info .field {position: relative; margin: 12px 30px; padding-left: 110px; font-size: 1.1em; height: 30px; line-height: 30px;}
	.login-info .field input[type='text'] {height: 21px; padding: 2px 4px;}
	.login-info .field input[type='password'] {height: 21px; padding: 2px 4px; font-size: 14px; font-family: Arial, sans-serif;}
	.login-info .label {position: absolute; top: 0; left: 0; width: 100px; text-align: right;}
	.login-info iframe {vertical-align: middle;}
	.login-info .btn-small {vertical-align: middle;}
	.login-info .login-area {display: block; padding: 15px 0 0 110px; margin: 20px 30px 10px 30px; border-top: 1px dotted #AAA;}
	
	/* dialog */
	.dialog .jsd-framework .field-label {position: absolute; left: 0; width: 130px; text-align: right;}
	.dialog .jsd-framework .field-content {position: relative; padding-left: 135px; _padding-left: 165px; *zoom: 1;}
	.dialog .table-basic table {position: relative; margin-top: 10px; width: 100%; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC;}
	.dialog .table-basic td {padding: 2px 4px; line-height: 20px; vertical-align: middle; border-top: 1px dashed #CCC;}
	.dialog .table-basic .first td {border-top: 0;}
	.dialog .table-basic td span {padding-right: 4px;}
	.dialog .table-basic .text-c {text-align: center;}
	.dialog .table-basic .text-t, .dialog .table-basic .text-t td {vertical-align: top;}
	.dialog .table-basic .checkbox {float: left;}
	.dialog .table-basic .no-data {text-align: center; border: none; padding-top: 20px;}
	.dialog .table-basic .no-data h3 {margin-bottom: 10px;}
	.dialog .table-basic .no-data p {color: #446597;}
	.dialog .table-basic .delete {background: url(../images/icons_all.png) -284px 4px no-repeat scroll; cursor: default; width: 20px; height: 20px;
		font: 0/0 serif; overflow: hidden; display: block; cursor: pointer;}
	.dialog .table-basic .delete:hover {background-position: -316px 4px;}
	
	/* datepicker */
	.ui-datepicker {border-top: 1px solid #CCC;}

	/* mail-bar */
	#right-content .mail-bar {padding-top: 9px; height: 33px;}
	#right-content .mail-bar li {float: left; margin-right: 4px;}
	#right-content .mail-bar .mt2 {margin-top: 2px;}
	#right-content .mail-bar .view-result {margin-top: 1px;}
	
	/* jsd-mail */
	#data-content .width {width: auto;}
	.jsd-mail {width: 100%;}
	.jsd-mail td {padding: 2px 6px; text-align: left; font-size: 14px; vertical-align: top;}
	.jsd-mail td.title {width: 80px; text-align: right; padding-right: 10px; color: #777;}
	.jsd-mail td.title label {font-weight: bold; padding-top: 1px; display: block;}
	.jsd-mail td.title div {font-size: 12px;}
	.jsd-mail td.title-single {font-weight: bold; padding-top: 1px; color: #777;}
	.jsd-mail td.title-single span {font-size: 12px; font-weight: normal;}
	.jsd-mail tr.spaceA td {padding-top: 10px;}
	.jsd-mail tr.spaceB td {padding-top: 15px;}
	.jsd-mail td.spaceC {padding-left: 1px; padding-right: 1px;}
	.jsd-mail .receiver {background: #FFF; border: 1px solid #CCC; max-height: 106px; overflow-x: hidden; overflow-y: auto; padding: 3px; width: 100%;}
	.jsd-mail .receiver:after {content: ""; display: table; clear: both;}
	.jsd-mail .receiver li {padding: 0 10px 0 5px; cursor: default;}
	.jsd-mail .receiver li:hover {background: #d9f2ff;}
	.jsd-mail .receiver a:hover {text-shadow: none; color: #0099ff;}
	.jsd-mail .receiver .number {float: left; width: 26px; text-align: center; padding-right: 4px;}
	.jsd-mail .receiver .delete {cursor: default; width: 14px; height: 14px; font: 0/0 serif; overflow: hidden; display: inline-block; float: left; margin: 5px 4px 0 0;
		background: url(../images/icons_all.png) -288px 0 no-repeat scroll;}
	.jsd-mail .receiver .delete:hover {background-position: -320px 0; cursor: pointer;}
	.jsd-mail .plus {color: #09F;}
	.jsd-mail .plus:hover {text-shadow: none; text-decoration: underline;}
	.jsd-mail .mail-field {resize: none; padding: 3px 0 3px 3px; border-radius: 0; line-height: 20px; width: 100%; margin: 0;}
	
	.jsd-mail .mail-heading {border-bottom: 1px solid #CCC; padding-bottom: 6px;}
	.jsd-mail .mail-info {font-size: 14px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #CCC;}
	.jsd-mail .mail-info span {text-align: right; width: 60px; display: inline-block; margin-right: 5px; color: #777;}
	.jsd-mail .mail-info div {display: inline-block;} 
	.jsd-mail .preview {font-size: 14px;}
	.jsd-mail .preview a:hover {color: #0099ff; text-shadow: none; text-decoration: underline;}
	
	.jsd-mail .multi-field {width: 240px;}
	.jsd-mail .multi-btn {width: 60px; padding-top: 50px;}
	.jsd-mail .multi-field .type {width: 240px; height: 300px; cursor: default;}
	
	/* error */
	.error {width: 500px; margin: 0 auto; position: relative;}
	.error .warning-icon {width: 110px; position: absolute; top: 0; left: 0;}
	.error .warning-content {padding: 5px 0 10px 130px; display: inline-block;}
	.error .warning-content h3 {color: #446597; padding-bottom: 3px; border-bottom: 1px solid #446597;}
	.error .warning-content a:hover {color: #446597; text-shadow: none; text-decoration: underline;}
		
	padding-left:3px;
}

#colCheckbox  input[type="checkbox"] {
	margin: -1px 0 0;
	width: 15px;
}

[class^="jd-icon-"],
[class*=" jd-icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-repeat: no-repeat;
}

.jd-icon-uncheck {
  background-image: url("../images/icon/uncheck.png");  
}

.jd-icon-sort-asc {
  background-image: url("../images/icon/sort-asc.png");  
}

.jd-icon-sort-desc {
  background-image: url("../images/icon/sort-desc.png");  
}

.jd-icon-sort {
  background-image: url("../images/icon/sort.png");  
}

.jd-icon-trash-leave {
  background-image: url("../images/icon/trash-leave.png");  
}

.jd-icon-excel {
  background-image: url("../images/icon/icon-excel.png");
	margin-top:1px;  
}

.jd-icon-mphone {
	background-image: url("../images/icon/glyphicons_halflings_144_phone.png");
	margin-left:3px;
	margin-top:2px;
}

.jd-mini-column {
	width:1%;		
}

.jd-movable {	
	background-image:url(../images/grippy.png);
	background-position:10% 50%;
	background-repeat:no-repeat no-repeat;
	cursor:move;
}
.jd-moving {
	border: #ddd solid 1px;
	background:none;
}

.jd-right {
	float:right;
}

.jd-margin0 {
	margin:0;
}

.jd-item-container {	
	margin-top:5px; 
	margin-bottom:0px;
	padding:5px;
}

.jd-item-container div {	
	line-height:27px;
	display: inline-block;
	border: #ddd solid 1px;
	padding-left:5px;
	padding-right:5px;
	margin-right: 5px;
	margin-bottom: 5px;
	background-color: #fff;
}
.jd-item-container div:hover {
	border: #aaa solid 1px;
}

.jd-item-container i {
	margin-right:5px;
	cursor:pointer; 	
}
.js-category {
	margin:5px;
	margin-top:36px;
	font-size:1.1em;
	overflow:auto;
	padding:5px;
}

.js-category li a {	
	color: #446597;
}

.js-category li .active a {
	background-color:#446597;
}

.js-category li a:hover {
	color: #FFF; 
	background: #333;
}

.js-category .nav-header {
	font-size:14px;
	color:#000;
	cursor: pointer;
}

.dorm-building-range {
	width: 400px;
}

.dorm-floor-range {	
	overflor:hidden;
	word-wrap:break-word;	
}

.range-number {
	font-size:18px;
	font-weight:bold;
}

.jd-text {
	line-height:30px;
	padding-top:5px;
	font-size:14px;
}

.msg {
	list-style-type: none;
	margin-left:15px;
}

.inline-editor {
	padding:3px;
	width:auto;
}

.inline-ediotr label {
	padding-top:0px;
}

/**
 * 自訂CSS
 */
.fieldValue {
	padding-top:6px;
	display:inline-block;
}

/*  圖片刪除按鈕  start */
#img_photo {
	left: 0px;
	position: relative;
	z-index: 1001;
}

#img_photo:hover button {
    display: inline-block;
}

#img_photo button {
    display: none;
    left: 5px;
    opacity: 1;
    position: absolute;
    top: 0;
}
/* 圖片刪除按鈕  end */

.btn-toolbar img {
	vertial-align: middle;
}

.toolbar-size-small img {
	max-width:14px; 
	max-height:14px;
}

.toolbar-size-medium img {
	max-width: 24px; 
	max-height:24px;
}

#main-container select,
#main-container input,
#main-container .add-on,
#main-container .btn,
#main-container .control-label,
#main-container label {
	font-size: 13px;
}

/*  Mail 上傳附檔列表 */

.file-list li {
	float: left;
	font-size: 13px;
	font-family: arial,sans-serif;
	background: #fff;
	border: 1px solid #dcdcdc;
	font-weight: bold;
	margin: 5px 7px 0 0;
	overflow-y: hidden;
	padding: 4px 4px 4px 8px;
	white-space: nowrap;
	max-width: 448px;
}

.file-list li .fileName {
	max-width: 300px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #15c;
}

.file-list li .fileDelete {
	display: inline-block;
	margin-left: 10px;
}

.file-list li .fileName:hover {
	color: #09F;
}

.progress-text {
	height:100px; 
	width:97%; 
	border:1px solid #ccc; 
	margin-bottom:5px; 
	line-height:150%; 
	padding:5px;
	font-size:15px;
	overflow-y: scroll;
}

.jd-icon-fullscreen {
	background-image: url("/ckeditor/plugins/icons.png?t=D2LI");
    background-position: 0 -1824px;
}

.fs {
	font-size:18px;
	line-height:150%; 
	color: #555;
}

.dataTable {
	max-width: none !important;
	border-collapse: separate;
	border-spacing: 1px;
	background: #ccc;
}

.dataTable td,
.dataTable th{
	padding: 5px;
	white-space:nowrap;
}

.dataTable tbody td {
	background: #fff;
}

.dataTable .serial-number {
	background: #eee;
	text-align: center;
	white-space: nowrap;
	min-width: 30px;
	width: 30px;
	color: #446597;
	font-weight: bold;
}

.dataTable .col-checkbox {
	text-align: center;
	min-width: 35px;
	width:35px;
}

.dataTable tr.even td {
	background: #eee;
}

.dataTable thead th,
.dataTable thead th.serial-number {
	color: #fff;
	background: #666;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#959595), to(#555));
	background: -webkit-linear-gradient(#959595, #555);
	background: -moz-linear-gradient(#959595, #555);
	background: -ms-linear-gradient(#959595, #555);
	background: -o-linear-gradient(#959595, #555);
	background: linear-gradient(#959595, #555);
	-pie-background: linear-gradient(#959595, #555);
	behavior: url(/pie/PIE.htc);
} 

.js-category2 {
	margin:3px;
	margin-top:0px;
	font-size:16px;	
	overflow:auto;
	padding:5px;
	width:250px;
}

.js-category2 li .active{
	background-color:#446597;
	color:white;
}

.js-student {
	margin:3px;
	margin-top:0px;
	font-size:16px;
	overflow:auto;
	padding:5px;
	width:250px;
}

.js-pic {
	margin:3px;
	margin-top:0px;
	width:250px;
	overflow:auto;
}

.large-font-block {
	font-size:16px;
}


.js-counselor {
	margin:5px;
	font-size:16px;	
	overflow:auto;
	padding:5px;
	width:auto;
}

.js-counselor li .active{
	background-color:#446597;
	color:white;
}