html,
body {
	height: 100%;
}

body {
	background: url("/img/ui_parts.png") repeat-x left top;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;  /* Negative indent footer by it's height */
	margin: 0 auto -40px;
}

#header {
	height: 60px;
	position: relative;
}

#header h1 {
	font-size: 24px;
	font-weight: bold;
	line-height: 48px;
}

#header p {
	position: absolute;
	top: 0;
	right: 0;
}
/* #globalnavi section*/

#globalnavi {
	height: 35px;
}

/* #globalnavi section*/
#globalnavi {
	padding: 2px 0 1px 0;
}

#globalnavi ul {
	font-size: 0;
}

ul#prt {
	width: 100%;
}

ul#prt li.drop {
	background: url("/img/arrow_down.png") no-repeat 135px 14px;
}

ul#prt li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
}

ul#prt li.hover a {
	color: #ff0;
}


ul#prt li {
	width: 150px;
	text-align: center;
	line-height: 32px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	border-left: #999 solid 1px;
	border-right: #666 solid 1px;
	position: relative;
	z-index: 50;
}

ul#prt li ul {
	width: 100%;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 32px;
}

ul#prt li ul li {
	width: 100%;
	line-height: 35px;
	display: block;
	text-align: left;
	text-indent: 18px;
	border-top: #999 solid 1px;
	border-bottom: #666 solid 1px;
	background: rgb(100, 100, 100) url("/img/arrow_right.png") no-repeat 5px center;
	background: rgba(50, 50, 50, 0.75) url("/img/arrow_right.png") no-repeat 5px center;
	z-index: 101;
}

ul#prt li ul li.hover {
	background: rgb(50, 50, 50) url("/img/arrow_right.png") no-repeat 5px center;
	background: rgba(10, 10, 10, 0.9) url("/img/arrow_right.png") no-repeat 5px center;
}


/* #main section*/
#container {
	padding: 16px 0 60px 0;
}

#login {
	width: 320px;
	margin: 30px auto;
	text-align: center;
}

#login dl {
	margin: 6px 24px;
}

#login dl dt {
	float: left;
	clear: left;
	width: 72px;
	text-align: right;
}

#login dl dd {
	text-align: left;
	margin-left: 80px;
	margin-bottom: 6px;
}

#login dl dd input {
	width: 90%;
}

#l-column {
	float: left;
	width: 62%;
}

#r-column {
	float: right;
	width: 37%;
}

#container h2 {
	border: #ccc solid 1px;
	border-bottom: #999 solid 1px;
	color: #555;
	font-weight: bold;
	line-height: 1.6em;
	padding: 4px 12px;
	background: #f6f6f6;
	background:-moz-linear-gradient(top, #fff, #f6f6f6);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f6f6f6), color-stop(1,#f6f6f6));
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-khtml-border-radius-topleft: 8px; 
	border-top-left-radius: 8px;
	-moz-border-radius-topright: 8px;
	-webkit-border-top-right-radius: 8px;
	-khtml-border-radius-topright: 8px; 
	border-top-right-radius: 8px;
}

#container h3 {
	color: #953;
	font-weight: bold;
	margin-bottom: 6px;
}

#container p {
	margin-bottom: 6px;
}

#container .chmod {
	margin-bottom: 4px;
}

#container .chmod form {
	border: #ddd solid 1px;
	background: #f6f6f6;
	float: right;
	text-align: right;
	padding: 4px 12px;
	line-height: 2em;
}

#container .chmod form label {
	margin: 4px 8px 4px 0;
}

#container .message-g {
	line-height: 1.6em;
	padding: 6px 32px;
	color: #064;
	font-weight: bold;
	border: #5b7 solid 1px;
	margin: 12px 0;
	background: #cfc url("/img/button_ok.png") no-repeat 10px center;
	background: url("/img/button_ok.png") no-repeat 10px center, -moz-linear-gradient(top, #efe, #cfc);
	background: url("/img/button_ok.png") no-repeat 10px center, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efe), to(#cfc), color-stop(1,#cfc));
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px; 
	border-radius: 4px;
}

#container .message-r {
	line-height: 1.6em;
	padding: 6px 32px;
	color: #903;
	font-weight: bold;
	border: #c99 solid 1px;
	margin: 12px 0;
	background: #fcc url("/img/button_cancel.png") no-repeat 10px center;
	background: url("/img/button_cancel.png") no-repeat 10px center, -moz-linear-gradient(top, #fee, #fcc);
	background: url("/img/button_cancel.png") no-repeat 10px center, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fee), to(#fcc), color-stop(1,#fcc));
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px; 
	border-radius: 4px;
}

#container .box {
	border: #ccc solid 1px;
	border-top: #666 solid 2px;
	padding: 12px 16px;
	position: relative;
	margin-bottom: 16px;
}

#container span.star {
	font-weight: bold;
	color: #c00;
	margin-left: 4px;
}

.account dt {
	color: #993;
	width: 80px;
	float: left;
	clear: left;
}

.account dd {
	padding-left: 80px;
}

#update dt {
	color: #993;
	font-size: 12px;
}

#update dd {
	border-bottom: #999 dotted 1px; 
}

/* list parts */
#container ul {
	margin-bottom: 12px;
}

#container ul li {
	padding-left: 16px;
	line-height: 1.8em;
	background: url("/img/arrow_blue_right.png") no-repeat left 4px;
}

#container ul li img {
	vertical-align: middle;
}

/* main console */
#l-column #pickup, 
#l-column #attend {
	margin-bottom: 16px;
}

#attend dt, 
#pickup dt {
	clear: both;
	background: #def;
	padding: 3px 8px;
}

#pickup dd.pickup {
	width: 80px;
	height: 140px;
	text-align: center;
	border: #ccc solid 1px;
	background: #fffff0;
	padding: 5px 0;
	float: left;
	margin:  10px 0 0 10px;
}

#attend dd {
	padding: 3px 8px;
}

#attend dd span{
	color: #f60;
	font-size: 18px;
	vertical-align: baseline;
}

/* table parts */
table {
	width: 100%;
	text-align: left;
	margin-bottom: 12px;
}

table th, 
table td {
	border: #999 solid 1px;
	padding: 8px 6px;
}

#container span.star {
	font-weight: bold;
	color: #c00;
	margin-left: 4px;
}

table th {
	color: #863;
	font-weight: bold;
	background: #f3f6dd;
	background:-moz-linear-gradient(top, #fff, #f3f6dd);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f3f6dd), color-stop(1,#f3f6dd));
}

table.longi th {
	text-align: left;
	border-right: #999 double 3px;
	width: 20%;
}

table.hori th {
	text-align: center;
	border-bottom: #999 double 4px;
}

table td {
	border: #999 solid 1px;
}

table td.thumb {
	padding: 2px;
	text-align: center;
	vertical-align: middle;
}

table .ctmd {
	text-align: center;
	vertical-align: middle;
}

table .lfmd {
	text-align: left;
	vertical-align: middle;
}

table .rtmd {
	text-align: right;
	vertical-align: middle;
}

table .shade td {
	background-color: #eee;
}

table .sky td {
	background-color: #eff;
}

table .lemon td {
	background-color: #ffe;
}

table#castlist th,
table#castlist td {
	font-size: 12px;
	padding: 4px 6px;
}

table#castlist th {
	width: 93px;
}

table#castlist .edit {
	cursor: pointer;
}

table tr.even td {
	background-color: #eee;
}

table .caution {
	font-size: 12px;
	color: #c30;
}

table#image td {
	padding: 4px 2px;
}

table#castlis th {
	width: 
}

table#castlist .pick {
	font-size: 12px;
	color: #093;
	margin-right: 12px;
}

table#castlist .icon {
	font-size: 12px;
	color: #339;
	margin-right: 12px;
}

table#castlist .type {
	font-size: 12px;
	color: #f69;
	margin-left: 6px;
}

table#castlist .attend, 
table#castlist .attend div {
	font-size: 12px;
	color: #f60;
	cursor: pointer;
}

table#castlist .attend .rest {
	font-size: 12px;
	color: #999;
}

table#castlist .thumb div, 
table#castlist .attend div {
	position: relative;
}

table#castlist .thumb span {
	position: absolute;
	width: 60px;
	height: 60px;
	right: -10px;
	top: -13px;
	background: url("/img/icon.png") no-repeat left top;
	text-indent: -9999px;
}

table#castlist .thumb .tr1 {
	background-position: left -275px;
}

table#castlist .thumb .tr2 {
	background-position: -64px -275px;
}

table#castlist .thumb .tr3 {
	background-position: -128px -275px;
}

table#castlist .thumb .tr4 {
	background-position: -192px -275px;
}

table#castlist .thumb .tr5 {
	background-position: -256px -275px;
}

table#castlist .thumb .tr6 {
	background-position: left -765px;
}

table#castlist .thumb .tr7 {
	background-position: -64px -765px;
}

table#castlist .thumb .tr8 {
	background-position: -128px -765px;
}

table#castlist .thumb .tr9 {
	background-position: -192px -765px;
}

table#castlist .thumb .tr10 {
	background-position: -256px -765px;
}

table#castlist .thumb .tr11 {
	background-position: -320px -765px;
}

table#castlist .thumb .tr12 {
	background-position: -384px -765px;
}

table#castlist .thumb .tr13 {
	background-position: -448px -765px;
}

table#castlist .thumb .tr14 {
	background-position: -512px -765px;
}

table#castlist .thumb .tr15 {
	background-position: -576px -765px;
}

table#castlist .thumb .tr16 {
	background-position: -640px -765px;
}

table#castlist .thumb .tr17 {
	background-position: -704px -765px;
}

table#castlist .thumb .tr18 {
	background-position: left -1525px;
}

table#castlist .thumb .tr19 {
	background-position: -64px -1525px;
}

table#castlist .thumb .tr20 {
	background-position: -128px -1525px;
}

table#castlist .thumb .tr21 {
	background-position: -192px -1525px;
}

table#castlist .thumb .tr22 {
	background-position: -256px -1525px;
}

table#castlist .thumb .tr23 {
	background-position: -320px -1525px;
}

table#castlist .thumb .tr24 {
	background-position: -384px -1525px;
}

table#castlist .thumb .tr25 {
	background-position: -448px -1525px;
}

table#castlist .thumb .tr26 {
	background-position: -512px -1525px;
}

table#castlist .thumb .tr27 {
	background-position: -576px -1525px;
}

table#castlist .thumb .tr28 {
	background-position: -640px -1525px;
}

table#castlist .thumb .tr29 {
	background-position: -704px -1525px;
}

table#castlist .thumb .tr30 {
	background-position: left -1605px;
}

table#castlist .thumb .tr31 {
	background-position: -64px -1605px;
}

table#castlist .thumb .tr32 {
	background-position: -128px -1605px;
}

table#castlist .thumb .tr33 {
	background-position: -192px -1605px;
}

table#castlist .thumb .tr34 {
	background-position: -256px -1605px;
}

table#castlist .thumb .tr35 {
	background-position: -320px -1605px;
}



table#castlist .attend .tl1, 
table#castlist .attend .tl2,
table#castlist .attend .tl3 {
	position: absolute;
	left: -50px;
	bottom: -10px;
	width: 53px;
	height: 53px;
	background: url("/img/icon.png") no-repeat left top;
	text-indent: -9999px;
}

table#castlist .attend .tl1 {
	background-position: left -360px;
}

table#castlist .attend .tl2 {
	background-position: -60px -360px;
}

table#castlist .attend .tl3 {
	background-position: -120px -360px;
}

table#castlist td form.profile {
	margin-bottom: 6px;
}
table#castlist td form.profile input, 
table#castlist td form.schedule input {
	width: 100%;
}

table#castlist td form.schedule input {
	padding: 10px 0;
}


table#playlist img.thumb {
	width: 40px;
}

/* form parts */
form {
	text-align: center;
}

input.int {
	width: 54px;
	text-align: right;
}

textarea.short, 
input.short {
	width: 25%;
}

textarea.half, 
input.half {
	width: 50%;
}

textarea.long, 
input.long {
	width: 75%;
}

textarea.full, 
input.full {
	width: 90%;
}

input.submit {
	font-size: 16px;
	padding: 8px 24px;
	margin: 12px 0;
}

textarea {
	font-size: 12px;
	width: 75%;
	height: 120px;
}

label {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	white-space: nowrap;
	margin: 0 8px 4px 0;
}

form#newentry {
	display: none;
}

.newentry {
	text-align: right;
}

#viewForm {
	position: absolute;
	border: #999 solid 1px;
	top: 5px;
	right: 10px;
}

#viewForm a {
	display: block;
	padding: 4px 18px;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
	
	color: #999;
}

#viewForm a:hover {
	color: #666;
	background: #f0f0f0;
}

.editpanel {
	width: 500px;
	margin: 0 auto;
}

.editpanel h3{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

/* cast edit form*/
#hideform {
	display: none;
}

#hideform div {
	width: 500px;
}

/* recover box*/
#castrecover .castdoc {
	width: 120px;
	height: 185px;
	background: #ffe;
	border: #fc0 solid 1px;
	text-align: center;
	float: left;
	margin: 0 10px 10px 0;
	position: relative;
}

#castrecover .castdoc img {
	margin: 5px 0;
}

#castrecover .castdoc ul {
	position: absolute;
	width: 100%;
	top: 100px;
	left: 0;
}

#castrecover .castdoc ul li {
	font-size: 12px;
	padding: 0;
	background: #fff;
	border-top: #f90 dotted 1px;
	border-bottom: #f90 dotted 1px;
}

#castrecover .castdoc form {
	position: absolute;
	width: 100%;
	top: 125px;
	left: 0;
}

#castrecover .castdoc input.recover {
	font-size: 14px;
	padding: 2px 12px;
	position: absolute;
	bottom: 5px;
	left: 20px;
}

#castrecover .castdoc a.del {
	display:block;
	width: 21px;
	height: 24px;
	text-indent: -9999px;
	background: url("/img/updown.png") no-repeat -244px center;
	position: absolute;
	right: 5px;
	top: 5px;
}

#castrecover .castdoc a.del:hover {
	background: url("/img/updown.png") no-repeat -196px center;
}

/* sort box*/
#castsort .submit {
	position: fixed;
	top: 150px;
	left: 47%;
}

#sortcontainer .sortable {
	width: 128px;
	height: 160px;
	background: #ffe;
	border: #fc0 solid 1px;
	text-align: center;
	float: left;
	margin: 0 10px 10px 0;
	position: relative;
}

#sortcontainer .sortable img {
	margin: 5px 0;
}

#sortcontainer .sortable ul li {
	background: #ff9;
	margin-bottom: 4px;
	font-size: 12px;
	padding: 0;
}

#sortcontainer .sortable ul li.name {
	background: #fff;
	border-top: #f90 dotted 1px;
	border-bottom: #f90 dotted 1px;
}

#sortcontainer .sortable ul li.attend {
	background: #fc0;
}

#sortcontainer .sortable ul li.off {
	background: #f0f0f0;
}

.placeholder {
	width: 128px;
	height: 160px;
	margin: 0 10px 10px 0;
	background: #f0f0f0;
	border: #ccc dotted 1px;
	float: left;
}

#sortcontainer .sortable span {
	display:block;
	width: 24px;
	height: 24px;
	text-indent: -9999px;
	background: url("/img/updown.png") no-repeat -96px center;
	position: absolute;
	cursor: pointer;
}

#sortcontainer .sortable span.settop {
	top: 3px;
	right: 3px;
}

#sortcontainer .sortable span.setbottom {
	top: 36px;
	right: 3px;
	background-position: -144px center;
}

#sys-message, #sub-message, #pu-message {
	width: 600px;
	position: fixed;
	top: 20%;
	left: 50%;
	margin-left: -300px;
	z-index: 200;
}

#banner td img {
	max-width: 100px;
}

#container .pagination ul {
	text-align: right;
}

#container .pagination ul li {
	display: inline-block;
	background-image: none;
	padding-left: 8px;
}


/* #footer section */
#footer {
	height: 40px;
	background: #ddd;
}

#footer p {
	border-top: #f06 solid 1px;
	text-align: center;
	line-height: 38px;
}


/* design section */
.bred {
	font-weight: bold;
	color: #f00;
}

.shade {
	background-color: #eee;
}

.hide {
	display: none;
}

.double {
	border-bottom: #999 double 3px;
}


.pad4 {
	padding: 4px;
}

.pad6 {
	padding: 6px;
}

.pad12 {
	padding: 12px;
}

.pad16 {
	padding: 16px;
}

.round4 {
	border-radius: 4px;        /* CSS3草案 */  
	-webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 4px;   /* Firefox用 */
}

.round6 {
	border-radius: 6px;        /* CSS3草案 */  
	-webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 6px;   /* Firefox用 */
}

.round8 {
	border-radius: 8px;        /* CSS3草案 */  
	-webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 8px;   /* Firefox用 */
}

.round10 {
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */
}

.round12 {
	border-radius: 12px;        /* CSS3草案 */  
	-webkit-border-radius: 12px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 12px;   /* Firefox用 */
}

.round16 {
	border-radius: 16px;        /* CSS3草案 */  
	-webkit-border-radius: 16px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 16px;   /* Firefox用 */
}

.round20 {
	border-radius: 20px;        /* CSS3草案 */  
	-webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 20px;   /* Firefox用 */
}

.round24 {
	border-radius: 24px;        /* CSS3草案 */  
	-webkit-border-radius: 24px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 24px;   /* Firefox用 */
}

/* for modal window*/
#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:pointer;}

/* Container */
#simplemodal-container {height:450px; width:600px; background-color:#fff; border:4px solid #063F9F; padding:12px;}
/*#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}*/
/*#simplemodal-container .simplemodal-data {padding:0;}*/
/*#simplemodal-container a {color:#ddd;} */
#simplemodal-container a.modalCloseImg {background:url(/img/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
/*#simplemodal-container h3 {color:#84b8d9;}*/


/**/
td.dragHandle {
	width: 24px;
	text-indent: -9999px;
	background-image: url("/img/updown.png");
	background-position: -43px center;
	background-repeat: no-repeat;
	cursor: move;
}

tr.showDragHandle td {
	background-color: #ffffee;
}

tr.showDragHandle td.dragHandle {
	background-image: url("/img/updown.png");
	background-position: 5px center;
	background-repeat: no-repeat;
}

tr.ondrag td{
	background-color: #f0f0f0;
}

/* modal */
#modal-win {
	width: 100%;
	position: absolute;
}
#modal-win-inner {
	box-shadow: 0 0 5px rgba(0, 0, 0, .25);
	margin: 0 auto;
	position: relative;
	z-index: 101;
}
#modal-bg {
	width: 100%;
	height: 100%;
	background-color: #000000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	cursor: pointer;
}