/************************************************************ 
 * catme.css
 * This is the CSS file for items that will remain after we
 * remove the old tabular layout
 * The idea is that eventually it will be the only CSS file
 ************************************************************/ 

/* GLOBAL */

.helpq {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: #e0e0e0;
    color: #333;
    text-align: center;
    line-height: 1.2em;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 0.9em;
    cursor: help;
    white-space: nowrap;
}

.newerror {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;

    position: relative;
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

body { 
	margin: 0; 
	padding: 0; 
	background: #ffffff top left repeat-x; 
	color: #000; 
	font: 90% arial, helvetica, sans-serif; 
	text-align: center; 
	min-width: 750px;
        margin-right: 10px;
	margin-left: 10px;
}

@media (min-width: 1000px) {
    /* Styles go here */
    body {
	margin-right: 70px;
	margin-left: 70px;
    }
    header.page {
      margin-left:-20px;
    }
    header ul.inline_list > li {
    display: inline-block;
    }
    header ul.header_links {
        float:left;
        clear:left;
        margin-top: -80px;
    }
}

@media (max-width: 1200px) {
    header img.purduelogo {
      height: 28px;
      width: 155px;
      margin-bottom: 10px;
    }
    header img.catmelogo {
      height: 45px;
      width: 164px;
    }
    header ul.header_links {
        margin-top: -40px;
        padding-left: 10px;
    }
    header ul.header_links {
      margin-top: -5px;
      font: 90% arial, helvetica, sans-serif;
    }
    header ul.inline_list > li {
        display: inline-block;
    }
}
@media (min-width: 1200px) {
    header img.purduelogo {
        margin-bottom: 20px;
    }
}

/* Page Header */
header.page {
  text-align: left;
}

header img.catmelogo {
    border: 0;
    margin-top: 0;
    padding-left: 10px;
    margin-right: 10px;
}

header img.catmelogo:hover {
    border-color: #006666;
    border-radius: 2px;
}

header img.purduelogo {
    border: 2px solid transparent;
    margin-left: 10px;
    padding-left: 14px;
}

header ul {
    list-style: none;
}

header ul.inline_list {
    padding-left:0;
    margin-bottom:0;
}


/*Create a box for the catmelogo so the other content wouldnt change when the focus border appear*/
.logobox {
	width: 300px;
  	border: 2px solid transparent;
	padding: 5px;
}
.logobox:focus {
	border: 2px solid green;
}
.logobox:hover {
	cursor: pointer;
	border: 2px solid green;
}

/*Allow specific element ignore the css code that apply to all*/
.ignore-css {
	all:unset !important;
}

>header address {
    font-style: normal;
    border: 1px solid red;
}

/* Page Content */
section.page {
    clear: both;
    text-align: left;
    text-align: start; /* not a typo - rtl translations look better */
}
main.page {
    clear: both;
    text-align: left;
    text-align: start; /* not a typo - rtl translations look better */
}

h1 { 
    font-size: 150%; 
    margin: 0 0 15px;
    padding: 3px 5px 7px;
    border-bottom: 1px solid #000000;
    color: #000000;
    text-align: left;
    text-align: start; /* not a typo - rtl translations look better */
}
h2 { padding: 20px 0px 5px; font-size: 125%; margin: 0; }
h3 { font-size: 120%; }
dl dt { margin: 0 0 1px 15px; font-weight: bold; }
dl dd { margin: 0 0 12px 30px; }
table { font-size: 100%; border: 0; }
th { 
    text-align: left;
/*  text-align: start; */ /* broken for th in Chrome 28 */
}
blockquote {font-weight:normal; border:1px #000000 solid; background:#ededed; padding:5px 20px 5px 20px; margin: 15px 25px 15px 25px; }
form { margin: 0; }
textarea { margin: 5px 0; }
select, input[type="text"], input[type="password"] { margin: 3px 0; }

/* Checkboxes and radio button will have a outline around them when hovered/tabbed on*/
input[type=checkbox]:focus, input[type=radio]:focus, input[type=checkbox]:hover, input[type=radio]:hover{ 
	outline:1.5px solid black;
}

/* LINKS */
a:not(.button):link { 
	color: #039;
	border:1.8px solid transparent;
	border-radius: 15px;
}

/* Border on links when receive focus */
a:not([name="email_link"]):not(.button):focus, a:not([name="email_link"]):not(.button):link:hover{ 
	border:1.8px solid;
	border-radius: 15px;
}

a:visited { color: #339; }

a img { border: 0; }
.nounder A {text-decoration:none}

.email_img{ 
	color: #039;
	border:1.8px solid transparent;
	border-radius: 15px;
}

.email_img:focus, .email_img:hover{
	border:1.8px solid;
}

a.backtop { display: block;
    font-size: 90%;
    text-align: right;
    text-align: end;
    margin-bottom: 10px;
}
a.warning_text { padding-left: 5px; padding-right: 5px; font-weight: bold; color: red; font-size: 80%; }
a.invisilink { color:black; text-decoration:none; }

/* COMMON, used throughout site */
.error { font-weight: bold; color: #F00; }
.warning_text { padding-left: 5px; padding-right: 5px; font-weight: bold; color: red; font-size: 80%; }
.fineprint { font-size: 80%; }
.monobutton { font-family:monospace; font-size:100%; font-weight:bold; }
.smallbutton { font-size:7pt;
	font-family:sans-serif;
	font-weight:normal;
	text-align:center;
	line-height:9pt;
	width:35px;
	white-space:nowrap;
}

/* Change the style of the small buttons on the homepage */
.dtbutton { 
	background-color: white; 
  	color: black; 
 	border: 2px solid #3767c6;
  	border-radius:5px;
	font-size:7pt;
	font-family:sans-serif;
	font-weight:normal;
	text-align:center;
	height:25pt;
	width:54px;
}

.ReminderButton {
	background-color: white; 
	color: black; 
   	border: 2px solid #3767c6;
	border-radius:5px;
 	font-size:7pt;
  	font-family:sans-serif;
  	font-weight:normal;
  	text-align:center;
  	height:25pt;
  	width:54px;
}

@-moz-document url-prefix() {
	.ReminderButton {
	  padding-left: 2.5px;
	}
  }

/* The buttons (view results & data and teams) invert color when hovered/tabbed on) */
.dtbutton:hover, .dtbutton:focus, .ReminderButton:hover, .ReminderButton:focus { 
	background-color: #3767c6;
    color: white;
}

.smalllabel { font-size:7pt; font-family:sans-serif; font-weight:normal; }
blockquote.errorbox { background:red; font-weight:bold; }
blockquote.trainingwarn { background:#bbbbff }
blockquote.trainingsuccess { background:#33ff99 }
blockquote.warning { background:#ffafaf }


div.scrollbox { white-space:nowrap; width:auto; height:9em; border:none; overflow:auto; }

div.smallbutton { cursor: pointer; }

.contextualhelp { 
	font-size:100%; 
	border: 2px solid #0161b3;
	display: inline-block; 
	background: #cbdbe9;
	position:absolute;
	padding: 2px 6px;
	margin: 2.8px;
	border-radius: 5px;
	z-index: 1;
}

/* color ramps */
.grey15 { background-color:#000000; color:white; }
.grey14 { background-color:#111111; color:white; }
.grey13 { background-color:#222222; color:white; }
.grey12 { background-color:#333333; color:white; }
.grey11 { background-color:#444444; color:white; }
.grey10 { background-color:#555555; color:white; }
.grey9 { background-color:#666666; color:white; }
.grey8 { background-color:#777777; color:white; }
.grey7 { background-color:#888888; color:white; }
.grey6 { background-color:#999999; color:black; }
.grey5 { background-color:#aaaaaa; color:black; }
.grey4 { background-color:#bbbbbb; color:black; }
.grey3 { background-color:#cccccc; color:black; }
.grey2 { background-color:#dddddd; color:black; }
.grey1 { background-color:#dddddd; color:black; }
.grey0 { background-color:#ffffff; color:black; }

.orange10 { background-color:#f5b46a; color:black; }
.orange9 { background-color:#f6bc79; color:black; }
.orange8 { background-color:#f7c388; color:black; }
.orange7 { background-color:#f8cb97; color:black; }
.orange6 { background-color:#f9d2a6; color:black; }
.orange5 { background-color:#fbdab5; color:black; }
.orange4 { background-color:#fce2c4; color:black; }
.orange3 { background-color:#fde9d3; color:black; }
.orange2 { background-color:#fef1e2; color:black; }
.orange1 { background-color:#fff8f1; color:black; }
.orange0 { background-color:#ffffff; color:black; }

.blue10 { background-color:#0161b3; color:white; }
.blue9 { background-color:#1b71bb; color:white; }
.blue8 { background-color:#3481c2; color:black; }
.blue7 { background-color:#4e91ca; color:black; }
.blue6 { background-color:#67a1d2; color:black; }
.blue5 { background-color:#81b1da; color:black; }
.blue4 { background-color:#9ac0e1; color:black; }
.blue3 { background-color:#b4d0e9; color:black; }
.blue2 { background-color:#cde0f1; color:black; }
.blue1 { background-color:#e7f0f8; color:black; }
.blue0 { background-color:#ffffff; color:black; }

.centered { text-align: center; }
.centerelt { margin-left:auto; margin-right:auto; width: 80%; }

/*BUTTONS */
.button {
    outline: none;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    overflow: visible;
    position: relative;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #000;
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 14px;
    font: bold 12px Arial,Helvetica,sans-serif;
	border: 1px solid #333;
	color: #333;

    border-radius: 20px;
    
    box-shadow: 2px 2px 2px #666666;
    -webkit-box-shadow: 2px 2px 2px #666666;
        /* For IE 8 */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=78, Color="#666666")';
        /* For IE 5.5 - 7 */
    filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=78, Color="#666666")';
}
 /*when hover on the round blue buttons, the background will change to white*/
 .button:hover, .button:focus, .primary:hover, .primary:focus{
	all: none !important;
	border: 1px solid #84d8d8;
	background: #fff;
	outline: none;
    cursor: pointer;
    display: inline-block;
    overflow: visible;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    font: bold 12px Arial,Helvetica,sans-serif;
}

.primary {
	background: none #daf2f2;
    border: 1px solid #69c8c9;
    font: bold 12px Arial,Helvetica,sans-serif;
    padding: 4px 14px;
    color: #000;
	
	background: #daf2f2; /* Old browsers */
	background: -moz-linear-gradient(top, #daf2f2 0%, #abd3ee 82%, #89c3eb 98%, #d5ebfb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daf2f2), color-stop(82%,#abd3ee), color-stop(98%,#89c3eb), 	color-stop(100%,#d5ebfb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #daf2f2 0%,#abd3ee 82%,#89c3eb 98%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #daf2f2 0%,#abd3ee 82%,#89c3eb 98%,#d5ebfb 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #daf2f2 0%,#abd3ee 82%,#89c3eb 98%,#d5ebfb 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daf2f2', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
	filter: none \0/; /* turn off above filter for IE9 as it breaks things */
	background: linear-gradient(top, #daf2f2 0%,#abd3ee 82%,#89c3eb 98%,#d5ebfb 100%); /* W3C */	
}

.secondary {
	background: none #01564c;
    border: 1px solid #06332C;
    font: bold 12px Arial,Helvetica,sans-serif;
    padding: 4px 14px;
	color: #fff;
	
	background: #01564c; /* Old browsers */
	background: -moz-linear-gradient(top, #01564c 0%, #167265 53%, #2c776c 63%, #68baae 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#01564c), color-stop(53%,#167265), color-stop(63%,#2c776c), color-stop(100%,#68baae)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #01564c 0%,#167265 53%,#2c776c 63%,#68baae 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #01564c 0%,#167265 53%,#2c776c 63%,#68baae 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #01564c 0%,#167265 53%,#2c776c 63%,#68baae 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01564c', endColorstr='#68baae',GradientType=0 ); /* IE6-9 */
filter: none \0/; /* turn off above filter for IE9 as it breaks things */
	background: linear-gradient(top, #01564c 0%,#167265 53%,#2c776c 63%,#68baae 100%); /* W3C */
}

.tertiary {
	background: none #84d8d8;
    border: 1px solid #006666;
    font: bold 12px Arial,Helvetica,sans-serif;
    padding: 4px 14px;
	
	background: #84d8d8; /* Old browsers */
	background: -moz-linear-gradient(top, #84d8d8 0%, #a7e8e8 63%, #69c8c9 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#84d8d8), color-stop(63%,#a7e8e8), color-stop(100%,#69c8c9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #84d8d8 0%,#a7e8e8 63%,#69c8c9 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #84d8d8 0%,#a7e8e8 63%,#69c8c9 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #84d8d8 0%,#a7e8e8 63%,#69c8c9 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84d8d8', endColorstr='#69c8c9',GradientType=0 ); /* IE6-9 */
filter: none \0/; /* turn off above filter for IE9 as it breaks things */
	background: linear-gradient(top, #84d8d8 0%,#a7e8e8 63%,#69c8c9 100%); /* W3C */
}

.small {
    font: bold 11px Arial,Helvetica,sans-serif;
    padding: 2px 8px;
}

.grey {
	cursor:default;
	background: #eee;
    border: 1px solid #ddd;
	color: #999;
    box-shadow: 2px 2px 2px #666666;
    -webkit-box-shadow: 2px 2px 2px #666666;
        /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=78, Color='#666666')";
        /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=78, Color='#666666');

}

a.button {
    color: #000;
}
a.primary {
    color: #000;
}

input.button {
    *margin-right: 5px;
    *margin-bottom: 10px;
    *padding-bottom: 12px;
    *overflow: visible;
    *width: 10;
    cursor: pointer
}

.inputBox:hover, .inputBox:focus{
	border: 2px solid grey;
	border-radius: 4px; 
}

.newIP:hover, .newIP:focus{
	border: 2px solid grey;
	border-radius: 4px; 
}

.grey:hover {
	cursor:default;
	background: #eee;
    border: 1px solid #ddd;
	color: #999;
	
    box-shadow: 2px 2px 2px #666666;
    -webkit-box-shadow: 2px 2px 2px #666666;
        /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=78, Color='#666666')";
        /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=78, Color='#666666');

}

button.pagination {
    float: left;
}

/* QUESTION MANAGER */
span.handle {
	margin: 0px 10px 0px 5px;
}

/* NAV BAR */
#navbar {
	position: relative;
	font: normal 12px Arial, Helvetica, sans-serif;
}

ul#list-nav {
    list-style:none;
    margin:20px;
    padding:0;
	display: inline-block;
}

ul#list-nav li {
	display:inline;
	float:left;
}

.navtab, .arrow {
	background: url(/images/nav_grid.png);
	_background: url(/images/nav_grid.gif); /* IE6 */
	background-repeat: no-repeat;
	border: none;
	z-index: 100;
	cursor:pointer;
	background-color: none;
}

.navtab {
	text-align: right;
	/* no 'text-align: end;' here as we don't translate navtabs */
	*text-align: center;  /* IE7 */
	padding: 0 15px 0 10px;
	*padding: 0 15px 0 0;  /* IE7 */
	height: 36px;
	line-height: 20px;
	margin: 0;
	font-size: 13px;
}
 
/*the font size of the navigation bar elements will change when hover/tab on*/
.navtab:hover, .navtab:focus { 
	text-decoration: underline;
	color: #006666;
}

#next:hover{
	color:#006666;
}

.arrow {
	position: relative;
	top: -3px;
	z-index: 90;
}

.left {
	width: 21px;
	height: 42px;
	background-position: right 0px;
}

.right {
	width: 21px;
	height: 42px;
	background-position: right -44px;
	position: relative;
	left: -11px;
}

.arrowp.left, .arrowp.right {
	background: url(/images/nav_grid.png);
	_background: url(/images/nav_grid.gif); /* IE6 */
	background-repeat: no-repeat;
	border: none;
	z-index: 100;
	cursor:pointer;
	background-color: none;
}

/*the left and right arrow in the navigation bar will change the background color when hover/tab on)*/
.arrowp.left:hover, .arrowp.right:hover, .arrowp.left:focus, .arrowp.right:focus, .arrow.left:hover, .arrow.right:hover, .arrow.right:focus, .arrow.left:focus{ 
	-webkit-filter: hue-rotate(250deg);
	filter: hue-rotate(250deg);
}

.arrowp.left {
	padding: 14px 10px;
	width: 20px;
	height: 40px;
	background-position: right 0px;
	position: relative;
	top:10px;
}

.arrowp.right {
	padding: 14px 10px;
	width: 10px;
	height: 40px;
	background-position: right -44px;
	position: relative;
	top:10px;
	left:-10px;
}

.arrow.right {
	z-index: 100;
}

.navtabp.current, .navtabp.next {
	background: url(/images/nav_grid.png);
	_background: url(/images/nav_grid.gif); /* IE6 */
	background-repeat: no-repeat;
	border: none;
	z-index: 100;
	background-color: none;
	position: relative;
	top:-12px;
	*position:inherit;
	*top:0px;
	text-align: right;
	padding: 0 15px 0 10px;
	*padding: 0 10px 0 10px; /* IE7 */
	height: 36px;
	line-height: 2px;
	background-position: right -88px;
}

.navtabp.current p, .navtabp.next p {
	text-align: right;
	color:#000;
	font-weight: bold!important;
	position: relative;
	top:18px;
}

.navtaba.next a {
	text-align: right;
	text-decoration: none;
	color:#000;
	position: relative;
	top:18px;
	font-weight: normal;
	white-space: nowrap;
}

.navtaba.next {
	background: url(/images/nav_grid.png);
	_background: url(/images/nav_grid.gif); /* IE6 */
	background-repeat: no-repeat;
	background-position: right -164px;
	border: none;
	z-index: 100;
	cursor:pointer;
	background-color: none;
	text-align: right;
	padding: 0 15px 0 10px;
	*padding: 0 10px 0 10px;  /* IE7 */
	height: 36px;
	line-height: 2px;
}

.navtaba.next:hover, .navtaba.next:focus{
	text-decoration: underline;
	color: #006666;
}


.navtaba.complete {
	background: url(/images/nav_grid.png);
	_background: url(/images/nav_grid.gif); /* IE6 */
	background-repeat: no-repeat;
	background-position: right -164px;
	border: none;
	z-index: 100;
	cursor:pointer;
	background-color: none;
	text-align: right;
	padding: 0 15px 0 10px;
	*padding: 0 10px 0 10px;  /* IE7 */
	height: 36px;
	line-height: 2px;
}

.navtaba.complete a {
	font: sans-serif;
	text-align: right;
	text-decoration: none;
	color:#000;
	position: relative;
	top:18px;
	font-weight: normal;
	white-space: nowrap;
}

.navtaba.unfinished {
	background: url(/images/nav_grid.png);
	_background: url(/images/nav_grid.gif); /* IE6 */
	background-repeat: no-repeat;
	background-position: right -126px;
	border: none;
	z-index: 100;
	cursor:pointer;
	background-color: none;
	text-align: right;
	padding: 0 15px 0 10px;
	height: 36px;
	line-height: 2px;
}

.navtaba.unfinished a {
	text-align: right;
	text-decoration: none;
	color:#999;
	position: relative;
	top:18px;
	font-weight: normal;
	white-space: nowrap;
}

.navtabp.complete {
	background: url(/images/nav_grid.png);
	_background: url(/images/nav_grid.gif); /* IE6 */
	background-repeat: no-repeat;
	background-position: right -164px;
	border: none;
	z-index: 100;
	cursor:text;
	background-color: none;
	text-align: right;
	padding: 0 15px 0 10px;
	height: 36px;
	line-height: 2px;
	position: relative;
	top: -12px;
}

.navtabp.complete p {
	text-align: right;
	text-decoration: none;
	color:#999;
	position: relative;
	top:18px;
	font-weight: normal;
	white-space: nowrap;
}

.navtabp.unfinished {
	background: url(/images/nav_grid.png);
	_background: url(/images/nav_grid.gif); /* IE6 */
	background-repeat: no-repeat;
	background-position: right -126px;
	border: none;
	z-index: 100;
	cursor:text;
	background-color: none;
	text-align: right;
	padding: 0 15px 0 10px;
	height: 36px;
	line-height: 2px;
	position: relative;
	top: -12px;
	*postion: inherit; /* IE7 */
        *top: 0px;
}

.navtabp.unfinished p {
	text-align: right;
	text-decoration: none;
	color:#999;
	position: relative;
	top:18px;
	font-weight: normal;
	white-space: nowrap;
}

.navtab.next {
	/* IE7 */
	*padding: 0 10px 0 0;
}


.complete {
	background-position: right -164px;
	color:#000;
}

.current {
	background-position: right -88px;
	font-weight: bold;
}
.next {
	background-position: right -88px;
}

.navtab.current:hover {
	text-decoration: none;
	color: #000;
	cursor:text;
}

.unfinished {
	background-position: right -126px;
	color:#999;
}

/* the surveypick table could be a table or a list but there is currently
   insufficent CSS support for the vertical centering that a) looks good
   and b) users expect
*/
.surveypick {
	padding-left: 10em;
	padding-right: 10em;
	/* border-width: 0px; */
}
input.surveypick {
     vertical-align: middle;
}
dt.surveypick {
    font-weight: bold;
}
dd.surveypick {
    margin-left: 0;
    padding-left: 0;
}

/* Survey Top Bar */

div.topbarbuttons {
    float: right;
}
div.bottombuttons {
    float: right;
}
table.data_table { 
    font-size: 100%; 
    border: 0;
    width: 100%;
    border-collapse: separate;
}
     /* cellspacing=1 cellpadding=1 */
table td.data_table, table th.data_table {
    padding: 1px;
}

/* for TableSorter.js */
/* "header" The CSS style used to style the header in its unsorted state. */
th.header { 
    background-image: url(/images/ts_bg.gif);     
    cursor: pointer; 
    font-weight: bold; 
    background-repeat: no-repeat; 
    background-position: center right; 
    padding-right: 20px; 
    border-right: 1px solid #dad9c7; 
    margin-left: -1px; 
    text-align: left;
} 
/* "headerSortUp" The CSS style used to style the header when sorting ascending. */
th.headerSortUp { 
    background-image: url(/images/ts_asc.gif); 
    text-align: left;
} 
/* "headerSortDown" The CSS style used to style the header when sorting descending. */
th.headerSortDown { 
    background-image: url(/images/ts_dsc.gif); 
    text-align: left;
} 

/*test css for js alert box*/
.modal {
	max-width: 100%;
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 100; /* Sit on top */
	padding-top: 15%; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	padding-bottom: 15px;
	border: 10px solid #fefefe;
	border-radius: 10px;
	height: 100px;
	padding-top: 0px;
    border-bottom-width: 10px;
    width: 500px;
  }
  
  .close:hover,.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
  }

  .modal-button:hover, .modal-button:focus{
	all: none !important;
	border: 1px solid #84d8d8;
	background: #fff;
	outline: none;
    cursor: pointer;
    display: inline-block;
    overflow: visible;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    font: bold 12px Arial,Helvetica,sans-serif;
}

.modal-button {
	float: right;
	outline: none;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    overflow: visible;
    position: relative;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #000;
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 14px;
    font: bold 12px Arial,Helvetica,sans-serif;
	border: 1px solid #333;
	color: #333;

    border-radius: 20px;
    
    box-shadow: 2px 2px 2px #666666;
    -webkit-box-shadow: 2px 2px 2px #666666;
        /* For IE 8 */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=78, Color="#666666")';
        /* For IE 5.5 - 7 */
	filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=78, Color="#666666")';	
	background: none #daf2f2;
    border: 1px solid #69c8c9;
    font: bold 12px Arial,Helvetica,sans-serif;
    padding: 4px 14px;
    color: #000;
	
	background: #daf2f2; /* Old browsers */
	background: -moz-linear-gradient(top, #daf2f2 0%, #abd3ee 82%, #89c3eb 98%, #d5ebfb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daf2f2), color-stop(82%,#abd3ee), color-stop(98%,#89c3eb), 	color-stop(100%,#d5ebfb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #daf2f2 0%,#abd3ee 82%,#89c3eb 98%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #daf2f2 0%,#abd3ee 82%,#89c3eb 98%,#d5ebfb 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #daf2f2 0%,#abd3ee 82%,#89c3eb 98%,#d5ebfb 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daf2f2', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
	filter: none \0/; /* turn off above filter for IE9 as it breaks things */
	background: linear-gradient(top, #daf2f2 0%,#abd3ee 82%,#89c3eb 98%,#d5ebfb 100%); /* W3C */	
} 

.alert-header {
	text-align: left;
	font-size: 150%;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 10px;
}

.alert-word {
	  text-align: left;
	  font-size: 100%;
  }
  
.nv_lk{
	border: 2px;
	background-color: transparent;
	padding-top: 11px;
	font:bold 12px Arial;
}
.autocomplete {
	position: relative;
	display: inline-block;
}
.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 1000;
	font-size: 12px;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 300px;
	overflow-x: hidden; 
	overflow-y: auto; 
}
.autocomplete-items div {
	padding: 5px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover, .autocomplete-active {
	background-color: #e9e9e9 !important;
}