* { margin:0; padding:0; border:0 }
html { height:100%; max-height:100%; padding:0; margin:0; border:0; background-color:#333333 }

body { font:1em Arial,Helvetica,'MS Sans Serif',sans-serif; height:100%; max-height:100%; padding:0; margin:0; border:0; background-color:#333333; color:#4d4d4d }

td, th, div { }

a { color:#4d4d4d; text-decoration:none; border-bottom: 1px dashed #4d4d4d }
a:hover { color:#eeeeee }
a, a:active, a:focus { outline: none; outline-style: none }
a img { border-style: none }

/*--------------------------------------- header and menu --------------------------------------------*/


#header { display:block; width: 100%; background-color: #808080 }
#header #logo a { display:block; border:0; height:60px; border-right:1px solid #333333; font-size:0px; color:#808080; width: 160px; background: url('../img/studioologo.png') no-repeat }

.menu a { display:inline-block; border:0; color:#a8a8a8; height:30px; border-right:1px solid #333333; border-bottom:1px solid #333333; margin-left: -4px; padding-left: 18px; padding-right: 18px; line-height:30px; text-align:center; white-space:nowrap }
.menu a:hover, .menu #selected { background-color:#999999; color: #4d4d4d }


.box { border-bottom:1px solid #333333 }
.menu { border-bottom:0px solid #333333 }

/*--------------------------------------- accordion / main content --------------------------------------------*/

#items { display:block; width: 100%; background-color: #808080 }
#items a#title { display:block; border:0; font-size:1em; font-style: normal; color:#a8a8a8; height:30px; border-bottom:1px solid #333333; border-top:1px solid #333333; margin-top:-1px; margin-left: -4px; padding-left: 18px; line-height:30px; white-space:nowrap; overflow:hidden }
#items a#title:hover { background-color:#999999; color: #4d4d4d }

/* 
#items > div { overflow: hidden; background-color:#999999; color: #4d4d4d; 
	-webkit-transition: height 0.5s ease; 
	-moz-transition: height 0.5s ease; 
	-o-transition: height 0.5s ease;
	}
#items > div p { margin: 14px 14px 20px 14px }
#items > div:not(:target) { height: 0 }
#items > div:target { height: auto; border-bottom:1px solid #333333 }
*/

#items > div:not(:target) { height: 0; padding: 0; border-bottom: 0 }
#items > div:target { height: auto; border-bottom:1px solid #333333 }

div.itemin { overflow: hidden; background-color:#999999; padding: 5px 15px 15px 15px; color: #4d4d4d; border-bottom:1px solid #333333; 
	-webkit-transition: height 0.5s ease; 
	-moz-transition: height 0.5s ease; 
	-o-transition: height 0.5s ease;
}

#items div.open { height: auto; border-bottom:1px solid #333333; border-top:1px solid #333333; margin-top: -1px; padding: 1px 15px 15px 15px; }

/* 
@-moz-document url-prefix() { div.itemin {  padding: 5px 15px 15px 15px;} }
div.itemin p { margin-top: 16px; margin-bottom: 0px; padding-top: 1px; padding-bottom: 1px; }
p.pline { float: left; } */  

div.itemin p { clear:both; display:block; border:0; margin-top: 15px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; }
/*  p.pline { margin-top: 0px; }

.wrapper { clear:both; display:block; background: #ff0000; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } */  

/*--------------------------------------- form text inputs --------------------------------------------*/

.cornerBox input, textarea { background: #ececec; border: none; width: 100%; color:#4d4d4d; font:1em Arial, Helvetica, 'MS Sans Serif', sans-serif }
.cornerBox textarea:focus, input:focus { outline:none }

.cornerBox { position: relative; background: #ececec; border-top:2px solid #4d4d4d }
.short { width: 200px }
.shorter { width: 100px }
.tiny { width: 60px }
.line { float: left; margin-right: 15px; margin-top: 16px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; }
span.line { text-align:center; line-height:27px }

.corner { position: absolute; width: 14px; height: 15px; background: url('../img/corners.png') no-repeat; font-size: 0% }
.cornerBoxInner { padding: 4px 12px 4px 8px }

.tl { top: -2px; left: 0; background-position: 0 0 }
.tr { top: -2px; right: 0; background-position: -14px 0 }
.bl { bottom: 0; left: 0; background-position: 0 -14px }
.br { bottom: 0; right: 0; background-position: -14px -14px }

/*--------------------------------------- form checkboxes and roundbuttons --------------------------------------------*/

form .button { display: inline; cursor: pointer; position: relative; margin-right: 14px }

form .button input { margin: 0; padding: 0; height: 30px; width: 30px; float: left; position: absolute; left: 0; opacity: 0 }

form .button label { float: left; line-height: 30px; color: #fff; padding-left: 35px; 
	-moz-transition: color 1s ease; 
	-o-transition: color 1s ease; 
	-webkit-transition: color 1s ease; 
	transition: color 1s ease; 
}

/* starting styles */

form .button:not(#foo) > input + label { background: url('../img/radio.png') 0 0 no-repeat; height: 30px }
form .button:not(#foo) > input[type=checkbox] + label { background-position: 0 -90px }

/* Checked styles */

form .button:not(#foo) > input[type=radio]:checked + label { background-position: 0 -60px }

form .button:not(#foo) > input[type=checkbox]:checked + label { background-position: 0 -150px }

form .button:not(#foo) > input[type=radio]:hover:checked + label,
form .button:not(#foo) > input[type=radio]:focus:checked + label,
form .button:not(#foo) > input[type=radio]:checked + label:hover,
form .button:not(#foo) > input[type=radio]:focus:checked + label { cursor: pointer; background-position: 0 -60px }

form .button:not(#foo) > input[type=checkbox]:hover:checked + label,
form .button:not(#foo) > input[type=checkbox]:focus:checked + label,
form .button:not(#foo) > input[type=checkbox]:checked + label:hover,
form .button:not(#foo) > input[type=checkbox]:focus:checked + label { cursor: pointer; background-position: 0 -150px }

/* Hover & Focus styles */

form .button:not(#foo) > input[type=radio]:hover + label,
form .button:not(#foo) > input[type=radio]:focus + label,
form .button:not(#foo) > input[type=radio] + label:hover { cursor: pointer; background-position: 0 -30px }

form .button:not(#foo) > input[type=checkbox]:hover + label,
form .button:not(#foo) > input[type=checkbox]:focus + label,
form .button:not(#foo) > input[type=checkbox] + label:hover { cursor: pointer; background-position: 0 -120px }

/* Active styles */

form .button:not(#foo) > input[type=radio]:active + label,
form .button:not(#foo) > input[type=radio] + label:hover:active { cursor: pointer; background-position: 0 -30px }

form .button:not(#foo) > input[type=checkbox]:active + label,
form .button:not(#foo) > input[type=checkbox] + label:hover:active { cursor: pointer; background-position: 0 -120px }

form .button:not(#foo) > input[type=radio]:active:checked + label,
form .button:not(#foo) > input[type=radio]:checked + label:hover:active { cursor: pointer; background-position: 0 -60px; }

form .button:not(#foo) > input[type=checkbox]:active:checked + label,
form .button:not(#foo) > input[type=checkbox]:checked + label:hover:active { cursor: pointer; background-position: 0 -150px }

/*--------------------------------------- form submit button --------------------------------------------*/

button { outline:none; border:none; background:none; padding:0; margin:0; width:auto; overflow:visible;	text-align:center; line-height:27px; white-space:nowrap; height:31px; margin-right: 10px }

button span, button em { font:16px Arial,Helvetica,'MS Sans Serif',sans-serif; display:block; height:31px; line-height:27px; margin:0; color:#cccccc; border:none; cursor: pointer }

button a { cursor: pointer; color:#cccccc; border:none }

button span { padding-left:20px; background:url('../img/button.png') no-repeat 0 0 }	
button em { font-style:normal; padding-right:20px; background:url('../img/button.png') no-repeat 100% 0 }


.buttonwrap { float: left; height:31px; margin-left: -2px }
.clr { clear:both; float:none !important; height:1px !important; font-size:1px !important; border:none; margin:0 !important; padding:0 !important; background:transparent !important; visibility:hidden !important }

button:hover { cursor: pointer }
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none }

button:hover em { cursor: pointer; line-height:29px; background:url('../img/button.png') no-repeat 100% -30px }
button:hover a { cursor: pointer; color:#cccccc; border:none }

button:hover span { cursor: pointer; background:url('../img/button.png') no-repeat 0 -30px }

/*--------------------------------------- centered block ---------------------------------------------- */

#centered { display: table-cell; vertical-align: middle; position: absolute; background: #999999; width: 231px; height: 268px; left: 50%; top: 50%;  margin-left: -115px; margin-top: -134px }
#centered #pad { padding: 15px }
#centered #image { width: 100%; height: 60px; border-bottom:1px solid #333333; background:  #808080 url('../img/studioologo.png') no-repeat }

/*--------------------------------------- browse button ---------------------------------------------- */

.FileUpload { position:relative; cursor: pointer; margin: 0 15px 3px 0; padding-right: 15px }
.FileUpload:hover .BrowserVisible { background-position: 0 -32px } 

.BrowserVisible { position: absolute; top: 0px; left: 0px; z-index: 1; background:url('../img/browse.png') 100% 0px no-repeat; height:29px; width:371px } 
.FileField { width: 252px; height: 23px; margin: 3px 110px 0 10px; color:#4d4d4d; font:1em Arial, Helvetica, 'MS Sans Serif', sans-serif; border:0; background: #ececec; cursor: text } 
.BrowserHidden { position:relative; width:360px; height:26px; text-align: left; z-index: 2; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0 }

/*-------------------------------------- pic thbnails ------------------------------------------------*/

.thbnl { float:left; display:block; width:180px; height:242px; padding: 0 15px 15px 0 }
.thbnl img { width:180px; height:180px; margin-bottom: -4px }
.thbnl label { width:140px; white-space:nowrap; overflow:hidden }
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .thbnl img {margin-bottom: -3px} } /* hack for Opera */
.thbnl img { _margin-bottom: -3px} /* hack for IE6 */
.thbnl .cornerBox { margin-bottom: -8px; width:180px; }

/*--------------------------------------- table -----------------------------------------*/

table { width: 100%; border-collapse: collapse; text-align: center; table-layout: fixed }
th, td.head { color:#ffffff !important; background: #aaaaaa; font-size: 15px; line-height:25px; border-left: #cccccc 1px solid !important }
tr { background: #ffffff }
tr.even { background-color:#eeeeee !important }
td { color:#777777; overflow: hidden; border-left: #aaaaaa 1px solid; white-space: nowrap; font-size: 15px; line-height:25px }
td:first-child, th:first-child { border-left: 0 none; }
.alignleft { text-align: left; padding-left: 5px }

tr.selected, td.selected { background-color:#ffc65e !important }

/*--------------------------------------- interface message -----------------------------------------*/

.message { color: #ffff00 }
.select { color: #00ff00 }