﻿/*
	Name:
	Date: March 2010
	Description: Layout for
	Version: 1.0
*/

/* Imports */
@import url("reset.css");

/***** Global *****/
/* Body */
body {
	background: url(../assets/body_bg.jpg) repeat left top !important;
	color: #323232;
	font-size: 12px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height: 17px;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* Headings */
h2 {font-size: 22px}
h3 {font-size: 20px}
h4 {font-size: 18px}
h5 {font-size: 16px}
h6 {font-size: 14px}

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 16px;
	margin-bottom: 5px;
}

/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
	color: #000;
	text-decoration: underline;
}
a:hover, a:active {
	color: #bb0909;
}

/* Paragraphs */
p {margin-bottom: 10px;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

/* Lists */
ul {
	list-style: outside disc;
	margin: 1em 0 1.5em 1.5em;
}

ol {
	list-style: outside decimal;
	margin: 1em 0 1.5em 1.5em;
}

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* Tables */
 
table {margin: .2em auto .2em auto; width: 99%;}

 
	thead th {padding: .2em .2em; text-align: left;}
	thead td {}

 
	tbody td {padding: .2em .2em;}
	tbody th {}

	tbody .alt td {}
	tbody .alt th {}

 
	tfoot th {}
	tfoot td {}


.clear {
	clear: both;
	height: 1px;
	overflow: hidden;
}	
	
	

#wrapper {
	width: 1100px;
	margin: 0 auto;
}

#header {
	height: 228px;
	position: relative;
}

#header .logo {
	position: absolute;
	top: 58px;
	left: 18px;
}

#header .moduletable-image {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

#header .moduletable-topmenu {
	position: absolute;
	top: 200px;
	left: 17px;
}

#header .moduletable-topmenu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#header .moduletable-topmenu ul li {
	float: left;
	background: url(../assets/topmenu_li_bg.png) no-repeat left center;
	padding: 5px 5px;
}

#header .moduletable-topmenu ul li.item1 {
	background: none;
	padding: 5px 5px 0px 0px;
}

#header .moduletable-topmenu ul li a:link,
#header .moduletable-topmenu ul li a:visited,
#header .moduletable-topmenu ul li a:active {
	text-decoration: none;
	color: #000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

#header .moduletable-topmenu ul li a:hover {
	text-decoration: underline;
}

#menu {
	background: url(../assets/menu_bg.jpg) repeat-x left top;
	height: 61px;
	line-height: 61px;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu ul li {
	float: left;
	background: url(../assets/menu_li_border.jpg) no-repeat left center;
	padding: 0 1px;
}

#menu ul li.item1 {
	background: none;
	padding: 0 0px 0 6px;
}

#menu ul li a:link,
#menu ul li a:visited,
#menu ul li a:active {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
	padding: 0 12px;
	text-decoration: none;
}

#menu ul li a:hover {
	text-decoration: none;
}

	/* Resources Dropdown Menu Styles */
	#menu ul li.has-dropdown {
		position: relative;
	}

		/* Show dropdown on hover */
		#menu ul li.has-dropdown:hover .dropdown-menu {
			display: block;
		}

	/* Dropdown container */
	#menu ul li .dropdown-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #c30919;
		border: 1px solid #a00815;
		border-top: none;
		z-index: 1000;
		min-width: 160px;
		box-shadow: 0 3px 8px rgba(0,0,0,0.15);
		border-radius: 0 0 5px 5px;
		overflow: hidden;
		line-height: 1.2;
	}

		/* Reset list */
		#menu ul li .dropdown-menu ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

			/* List items */
			#menu ul li .dropdown-menu ul li {
				float: none;
				border-bottom: 1px solid rgba(255,255,255,0.1);
			}

				/* Remove last border */
				#menu ul li .dropdown-menu ul li:last-child {
					border-bottom: none;
				}

				/* Dropdown link styles (tight vertical padding) */
				#menu ul li .dropdown-menu ul li a {
					display: block;
					padding: 12px 14px; /* ↓ Reduced from 10px → 6px */
					color: #fff;
					text-decoration: none;
					font-size: 13px;
					font-weight: 500;
					background-color: #c30919;
					transition: all 0.2s ease-in-out;
					line-height: 1.3;
				}

					/* Hover */
					#menu ul li .dropdown-menu ul li a:hover {
						background-color: #a00815;
						padding-left: 18px; /* slight slide on hover */
					}


	/* Arrow indicator */
	#menu ul li.has-dropdown > a:after {
		content: " ▼";
		font-size: 10px;
		margin-left: 4px;
		vertical-align: middle;
	}

	/* Prevent wrapping */
	#menu ul li.has-dropdown .dropdown-menu {
		white-space: nowrap;
	}



/* Mobile responsiveness for dropdown */
@media (max-width: 768px) {
	#menu ul li .dropdown-menu {
		position: static;
		display: none;
		width: 100%;
		box-shadow: none;
		border: none;
		background-color: #a00815;
	}

	#menu ul li.has-dropdown:hover .dropdown-menu {
		display: block;
	}
}

#container {
/*	background: url(../assets/container_bg.jpg) repeat-y left top;*/
    background-color: #EBEBEB;
	width: 1100px;		
	padding: 5px 0 0 0px;
	margin-bottom: 15px;
}
 

#containerbig {
	width: 1080px;		
	padding: 10px 10px 10px 10px;
	margin-bottom: 15px;
	background-color:White;
}

#leftCol 
{
	width: 188px;
	padding: 10px 10px 0 10px;
	float: left;
}

#leftCol .moduletable-login {
	width: 188px;
	text-align: center;
}

#leftCol .moduletable-login h3 {
	background: #b7b3a7;
	color: #fff;
	height: 33px;
	line-height: 33px;	
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 10px;
}

#leftCol .moduletable-login .inputwrapper {
	width: 130px;
	margin: 0 auto;
	padding:0px;
}

#leftCol .moduletable-login .inputwrapper1 {
	width: 200px;
	margin: 0 auto;
	font-size: 11px;
	font-weight: bold;
	color: #666666;
	float: left;
}

#leftCol .moduletable-login .inputwrapper label {
	/*background: url(../assets/label_bg.jpg) no-repeat left center;*/
	padding-left: 15px;
	font-size: 11px;
	font-weight: bold;
	color: #666666;
	float: left;
	margin: 0 0 5px 20px;
}

.helpimage {
	background: url(../assets/label_bg.jpg) no-repeat left center;
	float: left;
	
}
 
#leftCol .moduletable-login .inputwrapper .inputbox {
	width: 124px;	
	border: 1px solid #7f9db9;
	font-size: 12px;
	color: #000;
	padding: 2px;
	float: left;
	text-align: center;
} 

#leftCol .moduletable-login .checkwrapper {
	font-size: 11px;
	color: #000;
	width: 130px;
	margin: 0 auto;
	padding:5px;
	text-align: center;
}

#leftCol .moduletable-login .buttonwrap {
	padding-bottom: 16px;
	text-align: center;
}
 
 
 
 
#leftCol .moduletable-login .buttonwrap .login {
	background: url(../assets/button_login.jpg) no-repeat left top;
	width: 74px;
	height: 18px;
	border: none;
	color: #fff;
	font-size: 11px;
	padding-bottom: 2px;
	cursor: pointer;
	text-align:center;
	vertical-align:top;
}

#leftCol .moduletable-login a:link,
#leftCol .moduletable-login a:visited,
#leftCol .moduletable-login a:active {
	text-decoration: none;
	color: #8c3318;
	font-size: 12px;
}

#leftCol .moduletable-login a:hover {
	text-decoration: underline;
}

#leftCol .moduletable {
	width: 168px;
	padding: 0 10px;
}

#leftCol .moduletable h3 {
	background: #b7b3a7;
	color: #fff;
	height: 33px;
	line-height: 33px;	
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	margin: 0 -10px 10px -10px;
}

#contentCol {
	width: 890px;	
	float: left;
	background-color:White;
}

#content {
	width: 860px;
	padding: 10px 10px 25px 10px;	
}

.contentheading, .componentheading {
	color: #323232;
	font-family: Verdana,Geneva,Arial,helvetica,sans-serif;
	font-size: 18px;
	padding-bottom: 19px;
}

#content ul,
#content ol {
	list-style: none;
	margin: 0px;
	padding: 0 0 10px 0px;
}

#content ul li,
#content ol li {
	font-size: 12px;
	color: #5b0a99;
}

#bottom {
	width: 830px;
	padding: 22px 30px 30px 30px;
	background: #171717;
	vertical-align:bottom;
	margin:0px 0px 0px 0px; 
}

#bottom .moduletable {
	width: 207px;
	float: left;
	font-size: 11px;
	color: #fff;
	margin-right: 55px;
}

#bottom .moduletable.last {
	float: right;
	margin-right: 0px;
}

#bottom .moduletable h3 {
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	padding-bottom: 20px;
	margin-bottom: 0px;
}

#bottom .moduletable h3 span {
	font-size: 21px;
}

#bottom .moduletable a:link,
#bottom .moduletable a:visited,
#bottom .moduletable a:active {
	text-decoration: none;
	color: #ffb743;
	font-size: 11px;
}

#bottom .moduletable a:hover {
	text-decoration: underline;
}

#footer {
	width: 1100px;
	padding-bottom: 20px;
}

#footer .moduletable {
	width: 1100px;
	color: #2d2d2d;
}

#footer .moduletable h5 {
	/*float: left;*/
	font-size: 11px;
	padding: 0px 8px;
	margin-bottom: 0px;
	text-align:center;
}

#footer .moduletable ul 
{
	list-style:none outside none;
	margin: 0px;
	padding: 0px;
	text-align:center;
}

#footer .moduletable ul li {
	background: url(../assets/footer_li_bg.jpg) no-repeat left center;
	/*float: left;*/
	display:inline;
	padding: 0 5px;
}

#footer .moduletable ul li.item1 {
	background: none;
}

#footer .moduletable ul li a:link,
#footer .moduletable ul li a:visited,
#footer .moduletable ul li a:active {
	font-size: 11px;
	color: #2d2d2d;	
	padding: 0px 5px;
	text-decoration: none;
}

#footer .moduletable ul li a:hover {
	text-decoration: underline;
}

.ErrorMsg
{
	color:Red;
}


.asterisk
{
	color:Red;
	vertical-align:middle;
}

.smallalert
{
    	font-family:Arial, Verdana, Geneva, Helvetica, sans-serif !important;
	font-size:10px !important;
	color:Red;
	vertical-align:middle;
	font-weight:normal;
}

.gridsmallalert
{
    font-family:  Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size:10px;
	color:White;
	vertical-align:middle;
}

.formoverviewicon
{
	vertical-align:middle;
}
   
.notehead
{
	font-family: "Trebuchet MS", Arial, Verdana;
	font-size:11px;
    color:Red;
    font-weight:bold;
}

.note
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:11px;
}

.notebox
{
	border:1px;
	border-color:Black;
	border-style:solid;
	border-width:1px;
	padding:5px;
}
    
/* ---------------------- red theme--------------- start -------------- */

.gridHeader {
	background-image: url(../assets/grid_header.gif);
	background-repeat: repeat-x;
	color: #FFFFFF;
	height: 26px;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 26px;
	font-weight: bold;
}

.gridHeaderLeft 
{
	background-image: url(../assets/grid_header.gif);
	background-repeat: repeat-x;
	color: #FFFFFF;
	padding-left: 4px;
	padding-right: 4px;
	height: 26px;
	font-weight: bold;
	text-align:left;
}

.gridLine {
	background-color: #BA9453;
	border-top-width: 2px;
	border-right-width: 0px;
	border-bottom-width: 2px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #FCC587;
	border-bottom-color: #FCC587;
	height: 3px;
	line-height: 3px;
}
.gridTdBg {
	background-image: url(../assets/grid_td_bg.gif);
	background-repeat: repeat-x;
	height: 24px;
	padding-right: 4px;
	padding-left: 4px;
	color:#000000;
	/*color: #9F0000;*/
}
.gridPager {
	background-image: url(../assets/grid_pager.gif);
	background-repeat: repeat-x;
	padding-right: 20px;
	padding-left: 20px;
	height: 30px;
	line-height: 30px;
	color: #9F0000;
}

/* ---------------------- red theme--------------- end -------------- */
/* ---------------------- grey theme--------------- start -------------- */


.gridHeader_g {
	background-image: url(../assets/grid_header_g.gif);
	background-repeat: repeat-x;
	padding-left: 20px;
	padding-right: 20px;
	height: 26px;	
	
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size:11px;
	font-weight: bold;
	color:#FFFFFF;
	text-decoration:none;
	text-align:left;
}

.gridHeaderLeft_g
{
	background-image: url(../assets/grid_header_g.gif);
	background-repeat: repeat-x;
	height: 26px;

	/*font-family: Arial,Verdana, Helvetica, sans-serif;*/
	font-size:11px;
	font-weight: bold;
	color:#FFFFFF;
}

.gridHeaderLeft_g a {
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

.gridLineG {
	background-color: #BA9453;
	border-top-width: 2px;
	border-right-width: 0px;
	border-bottom-width: 2px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #FCC587;
	border-bottom-color: #FCC587;
	height: 3px;
	line-height: 3px;
}

.gridTdBgG {
	background-image: url(../assets/grid_td_bg_g.gif);
	background-repeat: repeat-x;
	height: 24px;
	padding-right: 4px;
	padding-left: 4px;
	color: #000000;
}

.gridTdBgGGreyOut {
	background-image: url(../assets/grid_td_bg_g.gif);
	background-repeat: repeat-x;
	height: 24px;
	padding-right: 4px;
	padding-left: 4px;
	color: #939393;
}

.gridTdBgG a {
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}

.gridTdBgG a:hover {
	font-weight: bold;
	color: #000000;
	text-decoration: underline;
}
.gridPagerG {
	background-image: url(../assets/grid_pager_g.gif);
	background-repeat: repeat-x;
	padding-right: 20px;
	padding-left: 20px;
	height: 30px;
	line-height: 30px;
	color: #000000;
}

.gridPagerG a {
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}

.gridPagerG a:hover {
	font-weight: bold;
	color: #000000;
	text-decoration: underline;
}

/* ---------------------- grey theme--------------- end ------------ */


A.PDFHelpLink:active,A.PDFHelpLink:visited,A.PDFHelpLink:link
{
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#980000;
	text-decoration:none;
}
A.PDFHelpLink:hover{
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#980000;
	text-decoration:underline;
}

.inputCapitalize
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
    color:Black;
    font-weight:normal;
    text-transform:capitalize;
}

.inputHeight
{
	Height:15px;
}
 
 
 
 
 
 
 .et h1 {
    font-size: 1.2em;
    margin-bottom: 15px;
}

.et h2 {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
}

.et h3 {
    font-size: 1.0em;
    font-weight: bold;
    margin-bottom: 15px;
}

.et .tabs > a {
    display: block;
    float: left;
    padding: 15px;
    background-color: #888;
    color: #fff;
    text-decoration: none;
}

.et .tabs > a.active {
    background-color: #cc0000;
    font-weight: bold;
}

.et .tabs > a:hover {
    text-decoration: underline;
}

.et .panels {
    border: 2px solid #cc0000;
    padding: 15px;
}
        
.et label {
    font-weight: bold;
}

.et a.btnlg {
    background-color: #cc0000;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
}

.et a.btnlg:hover {
    text-decoration: underline;
}

.et a.btnback {
    text-decoration: none;
    margin-right: 15px;
    display: inline-block;
}

.et .row {
    margin-bottom: 15px !important;
}
 
.et ul,
.et ul li {
    color: #323232 !important;
}

.et ul {
    padding: 0 !important;
    margin: 0 !important;
}

.et ul li {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 15px !important;
}


/* resource tab css */

table#CatoResourceTab   {
	border: 0px !important;
}

table#CatoResourceTab table {
	border: 0px !important;
}

table#CatoResourceTab p {
	margin-bottom: 10px !important;
}

table#CatoResourceTab td {
	padding: 0px !important;
	border: 0px !important;
}

table#CatoResourceTab tbody td {
	padding: 0px !important; 
}


 

.catotabcontent table {
	border: 0px !important;
}

.catotabcontent p {
	margin-bottom: 10px !important;
}

.catotabcontent td {
	padding: 0px !important;
	border: 0px !important;
}

.catotabcontent tbody td {
	padding: 0px !important;
}

/* ==============================
           CATO Custom Modal Popup Styles
           ============================== */

.cato-modal-overlay {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.45);
	backdrop-filter: blur(2px);
}

.cato-modal-content {
	background-color: #fff;
	margin: 8% auto;
	border-radius: 10px;
	width: 90%;
	max-width: 520px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	animation: cato-fade-slide 0.35s ease-out;
	border-top: 4px solid #c8102e;
}

@keyframes cato-fade-slide {
	from {
		transform: translateY(-30px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.cato-modal-header {
	padding: 18px 24px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #ddd;
	position: relative;
}

	.cato-modal-header h2 {
		margin: 0;
		font-size: 20px;
		color: #333;
		font-weight: 600;
	}

	.cato-modal-header.warning h2 {
		color: #c8102e;
	}

	.cato-modal-header.error h2 {
		color: #d32f2f;
	}

.cato-modal-body {
	padding: 28px 26px;
	font-size: 15px;
	line-height: 1.6;
	color: #333;
}

.cato-modal-footer {
	padding: 14px 26px;
	background-color: #fafafa;
	border-top: 1px solid #ddd;
	text-align: right;
}

.cato-modal-btn {
	background-color: #c8102e;
	color: #fff;
	padding: 10px 26px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	transition: all 0.25s ease;
}

	.cato-modal-btn:hover {
		background-color: #a10e25;
	}


/* ==============================
           CATO Custom Modal Popup Styles
           ============================== */
.cato-modal-overlay {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.45);
	backdrop-filter: blur(2px);
}

.cato-modal-content {
	background-color: #fff;
	margin: 8% auto;
	border-radius: 10px;
	width: 90%;
	max-width: 520px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	animation: cato-fade-slide 0.35s ease-out;
	border-top: 4px solid #c8102e; /* Cato Red */
}

@keyframes cato-fade-slide {
	from {
		transform: translateY(-30px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* ---------- Header ---------- */
.cato-modal-header {
	padding: 18px 24px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #ddd;
	position: relative;
}

	.cato-modal-header h2 {
		margin: 0;
		font-size: 20px;
		color: #333;
		font-weight: 600;
	}

	.cato-modal-header.warning h2 {
		color: #c8102e; /* Cato Red for warnings */
	}

	.cato-modal-header.error h2 {
		color: #d32f2f; /* Darker red for errors */
	}

.cato-modal-close {
	position: absolute;
	top: 14px;
	right: 20px;
	font-size: 26px;
	color: #888;
	cursor: pointer;
	transition: color 0.2s ease;
}

	.cato-modal-close:hover {
		color: #333;
	}

/* ---------- Body ---------- */
.cato-modal-body {
	padding: 28px 26px;
	font-size: 15px;
	line-height: 1.6;
	color: #333;
}

/* ---------- Footer ---------- */
.cato-modal-footer {
	padding: 14px 26px;
	background-color: #fafafa;
	border-top: 1px solid #ddd;
	text-align: right;
}

.cato-modal-btn {
	background-color: #c8102e;
	color: #fff;
	padding: 10px 26px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	transition: all 0.25s ease;
}

	.cato-modal-btn:hover {
		background-color: #a10e25;
	}

