/* quirksmode fix */
* {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing:     border-box;
    box-sizing:        border-box;
}

/* Global Body Style */

body
{
	FONT-FAMILY: Arial;
	BACKGROUND-COLOR: #f0f2f5;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

/* Fix for the inputs always being focused after clicking - Nasty... */

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.generatedJsButton:hover {
    outline: 0;
}

input[type=button]{
    white-space:normal;
    vertical-align: middle;
}

button {
    white-space:normal;
    vertical-align: middle;
}

/* Main Table */

.page-table
{		
	background-color:#FFFFFF;
	border: 0px;
	width: 100%;	
}

html,body,table#table100 {
	height:100%;
	width:100%;
} 

html,body,table#table101 {
	height:100%;
	width:100%;
} 

/* Header */
.header-table-main
{
	background-color:#DDDDDD;	
	width:100%;	
}

.header-table-highlight 
{
	background-color:#6599ff;
	height:	6px;
	width:100%;	
}

.header-table-header
{
	FONT-SIZE: 34px;
	background-color:#3289E1;
	height:87px;
	vertical-align:top;	
	width:307px;
}

.header-table-space
{
	FONT-SIZE: 34px;
	background-color:#3289E1;	
	vertical-align:top;		
}

.header-table-opt
{
	FONT-SIZE: 34px;
	background-color:#3289E1;	
	vertical-align:top;		
	width:150px;
	text-align:right;
}

/* Right Hand Options (Header) */

.opt-table 
{
	width:110px;	
}

/* Navigator Style */

.navigator-nav
{
	height:22px;
	font-size:14px;
	FONT-STYLE: italic;
	background-color: #b9d8f7;		
	background-image: url(../resources/gfx/location.jpg);	
	background-repeat:no-repeat;
	border-top: #d0e2f6 1px solid;
	border-bottom: #7a92aa 1px solid;
	
}

.navigator-space 
{
	height:22px;
	width:220px;	
}

.navigator-end 
{
	width:0%;
	height:22px;	
}

/* Header-Body Spacer */

.spacer
{
	HEIGHT: 22px;
	BACKGROUND-COLOR: #ffffff;
}

.spacer-button 
{
	width:212px;
}


/* Main Body Styles */

.body-table-main 
{
	width: 100%;
	height:400px;	
}

.body-table-content 
{
	BACKGROUND-COLOR: #FFFFFF;
}

/* Side Bar Styles */

.sidebar-main 
{
	width:0px;
	BACKGROUND-COLOR: #ffffff;
}

.sidebar-header-tr 
{
	BORDER-RIGHT: #dddddd 1px outset;
	BORDER-TOP: #dddddd 1px outset;
	BORDER-LEFT: #dddddd 1px outset;
	BORDER-BOTTOM: #dddddd 1px outset;
	BACKGROUND-COLOR: #dddddd;
	TEXT-ALIGN: center;
}

.sidebar-content-tr 
{
	BORDER-RIGHT: #f0f2f5 1px outset;
	BORDER-TOP: #f0f2f5 1px outset;
	FONT-WEIGHT: bold;
	FONT-SIZE: 12px;
	BORDER-LEFT: #f0f2f5 1px outset;
	BORDER-BOTTOM: #f0f2f5 1px outset;
	BACKGROUND-COLOR: #f0f2f5;
}

/* Footer Styles */

.footer-main 
{
	FONT-SIZE: 12px;
	BACKGROUND-COLOR: #ffffff;
	TEXT-ALIGN: center;	
}

.footer-hr 
{
	COLOR: #aaaaaa;
	HEIGHT: 1px;
	BACKGROUND-COLOR: #aaaaaa;
}

.footer-info-main 
{
	FONT-SIZE: 12px;
	width: 500px;
	margin: auto;
}

.footer-info-tr
{
	FONT-SIZE: 12px;
	text-align:center;
}

.footer-info-td
{
	width: 25%;
}

.footer-info-copyright 
{
	COLOR: #888888;
	text-align:center;
}

.popup-div 
{
	visibility:hidden;
	position:absolute;
	top:1px;
	left:1px;
	border: 1px solid #AAAAAA;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	z-index:1000;
}

.popup-table 
{
	font-size:12px;
	font-weight:bold;
	border:0px;
	border-style:solid;
	border-color:#f0f2f5;
}

.popup-item 
{
	font-size:12px;
	background-color: #FFFFFF;
    cursor: pointer;
	color:#000000;
	text-decoration: none;	
	border:2px;
	border-style:solid;
	border-color:#FFFFFF;
}

.popup-link 
{
	font-size:12px;
	color:#000000;
	font-weight:bold;
	text-decoration:none;	
    width: 100%;
}

.table-generic-header
{
	background-color:#dddddd;
}

.table-generic-content
{
	background-color:#f0f2f5;
}

.warningbanner-table 
{
	width:400px;
	text-align:center;
	border-color: #AAAAAA;
	border: 1px solid;
	background-color: #f0f2f5;
}

.warningbanner-table.TR
{	
	text-align:center;
	border-color: #AAAAAA;
	border: 1px solid;
	background-color: #FF0000;
}

a, .link
{	
	color: #0000EE;	
	text-decoration: none;
}

a:hover, .link:hover
{	
	color: #EE0000;	
	text-decoration: none;
}

.default-surround-style
{
	width:100%;
	background-color: #f0f2f5;
	border: 1px solid;
	border-color: #bbc0c5;
}

.default-inner-style
{
	background-color: #f8fafc;
	border: 1px solid;
	border-color: #bbc0c5;
}

.default-surround-style-body
{
	width:100%;
	background-color: #FFFFFF;
	border: 1px solid;
	border-color: #bbc0c5;	
}

.default-surround-style-nowidth
{
	background-color: #f0f2f5;
	border: 1px solid;
	border-color: #bbc0c5;
}

.permitview-top-left 
{
	background-image: url(../resources/gfx/surroundcurves/topleft.jpg);
	background-repeat: no-repeat;	
	width:20px;
	height:20px;
}
.permitview-top-mid
{
	background-color: #f0f2f5;
}
.permitview-top-right
{
	background-image: url(../resources/gfx/surroundcurves/topright.jpg);
	background-repeat: no-repeat;	
	width:20px;
	height:20px;	
}
.permitview-mid-left 
{
	background-color: #f0f2f5;
	width:20px;
}
.permitview-mid-mid
{
	background-color: #f0f2f5;
}
.permitview-mid-mid iframe
{
	background-color: #ffffff;
}
.permitview-mid-right
{
	background-color: #f0f2f5;
	width:20px;	
}
.permitview-bot-left 
{
	background-image: url(../resources/gfx/surroundcurves/botleft.jpg);
	background-repeat: no-repeat;	
	width:20px;
	height:20px;
}
.permitview-bot-mid
{
	background-color: #f0f2f5;
}
.permitview-bot-right
{
	background-image: url(../resources/gfx/surroundcurves/botright.jpg);
	background-repeat: no-repeat;		
	width:20px;
	height:20px;	
}

/*CheckBoxlist styles, used in electricalisolationstemplatefx*/
.checklist {
    border: 1px solid #ccc;
    list-style: none;
    height: 15em;
    overflow:auto;
    width: 35em;
}

.checklist, .checklist li { margin: 0; padding: 0; }

.checklist label {
    display:inline;
    height: 1%;
    padding-left: 25px;
    text-indent: -25px;
}

.checklist label:hover { background: #777; color: #fff; }

/* USER SUMMARY TABLE */

	.user_summary_table { margin:2px; font-family:tahoma; font-size:10pt; cursor:pointer; }
	.user_summary_row { padding:3px; background-color:#FFFFFF; }
	.user_summary_alternate_row { padding:3px; background-color:#E0E0E0; }
	.user_summary_header_row { padding:3px; background-color:#bbc0c5; font-weight:bold; }
	.user_summary_title { padding:3px;font-weight:bold;background-color:#505050;color:#FFFFFF;text-align:center; }
	.user_summary_subheader { color:#fff; padding:3px; background-color:#0000DD; font-weight:bold; }
	
	
.createDocumentPopup 
{
	background-color:#FFFFFF;
	padding:5px;
}	
.rapButtons 
{
	border:1px solid #bbc0c5;
	background-color:#E0E0E0;
	padding:5px;
	text-align:right;
	margin-top:5px;
}

.rapRouting
{
	width: 100%;
	height: 25px;
	font-family: Arial;
	font-size: 14px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 6px;
}

.rapStatusTable
{
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

.bold
{
	font-weight: bold;
}

.fiftypercent
{
	width: 50%;
}

/* PRINTING */

@media print {
    .noprint { display: none; }
}

/* Moved from rap.aspx */
#gradientImage{
	behavior:	 url("../css/pngbehavior.htc");
}

/* Dynamic documents - for future use too */
.radaddbutton {
	display: inline-block;
	width: 16px;
	height: 16px;
	position: relative;
	cursor: pointer;
    background-image: url('../resources/gfx/add16.png');
    background-repeat: no-repeat;
}

.closechildren {
    width:12px;
    height:12px;
    border:solid 1px black;
    margin-left:12px;
    position:relative;
    top:-17px;
}

.radremovebutton {
	display: inline-block;
	width: 16px;
	height: 16px;
	position: relative;
	left: -18px;
	margin-right: -16px;
	cursor: pointer;

	background-image: url('../resources/gfx/remove16.png');
    background-repeat: no-repeat;
}

#visReqProperties p{
    margin: 0.5em;
}

#visReqProperties #statusfield{
    font-size:smaller;
}

#statusbuttons{
    font-size:smaller;
    margin-left: 5px;
}

#statusbuttons input{
    height: 22px;
}

.dialog-table-fieldname{
	background-color: #e0e0e0;
	font-weight: bold;
	padding: 0px 5px;
	text-align: right;
    font-size: smaller;
}

.importantlink {
    border-radius: 0.25em;
    color: #FFFFFF;
    display: inline;
    line-height: 1;
    padding: 0.1em 0.25em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
    margin-right: 0.25em;
    cursor: pointer;
}
.importantlink:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
.importantlink.negative {
    background-color: #D9534F;
}
.importantlink.positive {
    background-color: #5CB85C;
}
.importantlink.neutral {
    background-color: #428BCA;
}

/* START OF TOAST CSS */

/* Don't make changes to the toast CSS here, modify the toaster.less file and copy the compiled changes */
#toastrack {
  *border-right: 2px solid #555555;
  *border-bottom: 2px solid #555555;
  width: 100%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.1) inset;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
}
#toastrack:before {
  position: absolute;
  width: 100%;
  height: 80%;
  border-radius: 0.1px;
  z-index: -1;
  top: 10%;
  bottom: 10%;
  content: "";
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
#toastsurround {
  margin: 1em auto;
  text-align: center;
  width: 50%;
  position: fixed;
  /* UNCOMMENT BELOW AFTER COMPILING */
  _position: absolute;
  _top: expression(eval(document.body.scrollTop));
  top: 0;
  left: 25%;
  z-index: 50000;
}
.toastside {
  padding: 1.5em 1em;
  position: relative;
  *width: 100%;
}
.toastside:first-child {
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.toastside:last-child {
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.toastside.warning {
  border-left: 0.75em solid #d48e00;
  color: black;
  background-color: #fefbbc;
  text-shadow: 0px 1px #fffddf;
}
.toastside.warning strong {
  color: #d48e00;
}
.toastside.warning .toastclose {
  color: #d48e00;
}
.toastside.error {
  border-left: 0.75em solid #be0c0c;
  color: black;
  background-color: #fcc6c6;
  text-shadow: 0px 1px #fee8e8;
}
.toastside.error strong {
  color: #be0c0c;
}
.toastside.error .toastclose {
  color: #be0c0c;
}
.toastside.info {
  border-left: 0.75em solid #2850c1;
  color: black;
  background-color: #dbecff;
  text-shadow: 0px 1px #ffffff;
}
.toastside.info strong {
  color: #2850c1;
}
.toastside.info .toastclose {
  color: #2850c1;
}
.toastside.success {
  border-left: 0.75em solid #258815;
  color: black;
  background-color: #c5ffbb;
  text-shadow: 0px 1px #e3ffdf;
}
.toastside.success strong {
  color: #258815;
}
.toastside.success .toastclose {
  color: #258815;
}
.toastside.major {
  border-style: solid;
  border-color: white;
  border-width: 1px 1px 1px 0.75em;
  color: white;
  background-color: #be0c0c;
  text-shadow: 0px 1px #7b0808;
}
.toastside.major .toastclose {
  color: #fcc6c6;
}
.toastside strong {
  margin-right: 0.25em;
}
.toastside.closeable {
  padding-right: 20px;
}
button.toastclose {
  margin: 0;
  position: absolute;
  right: 2px;
  top: 2px;
  *top: 0px;
  line-height: 1em;
  float: right;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 1px 0 #FFFFFF;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 0 none;
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  width: 1em;
}

/* END OF TOAST CSS */

.iconBlockUnselected{
    padding: 2px;
}

.iconBlockUnselected img, .iconBlockSelected img {
    width: 35px;
}


#icon_selector {
    padding: 5px 3px;
    height: 100%;
    background-color: #f0f2f5;
    margin: 0 0 6px 0;
    border: 1px solid #bbc0c5;
}

#icon_selector img {
        width: 100%;
        height:auto;
        min-width: 26px;
}


#icons_conditions, #icons_activities, #icons_tools {
    width: 33.3%;
    padding: 6px 0 0 6px;
    margin-bottom: 6px;
}

#lbl_conditions, #lbl_activities, #lbl_tools {
    padding-right: 3px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
}

#icons_tools {
    width: 33.4%;
}

.iconBlockSelected {
    border: 2px solid #3289E1;
}

#popupIconsDiv{
    cursor: default;
}

.ruleicon {
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid black;
    float: left;
    margin: 0px 5px 3px 0px;
}
.deloverlay {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.icondiv{
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid black;
    margin:0 auto;
    box-sizing: content-box;
}
.iconoverlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
}
.ruleicon.removable{
    cursor:pointer;
}

.widetextarea{
    width: 100%;
    resize: none;
}

.smallerbold
{
	font-size:12px;
	color:#000000;
	font-weight:bold;
}
.smaller
{
    font-size:12px;
	color:#000000;
}
button span{
    cursor:default;
}

#oidcomp .oidc_field {
    width: 100%;
    font-weight: bold;
}

#oidcomp .oidc_input {
    width: 100%;
}

#oidcomp_riskfactor {
    height: 100px;
}
.smallergray {
    font-size:12px;
    color:#777777;
}
.italic {
    font-style: italic;
}
.link {
    text-decoration: none;
    cursor:pointer;
}
.link:hover {
    text-decoration:underline;
}
.energy_tag_alert_icons > span {
    display:inline-block;
}

.clickable {
    cursor: pointer;
}

.simpletable th {
    font-size:smaller;
    text-align:left;
    font-weight:normal;
}
.simpletable th, .simpletable td {
    padding: 2px 4px;
    border: 1px solid #AAAAAA;
}
.simpletable {
    border-collapse: collapse;
    border:none;
}
/* Aesthetics for non-quirks mode */
.simpletable tr:not(:first-of-type) td {
    border-bottom:none;
}
.simpletable .clickrow {
    cursor:pointer;
}
.simpletable .clickrow:hover {
    background-color:#B9D8F7;
}
.simpletable tbody tr:nth-child(even) {
    background-color:#f3f5f8;
}
.clickable {
    cursor:pointer;
}

/* Sign dialog */

.signDialogContainer {
    padding:3px 5px;
    width: 350px; /* replace with max-width when quirks mode goes */
}
.signDialogSection {
    margin:3px 0px;
}
div.signDialogButtonDiv {
    border: #aaaaaa 1px solid;
    background-color: #f0f2f5;
    margin-top: 3px;
    padding: 0 2px;
    text-align:center;
}
.signDialogButtonDiv button {
    margin:4px 2px;
    width: 100px;
    height: 40px;
}
div.signDialogSignatureDecl {
    border: #aaaaaa 1px solid;
    background-color: #f0f2f5;
    padding: 3px;
    font-size: 11pt;
    max-width: 300px;
}
.signDialogTimeout {
    font-size: 10pt;
    font-weight: bold;
    color: #be0c0c;
    text-align: center;
}
.signDialogLabel {
    font-size: 10pt;
    font-weight: bold;
}
.signDialogSignbutton {
    width: 80px;
    margin-top:3px;
}
.signDialogSignatureBox {
    width: 200px;
}

textarea{
    resize:none;
}

div.signDialogButtonDiv {
    border: #aaaaaa 1px solid;
    background-color: #f0f2f5;
    margin: 3px;
    padding: 0 2px;
    text-align:center;
}
.signDialogButtonDiv button {
    margin:4px 2px;
    width: 100px;
    height: 40px;
}

.image24{
    height:24px;
    width:24px;
}
.image40 {
    height: 40px;
    width: 40px;
}
.image60 {
    height: 60px;
    width: 60px;
}
.image75 {
    height: 75px;
    width: 75px;
    border: none;
}