HMTL {
	height:100%;
}
BODY {
	margin:0px;
	height:100%;
	width:100%;
	background-color:#272728;
	font-family:OzoneRegular,Arial,Tahoma;
	color: #aaa;
	font-size:14px; 
	text-decoration: none; 
	text-align:center;
}
DIV {	
	word-wrap:break-word;
	vertical-align:top;
	text-align:left;
	color:#aaa;
	font-family:inherit;
}
DIV.clickable:hover {
	color:#ccc;
}
A,A:link,A:active,A:visited  {
	text-decoration:none;
	color:#aaa ;
	font-size:inherit;
	font-weight:400;
}
A:hover {
	color: #ccc;
	cursor:pointer;
}
.clickable {
	cursor:pointer;
}
LABEL {
    display: block;
    width: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: right;
}
.mellow-color {
	color:#fff;
}
BR {
	clear: left; 
}
TR {
	vertical-align:top;
}
TD {
	vertical-align:top;
	text-align:left;
}
INPUT.text {
	border:1px solid #ddd;
	background-color:#efefef;
	width:150px;
}
INPUT.text:hover {
	border:1px solid #aaa;	
}
INPUT.radio {

}
INPUT.checkbox {

}
SELECT {
	border:1px solid #ddd;
}
SELECT.multiple {
	border:1px solid #ddd;
}
TEXTAREA {
	border:1px solid #ddd;
}
.border-radius7 {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px; 
  border-radius: 7px; 
}
.border-radius4 {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px; 
  border-radius: 4px; 
}
.fixedsize {
	overflow-x:hidden;
	overflow-y:auto;
}
.tooltip {
		z-index:999;
		display:none;
		background-color:#ffa;
		border:1px solid #cc9;
		padding:3px;
		font-size:13px;
		-moz-box-shadow: 2px 2px 11px #666;
		-webkit-box-shadow: 2px 2px 11px #666;
}


/* button */
.button-default,a.button-default,a.button-default:visited,a.button-default:link {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	padding:4px 9px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.button-default:hover,a.button-default:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
	color:#777777;font-weight:bold;
}.button-default:active,a.button-default:active {
	position:relative;
	top:1px;
}
.button-default-red,a.button-default-red,a.button-default-red:visited,a.button-default-red:link {
	-moz-box-shadow:inset 0px 1px 0px 0px #fab3ad;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fab3ad;
	box-shadow:inset 0px 1px 0px 0px #fab3ad;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fa665a), color-stop(1, #d34639) );
	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
	background-color:#fa665a;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #d83526;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	padding:4px 9px;
	text-decoration:none;
	text-shadow:1px 1px 0px #98231a;
}.button-default-red:hover,a.button-default-red:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d34639), color-stop(1, #fa665a) );
	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
	background-color:#d34639;
	color:#ffffff;font-weight:bold;
}.button-default-red:active,a.button-default-red:active {
	position:relative;
	top:1px;
}


a.button-css2 {
	padding-bottom:2px;padding-left:0px;padding-right:10px;border:1px solid #ccc;vertical-align:middle;text-align:left;padding-top:2px;border-style:outset;background-color:#eee;font-weight:bold;color:#000;
}
a.button-css2:hover {
	background-color:#ccc;	cursor:pointer;color:#000;
}
a.button-css2:active,a.button-css:focus {
	background-color:#fff;	cursor:pointer;color:#000;
}
a.button-css2:visited {
	background-color:#eee;	cursor:pointer;color:#000;
}
a.button-css2:visited:hover {
	background-color:#ccc;	cursor:pointer;color:#000;
}
img.button-icon{position:relative;border:0px;top:2px;left:2px;padding-right:3px;}



/* Paging */
table.pagerUI td {
    white-space: nowrap;
}
table.pagerUI button {
    background: url("../../../images/pagerUI-sprite.png") no-repeat scroll 0 0 transparent;
    border: 0 none #FFFFFF;
    height: 22px;
    padding: 0;
    width: 23px;
}
table.pagerUI .pagerUITxt {
    text-align: center;
    width: 45px;
}
table.pagerUI button.previous {
    background-position: 0 0;
    cursor: pointer;
}
table.pagerUI button.previousDisabled {
    background-position: 0 -66px;
}
table.pagerUI button.previous:hover {
    background-position: 0 -22px;
}
table.pagerUI button.previous:active {
    background-position: 0 -44px;
}
table.pagerUI button.next {
    background-position: -23px 0;
    cursor: pointer;
}
table.pagerUI button.next:hover {
    background-position: -23px -22px;
}
table.pagerUI button.next:active {
    background-position: -23px -44px;
}
table.pagerUI button.nextDisabled {
    background-position: -23px -66px;
}
/* // Paging */

/* Box */
div.box-header {
  -moz-border-top-left-radius: 7px;
  -webkit-border-top-left-radius: 7px; 
  border-top-left-radius: 7px; 
  -moz-border-top-right-radius: 7px;
  -webkit-border-top-right-radius: 7px; 
  border-top-right-radius: 7px; 
  border:1px solid #ddd;
  border-bottom:0px;
  background:#ddd;color:#444;  /*#547C96*/
  width:100%;padding:6px 0px 6px 0px;
}
div.box-header span {
	padding:6px 9px 6px 9px;font-size:14px;font-weight:bold;
}
div.box-content {
  -moz-border-bottom-left-radius: 7px;
  -webkit-border-bottom-left-radius: 7px; 
  border-bottom-left-radius: 7px; 
  -moz-border-bottom-right-radius: 7px;
  -webkit-border-bottom-right-radius: 7px; 
  border-bottom-right-radius: 7px; 
  border:1px solid #ccc;
  border-top:0px;width:100%;
}
div.box-content div.box-body {
	padding:8px 10px 8px 10px;
}
/* Box end */

/* header */
DIV.topmenu {
	height:30px;float:left;padding-left:20px;padding-right:20px;position:relative;font-size:14px;border:0px solid red;
}
DIV.topmenu:hover,DIV.topmenu.active {
	color:#ccc;
}
DIV.topmenu-hilight {
	position:absolute;bottom:0px;height:5px;background:#fff;display:none;
}

/* Portfolio */
DIV.port-item {
	width:260px;height:350px;margin-left:25px;position:relative;background:#272728;text-align:center;float:left;overflow:hidden;cursor:pointer;
}
DIV.port-item DIV.port-filter {
	position:absolute;width:100%;height:100%;top:0px;left:0px;background:url(../../../images/mellow/port/mm_web_port_fade_top.png);z-index:9;cursor:pointer;text-align:center;
}
DIV.port-item DIV.port-filter DIV.port-id {
	font-size:40px;padding-top:0px;position:relative;top:0px;color:#fff;
}
DIV.port-item DIV.port-filter DIV.port-id FONT.port-no {
	font-size:160px;font-family:OzoneBold;
}
DIV.port-item IMG.thumb {
	background:#000;border:0px solid #ccc;width:260px;height:auto;cursor:pointer;
}
DIV.port-item DIV.detail {
	width:240px;margin:10px;border-bottom:1px solid #ccc;padding-bottom:10px;height:130px;cursor:pointer;font-size:14px;
}
DIV.port-item DIV.detail.active {
	border:0px;border-bottom:1px solid #fff;
}
DIV.port-item DIV.detail DIV.left {
	float:left;width:50px;padding:00px;padding-right:20px;
}
DIV.port-item DIV.detail DIV.left DIV.date {
	text-align:center;background:#aaa;width:40px;height:35px;padding:5px;line-height:75%;color:#272728;font-size:25px;z-index:100;position:absolute;border:0px;/*font-family:OzoneBold;*/
}
DIV.port-item DIV.detail DIV.left DIV.date:hover,DIV.port-item DIV.detail DIV.left DIV.date.active {
	background:#fff;color:#272728;border:0px;
}
DIV.port-item DIV.detail DIV.right {
	float:left;width:170px;padding:0px;padding-left:0px;
}
DIV.port-item DIV.button_more {
	cursor:pointer;position:absolute;bottom:10px;left:10px;background:url(../../../images/mellow/mm_web_port_moreinfo_normal.png) no-repeat;width:84px;height:21px;z-index:100;border:0px;
}
DIV.port-item DIV.button_more:hover,DIV.port-item DIV.button_more.active {
	cursor:pointer;position:absolute;bottom:10px;left:10px;background:url(../../../images/mellow/mm_web_port_moreinfo_over.png) no-repeat;width:84px;height:21px;z-index:100;border:0px;
}