body 
{
    background-color:#ffffff; 
    color:#555555;
    font-family:Arial;
}
a 
{
    color:#333333;
} 
a:visited 
{
    color:#333333;
}
#wrapper
{
background-color: #f0e8c5;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
}
#container-head 
{
    width:800px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    background-color: #f0e8c5;
}
#container-body 
{
    width:800px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    background-color: #ffffff;
}
#wrapper-login
{
background-color: #ffffff;
}
#container-head-login 
{
    width:803px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    background-color: #f0e8c5;
}
#container-body-login 
{
    width:803px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    background-color: #ffffff;
    text-align:center;
}
.ex-grid
{
    padding: 3px;   
}
.ex-grid thead td
{
    background-color: #666666;
    color: #FFFFFF;   
    padding: 5px;
    font-weight:bold;
    font-size: 13px;
}
.ex-grid tbody td
{
    background-color: #FFFFFF;
    color: #000000;  
    font-size: 13px;
    border-left: 1px solid #808080;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    font-weight:bold;
    padding:4px;
}
.ex-grid tbody.task-overdue td
{
    color:Red;
    background-color:#f2f2f2;
}
.ex-grid tbody.task-almost-overdue td
{
    background-color:Yellow;
}
.ex-grid tbody.task-ontime td
{
    color:Green;
    background-color:#f2f2f2;
}
.ex-grid tbody td a
{
    color:#0079C2;
}
.ex-grid tbody td a:visited
{
    color:#0079C2;
}
.ex-grid thead td a
{
    color:#fff;
    text-decoration:none;
}
.ex-grid thead td a:visited
{
    color:#fff;
    text-decoration:none;
}

/****** WARP SHADOW ******/

.WarpShadow {
    position: relative;
	-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
	box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
}

.WarpShadow:before, .WarpShadow:after {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 15px;
	-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);	
}

.WarpShadow:before {
	  right: 10px;
	  -moz-transform: rotate(4deg) skew(4deg);
	  -webkit-transform: rotate(4deg) skew(4deg);
	  -o-transform: rotate(4deg) skew(4deg);
	  transform: rotate(4deg) skew(4deg);	  			  
}

/**  'smallBox' class for boxes with width between 150px - 350px  **/
.smallBox.WarpShadow:before {
	  -moz-transform: rotate(8deg) skew(4deg);
	  -webkit-transform: rotate(8deg) skew(4deg);
	  -o-transform: rotate(8deg) skew(4deg);
	  transform: rotate(8deg) skew(4deg);	  			  
}
	
.WarpShadow:after {
	  left: 10px;
	  -moz-transform: rotate(-4deg) skew(-4deg);
	  -webkit-transform: rotate(-4deg) skew(-4deg);
	  -o-transform: rotate(-4deg) skew(-4deg);
	  transform: rotate(-4deg) skew(-4deg);
}

.smallBox.WarpShadow:after {
	  -moz-transform: rotate(-8deg) skew(-4deg);
	  -webkit-transform: rotate(-8deg) skew(-4deg);
	  -o-transform: rotate(-8deg) skew(-4deg);
	  transform: rotate(-8deg) skew(-4deg);
}