@charset "utf-8";
@import url(reset.css);

/*
======================
Fonts
======================
*/
html, body { font-family:"微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Arial,  "新細明體", "Microsoft YaHei", "Lucida Grande", "Lucida Sans Unicode",  sans-serif; font-size:14px; -webkit-text-size-adjust:none; }


/*
======================
Global settings
======================
*/
h1 				{ font-size:2.4em; margin-bottom:2.4em;}
h2 				{ font-size:1.8em; margin-bottom:1.8em;}
h3 				{ font-size:1.5em; margin-bottom:1.5em;}
h4 				{ font-size:1.1em;}
h5 				{ font-size:1em;}
h6 				{ font-size:1em;}

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

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

table			{ width:100%; border-left:1px solid #ccc; border-top:1px solid #ccc; }
table th,
table td		{ padding:8px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
caption			{ text-align:left; margin-bottom:10px; font-size:1.2em; }

.button			{ padding:6px 10px; border-radius:5px; border:none; color:#fff; background:#333; font-family:inherit; }
.button:hover	{ background:#666; color:#fff; }

.error			{ color:#c00; margin-left:10px; }
.no-display		{ opacity: 0.5; }
.confirm-dialog	{ display:none; }

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

.fc-toolbar		{ overflow:hidden; }
.fc-unthemed .fc-today	{ background:#f9f9f9; }
.fc-event		{ background-color:#3CC; border:1px solid #3CC; }
.fc-state-default	{ background:none; box-shadow:none; }
.fc-day:hover			{ background:#f5f5f5; }
.fc-day-header		{ padding:5px 0 !important; }

.fr-checkbox-line label	{ display:inline;}
.fr-toolbar				{ border:none; }
.fr-box input[type="text"],
.fr-box input[type="password"],
.fr-box textarea,
.fr-box select	{ border-radius:0; }
.fr-view		{ line-height:1.5em;}
.fr-view ul		{ list-style:none; padding-left:.8em; }
.fr-view ul li:before { content: "- "; margin-left: -.8em; }
.fr-view ol		{ list-style:decimal;padding-left:15px;}
.fr-view img	{ cursor:default !important; }
.fr-view a > img{ cursor:pointer !important; }

/*
======================
Structure
======================
*/
html, body 		{ background:#eee;}
#container 		{ max-width:1200px; margin:0 auto; background:#fff; position:relative;}

#header 		{ height:60px; padding:20px 40px; overflow:hidden; zoom:1; }
#header h1		{ float:left; margin-right:20px; }
#header .button { float:left; padding:8px 10px; }

#toolbar				{ position:absolute; right:20px; top:15px;}
#toolbar li 			{ float:left; margin-left:20px;}
#toolbar li a.active 	{ color:#3CC;}

#nav 			{ border-bottom:1px solid #ccc;}
#nav ul			{ padding-left:25px; overflow:hidden; zoom:1; }
#nav li 		{ display:inline; float:left; margin:0 20px;}
#nav li a 		{ padding:15px 0; display:block; font-size:1.11em; }
#nav li a.active{ color:#3CC;}
#nav li.nav-seperator	{ padding:15px 0; color:#999; }
#subnav			{ border-top:1px solid #ccc; }

#aside 					{ width:22%; float:right; padding:40px 30px; box-sizing:border-box; }
#aside .aside-set		{ margin-bottom:50px; }
#aside .aside-set > ol	{ margin-bottom:40px; }
#aside .aside-set li	{ margin-bottom:12px; }
#aside .aside-set li .count		{ margin-left:5px; }
#aside .aside-set li.active		{ color:#3CC; }
#aside .aside-set li.active a	{ color:inherit; }
#aside .aside-set li ol	{ margin-left:1em; margin-top:10px; }

#content 					{ float:left; width:78%; min-height:900px; padding:40px 40px; border-right:1px solid #ccc; position:relative; box-sizing:border-box; }
#banner						{ overflow:hidden; zoom:1; position:relative; height:65px; }
#banner #lang-menu 			{ position:absolute; left:0; top:0; overflow:hidden; zoom:1; }
#banner #lang-menu a 		{ float:left; padding:9px 12px; border:1px solid #ccc; color:#ccc; margin-right:5px; }
#banner #lang-menu a.active { border:1px solid #999; color:#999; }
#banner #buttons			{ text-align:right; overflow:hidden; zoom:1; }
#banner #buttons .button	{ float:right; margin-left:5px; padding:8px 10px; }

#filter						{ margin-bottom:30px; }
#filter input[type="text"]	{ padding:8px 5px; border:1px solid #ccc; border-radius:5px; }

#footer 		{ height:30px; padding:15px 40px; clear:both; font-size:.9em; border-top:1px solid #ccc;}

/*
======================
Elements
======================
*/

form						{ }
form .row					{ margin-bottom:25px; }
form fieldset				{ border:1px solid #ccc; padding:25px 20px 10px 20px; border-radius:5px; margin-bottom:25px; }
form label					{ display:block; margin-bottom:10px; }
form input[type="text"],
form input[type="password"],
form textarea,
form select					{ padding:8px 8px; border:1px solid #ccc; border-radius:5px; }
form input[type="text"],
form input[type="password"]	{ width:300px; }
form textarea				{ width:95%; height:240px; }
form select					{ padding:5px; }
form .buttons				{ text-align:right; }
form .button				{ margin-left:5px; }
form .checkbox-option,
form .radio-option			{ margin-right:20px; }
form .group-description		{ line-height:1.5em; margin-bottom:2em; color:#666; }
form .group-description a	{ text-decoration:underline; }

.view						{ }
.view .row					{ margin-bottom:25px; }
.view .row > span,
.view .row > div			{ padding:0 5px; line-height:1.5em; }
.view fieldset				{ border:1px solid #ccc; padding:25px 20px 10px 20px; border-radius:5px; margin-bottom:25px; }
.view label					{ display:block; margin-bottom:10px; padding:5px; background:#f3f3f3; }
.view .msg					{ margin-bottom:30px; color:#c00; }

.buttons					{ margin:30px 0 40px 0; text-align:right; }
.buttons .button			{ margin-left:5px; }

.upload-set					{ border-top:1px solid #ccc; padding-top:30px; }
.uploader					{ border:2px dashed #ccc; padding:25px 0; text-align:center; font-size:1.15em; }

.image-list					{ margin-top:20px; overflow:hidden; zoom:1; }
.image-list li				{ float:left; margin-right:8px; margin-bottom:8px; position:relative; }
.image-list li img			{ height:150px; display:block; }
.image-list .album-delete-button			{ position:absolute; right:0; top:0; padding:3px 5px; background:#fff; display:none; font-size:1.5em; }
.image-list .album-cover-button				{ position:absolute; left:0; bottom:0; padding:3px 5px; background:#fff; display:none; }
.image-list .album-crop-button				{ position:absolute; right:0; bottom:0; padding:3px 5px; background:#fff; display:none; }
.image-list li:hover .album-delete-button,
.image-list li:hover .album-cover-button,
.image-list li:hover .album-crop-button,
.image-list li.cover .album-cover-button	{ display:block; }
.image-list.limit-one li .album-cover-button{ display:none; }
.image-list li.uploading 					{ width:150px; height:150px; background:#f7f7f7; }
.image-list li.uploading .progress		 	{ position:absolute; left:0; bottom:0; height:5px; background:#06F; }
.image-list li .thumb.pending 				{ width:150px; height:150px; background:url(image/loading.gif) no-repeat 50% 50% #f7f7f7; }
.image-list li .thumb.video					{ position:relative; }
.image-list li .thumb.video a::after		{ content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 40px; border-color: transparent transparent transparent #fff; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -14px;}

.edit-image-list				{ overflow:hidden; zoom:1; }
.edit-image-list li				{ float:left; width:24%; margin-right:1%; margin-bottom:2%; }
.edit-image-list li .thumb		{ height:180px; margin-bottom:10px; overflow:hidden; }
.edit-image-list li	img			{ height:100%; }
.edit-image-list li label		{ margin-bottom:6px; }
.edit-image-list li .row		{ margin-bottom:10px; }
.edit-image-list li	input,	
.edit-image-list li	textarea	{ padding:6px 1%; width:97%; border-radius:0; }
.edit-image-list li	textarea	{ height:60px; }

.media-list li	img			{ height:250px; }
.media-list li	video		{ height:250px; }
.edit-media-list li	video	{ height:180px; margin-bottom:8px; }

.file-list					{ margin-top:20px; width:100%; display:table; }
.file-list li				{ display:table-row; background:#f7f7f7; position:relative;  overflow:hidden; zoom:1; }
.file-list li div			{ display:table-cell; padding:8px 10px; vertical-align:middle; border-top:1px solid #ddd; }
.file-list li div.icon		{ width:40px; }
.file-list li div.btn		{ width:40px; text-align:center; }
.file-list .album-delete-button			{ font-size:1.5em; line-height:0; }
.file-list li.uploading			   { width:100%; height:67px; }
.file-list li.uploading .progress  { position:absolute; left:0; bottom:0; height:5px; background:#06F; }

.edit-file-list					{ margin-top:20px; display:table; width:100%; }
.edit-file-list li				{ background:#f7f7f7; display:table-row; }
.edit-file-list li div			{ display:table-cell; padding:8px 0; vertical-align:middle; border-top:1px solid #ddd;  }
.edit-file-list li div.icon		{ width:72px; text-align:center; }
.edit-file-list li div label	{ margin-bottom:6px; }


.inline-list			{ display:table; width:100%; }
.inline-list li			{ display:table-row; }
.inline-list li .col	{ display:table-cell; padding:12px 0 12px 10px; border-bottom:1px dashed #ddd; }
.inline-list li .col.thumb		{ display:none; }
.inline-list li.header-row .col	{ background:#f7f7f7; border:none; }

.title-list				{ }
.title-list li			{ padding:12px; border:1px solid #ccc; border-radius:5px; margin-bottom:8px; position:relative; }
.title-list li .col		{ display:inline; }
.title-list li .buttons	{ position:absolute; right:12px; top:12px; margin:0; }
.title-list li .button	{ padding:0; background:none; color:#999; margin-left:10px; }

.thumb-list				{ overflow:hidden; zoom:1; }
.thumb-list li			{ float:left; width:24%; margin-right:1.333333333333333%; margin-bottom:2%; padding-bottom:10px; height:260px; border:1px solid #ddd; overflow:hidden; box-sizing:border-box; }
.thumb-list li:nth-child(4n)	{ margin-right:0; }
.thumb-list li .col			{ margin:8px; line-height:1.25em; }
.thumb-list li .thumb		{ height:190px; overflow:hidden; background:#ccc; }
.thumb-list li .thumb img	{ height:100%; }
.thumb-list li .thumb a		{ display:block; height:100%; }
.thumb-list li .button		{ padding:0; background:none; color:#999; margin-top:5px; }


.article-list				{ }
.article-list li			{ border-bottom:1px solid #ddd; padding:15px 0; overflow:hidden; zoom:1; }
.article-list li .col		{ margin-bottom:15px; line-height:1.5em; }
.article-list li [data-col="title"]		{ font-size:1.25em; }
.article-list li .buttons	{ }
.article-list li .button	{ }
.article-list li.has-image .col			{ margin-left:210px; }
.article-list li.has-image .thumb		{ width:180px; background:#ccc; float:left; margin-left:0; }
.article-list li.has-image .thumb	img	{ width:100%; display:block; }

.sort-list,
.nested-sort-list					{ cursor:move; }
.nested-sort-list li				{ padding-bottom:4px; }
.nested-sort-list li div			{ margin-bottom:8px; }
.nested-sort-list li ol				{ padding-top:4px; }
.nested-sort-list li.placeholder	{ border:1px dashed #ddd; }

.gallery-list				{}
.gallery-list .set			{ border-bottom:1px solid #ccc; margin-bottom:30px; }
.gallery-list .set label	{ display:none; }
.gallery-list .upload-set	{ border:none;  }

.tips				{ background:#f7f7f7; color:#999; padding:12px 15px; margin-bottom:30px; }

.pagination 		{ margin-top:30px;  }
.pagination a,
.pagination span 	{ color:#999; border:1px solid #999; margin-left:4px;padding:3px 7px; color:#666; border-radius:3px; }
.pagination a:hover { color:#333;}
.pagination .current{ color:#fff; background:#666; border:1px solid #666;}
.pagination .prev	{ border:none; font-size:1.5em; }
.pagination .next	{ border:none; font-size:1.5em; }


/*
======================
Page
======================
*/

/** Login **/
#login				{}
#login #header		{ }
#login #content		{ margin:0; border:none; }
#login #content form legend			{ margin-bottom:30px; }
#login #content form .buttons		{ text-align:left; }
#login #content form .button		{ margin-left:0; }
#login #aside		{ display:none; }
#login #footer		{ }
#login .error		{ margin-left:0; }

/** Crop cover **/
#crop-source		{ width:82%; float:left; }
#crop-source img	{ max-width: 100%; }
#crop-result		{ margin-left:83%; }
#crop-result img.current { display:block; max-width:100%; max-height:180px; }
#crop-preview		{  width:100%; height:180px; overflow:hidden; }
#crop-result span	{ display:block; color:#999; margin-top:5px; margin-bottom:20px; }
#crop-data			{ clear:left; border-bottom:1px solid #ddd; padding-top:20px; }