/*
 *  ============================================================================
 *  Project:            EDF LOSCH
 *  Reference:          JR00244
 *  Product:            EDF LOSCH GUI
 *  File name:          General.css
 *  Author:             Gary Koo (GKC01)
 *  Description:        Stylesheet for extra style definitions for EDF.
 *
 *  Change History:
 *  Date       | Version | Made by  | Description
 *  ----------------------------------------------------------------------------
 *  2009-05-20 | 1.00.00 | GKC01    | Initial version.
 *  ...        | ...     | ...      | ...
 *  ...        | ...     | ...      | ...
 *  2010-11-30 | 1.01.00 | JCO01    | JR00469 EDF Energy - SMS Queuing Mods
 *             |         |          | Additions for View Incidents section.
 *  2012-01-20 | 1.02.00 | JCO01    | JR00664 UK Power Networks - Evacuation Queue Configuration Change
 *             |         |          | Additions for enhanced functionality of the EVACUATION button to
 *             |         |          | set the Global Parameter, EvacMode in the LOSCH db.
 *             |         |          | Added class dialogbuttonwide.
 *
 *  Copyright (C) Redwood Technologies Ltd.  All rights reserved.
 *  ============================================================================
 */

body{
	font-family: verdana;
	font-size: 10pt;
	font-weight: bold;
	color: #565656;
	word-wrap: break-word;
	
	margin: 5px;
	border: 0pt solid #41383C;
	background-color: #F2F2F2;
}

form{
	margin: 0px;
}

ul{
	margin: 0px;
	list-style-type: none;
}

li{
	width: 150px;
}

a{
	color: #566D7E;
	text-decoration: none;
}

th{
	font-size: 8pt;
	font-weight: bold;
	color: #000000;
	text-align: left;
	
	vertical-align: middle;
}

td{
	font-size: 8pt;
	text-align: left;
	
	vertical-align: middle;
}

input{
	font-size: 10pt;
	color: #565656;
}

select{
	font-size: 10pt;
	color: #565656;
	
	width: 300px;
}

img{
	vertical-align: top;
}

/****************************
	Container styles
****************************/
.container{
	background:#DCDCDC;
}

.roundedContainer{
	margin: 0px 0px 1px 0px;
	background:#DCDCDC;
	border-radius: 8px;
	padding-bottom: 8px;
	padding-top: 8px;
}

.rtop, .rbottom{
	display:block;
	background:#FFFFFF;

}

.rtop *, .rbottom *{
	display: block;
	height: 1px;
	overflow: hidden;
	background:#DCDCDC;
}

.r1{
	margin: 0 5px;
}
.r2{
	margin: 0 3px;
}
.r3{
	margin: 0 2px;
}
.r4{
	margin: 0 1px;height: 2px;
}

/****************************
	Table styles
****************************/
.TableContent{
	border: 1pt solid #8E909C;
	background-color: #E2E2E2;
}

.TableContent thead {
	background-color: #CCCCCC;
	color: #FFFFFF;
}

.TableContent td {
	vertical-align: top;
}

.TableContent tfoot {
	background-color: #CCCCCC;
	color: #9C0000;
}

.TableRow{
	border-top: 1px solid #C1CDD8;
}

.TableRowPaused{
    background-color: #F5A9A9;
}

.incidentID, .incidentCell{
	word-wrap: break-word;	
	word-break: break-all;
}

.TableRow .buttonContainerCell
{
	float:left; 
	margin-left:5px
}

/****************************
	Button styles
****************************/
.Button_Menu{
	text-align: center;
	color:white;
	font-size: 8pt;
	font-weight: bold;
	
	width: 150px;
	height: 35px;
	margin: 1px 0px;
	
	vertical-align: middle;
	background-color: #3D93B4;
}
.Button_Menu_Select{
	background-color: #51A7C8;
}
.Button_Menu:hover{
	background-color: #51A7C8;
}

/*
.EVAC_Button{
	text-align: center;
	color:white;
	font-size: 8pt;
	font-weight: bold;
	
	width: 150px;
	height: 35px;
	margin: 1px 0px;
	
	vertical-align: middle;
	background-color: #66CD00;
}
.EVAC_Button_Active{
	background-color: #FF3030;
}
*/
.EVAC_Button{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 150px;
	height: 35px;
	padding: 2px 4px;

	background-image: url(images/SelectButtonMenu_inactive.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}

.EVAC_Button_Active{
	background-image: url(images/SelectButtonMenu_active.png);
}

.SelectButtonMenu{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 150px;
	height: 35px;
	padding: 2px 4px;

	background-image: url(images/SelectButtonMenu.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}

.SelectButtonMenu_Select{
	background-image: url(images/SelectButtonMenu_selected.png);
}

.SelectButtonMenu:hover{
	background-image: url(images/SelectButtonMenu_over.png);
	background-position: left top;
}

.SelectButtonMenuText{
	width: 130px;
	height: 30px;
	padding: 2px 4px;
}

.SelectButton{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 113px;
	height: 38px;
	/** padding: 5px 3px; **/
	padding: 5px 3px 0 1px;
	margin: 1px 2px;
	
	background-image: url(images/SelectButton.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}

.SelectButton.Selected{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;

	width: 113px;
	height: 38px;
	/** padding: 5px 3px; **/
	padding: 5px 3px 0 1px;
	margin: 1px 2px;

	background-image: url(images/SelectButtonMenu_selected.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}

.SelectButton:hover{
	background-image: url(images/SelectButton_over.png);
	background-position: left top;
}

.ShortSelectButton{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display:inline-block;
	
	width: 105px;
	height: 38px;
	/** padding: 5px 3px; **/
	padding: 5px 3px 0 1px;
	margin: 0px 2px;
	
	background-image: url(images/ShortSelectButton.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}

.ShortSelectButton.Selected{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display:inline-block;

	width: 105px;
	height: 38px;
	/** padding: 5px 3px; **/
	padding: 5px 3px 0 1px;
	margin: 0px 2px;

	background-image: url(images/ShortSelectButton_selected.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}

.ShortSelectButton:hover{
	background-image: url(images/ShortSelectButton_over.png);
	background-position: left top;
}

.SmallSelectButton{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 60px;
	height: 25px;
	/** padding: 5px 3px; **/
	padding: 5px 3px 0 1px;
	margin: 0px 2px;
	
	background-image: url(images/SmallSelectButton.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}
.SmallSelectButton:hover{
	background-image: url(images/SmallSelectButton_over.png);
	background-position: left top;
}

.LongSelectButton{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	
	width: 120px;
	height: 25px;
	padding: 5px 3px;
	margin: 0px 2px;
	
	background-image: url(images/LongSelectButton.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}
.LongSelectButton:hover{
	background-image: url(images/LongSelectButton_over.png);
	background-position: left top;
}

.LargeSelectButton{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;

	/** display: inline-block; **/
	float: left;
	color: #566D7E;

	width: 191px;
	height: 38px;
	margin: 1px 2px;
	
	background-image: url(images/LargeSelectButton.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor: hand;
}
.LargeSelectButton:hover{
	background-image: url(images/LargeSelectButton_over.png);
	background-position: left top;
}
.LargeSelectButton .ButtonLabel{
	padding: 5px 4px;
}

.ActionButton{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 90px;
	padding: 10px 3px;
	margin: 2px 2px;
	
	background-image: url(images/ActionButton.png);
	background-repeat: no-repeat;
	background-position: left center;
	cursor: hand;
}
.ActionButton:hover{
	background-image: url(images/ActionButton_over.png);
	background-position: left center;
}

.ActionButtonHover
{
	background-image: url(images/ActionButton_over.png);
	background-position: left center;
}

.ActionButtonNoHover{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 90px;
	padding: 10px 3px;
	margin: 2px 2px;
	
	background-image: url(images/ActionButton.png);
	background-repeat: no-repeat;
	background-position: left center;
	cursor: hand;
}

.BigActionButton{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 130px;
	padding: 10px 3px;
	
	background-image: url(images/BigActionButton.png);
	background-repeat: no-repeat;
	background-position: left center;
	cursor: hand;
}
.BigActionButton:hover{
	background-image: url(images/BigActionButton_over.png);
	background-position: left center;
}

.BigActionButtonNoHover{
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 130px;
	padding: 10px 3px;
	
	background-image: url(images/BigActionButton.png);
	background-repeat: no-repeat;
	background-position: left center;
	cursor: hand;
}

.AddButton{
	width: 20px;
	height: 15px;
	
	background-image: url(images/Add.gif);
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
	
	cursor: pointer;
	cursor: hand;
	
}
.AddButton:hover{
	background-image: url(images/Add_over.gif);
	background-repeat: no-repeat;
	background-position: center center;		
}

.RemoveButton{
	width: 20px;
	height: 15px;
	display: inline-block;
	
	background-image: url(images/Remove.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
.RemoveButton:hover{
	background-image: url(images/Remove_over.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

.LeftArrow{
	width: 60px;
	height: 30px;
	position: relative;
	right: 150px;
	display: inline-block;
	
	background-image: url(images/LeftArrow.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.RightArrow{
	width: 60px;
	height: 30px;
	position: relative;
	left: 150px;
	display: inline-block;
	
	background-image: url(images/RightArrow.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.KeyPadButton{
	font-size: 16pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
	display: inline-block;
	
	width: 30px;
	height: 32px;
	/** padding: 5px 3px; **/
	margin: 0px;
	
	background-image: url(images/KeypadButton.png);
	background-repeat: no-repeat;
	background-position: left center;
	cursor: hand;
}
.KeyPadButton:hover{
	background-image: url(images/KeypadButton_over.png);
	background-position: left center;
}

.MakeLiveCheckbox:hover, .MakeAllLiveCheckbox:hover, .btnMakeLive:hover{
	cursor: hand;
}

.DeleteCheckbox:hover, .DeleteAllCheckbox:hover, .btnDelete:hover{
	cursor: hand;
}

.BellAndBinCheckbox:hover, .BellAndBinAllCheckbox:hover, .btnBellAndBin:hover{
	cursor: hand;
}

/****************************
	Label styles
****************************/
.LabelText{
	font-size: 8pt;
	color: #566D7E;
	text-align: right;
	vertical-align: bottom;
	width: 360px;
	height: 16px;
	display: inline-block;
}

.LabelTextShort{
	font-size: 8pt;
	color: #566D7E;
	text-align: right;
	vertical-align: bottom;	
	width: 200px;
	height: 16px;
}

.LabelTextRightShort{
	font-size: 8pt;
	color: #566D7E;
	text-align: left;
	vertical-align: bottom;
	margin-left: 10px;	
	width: 200px;
	height: 16px;
}

.LabelTextCentreShort{
	font-size: 8pt;
	color: #566D7E;
	text-align: center;
	vertical-align: bottom;
	margin-left: 10px;	
	width: 200px;
	height: 16px;
}

.LabelTextLeft{
	font-size: 8pt;
	color: #566D7E;
	text-align: left;
	vertical-align: bottom;
	width: 350px;
	height: 16px;
	display: inline-block;
}

.LabelTextVerticalAlignTop{
	font-size: 8pt;
	color: #566D7E;
	text-align: right;
	vertical-align: top;
	width: 350px;
	height: 16px;
	display: inline-block;
}

.LabelTextVerticalAlignTopNoTextAlign{
	font-size: 8pt;
	color: #566D7E;
	vertical-align: top;
	width: 350px;
	height: 16px;
	display: inline-block;
}

td.LabelCell{
	font-size: 8pt;
	color: #566D7E;
	font-weight: bold;
	text-align: right;
	width: 185px;
}

td.LabelCellLink{
	text-decoration:underline !important;
	font-size: 8pt;
	color: #566D7E;
	font-weight: bold;
	text-align: right;
	width: 185px;
	
}
td.LabelCellLink a{
	text-decoration:underline;
	
}

td.LabelCellUnder{
	font-size: 8pt;
	color: #566D7E;
	font-weight: bold;
	text-align: right;
	vertical-align: top;
	padding-bottom: 10px;
}



.LabelData{
	font-size: 8pt;
	color: #565656;
	text-align: left;
	vertical-align: bottom;
	display: inline-block;
	
	height: 16px;
}

/****************************
	Dialog boxes
****************************/
#divDialog{
	text-align: center;
        z-index: 1050;
}

#divBackground{
	text-align: center;
        z-index: 1040;
}

#dialogtitle{
	font-size: 10pt;
	color: #000000;
}

#dialogtext{
	font-size: 8pt;
	color: #000000;
}

.dialogbutton{
	font-size: 10pt;
	color: #000000;
	
	width: 65px;
}

.dialogbuttonwide{
	font-size: 10pt;
	color: #000000;

	width: 100px;
}

.dialogtextbox{
	font-size: 10pt;
	color: #000000;
	width: 330px;
}


/****************************
	Config Dialog boxes
****************************/
#dialog-overlay{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
	background-color: #888888;
	color: #565656;
	filter: alpha(opacity=80);
	opacity: 0.8;
}

#config_dialog
{
    position: absolute;
    width: 800px;
	z-index: 1010;
    max-height: 800px;
}

/****************************
	Nested Config Dialog boxes
****************************/
#dialog-overlay-nested{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1020;
	background-color: #888888;
	color: #565656;
    filter: alpha(opacity=80);
	opacity: 0.8;
}

#config_dialog_nested
{
    position: absolute;
    width: 600px;
	z-index: 1030;
    max-height: 800px;
}

/****************************
	Inputs
****************************/
.SMSTemplate{
	margin: 2px;
	background-color: #EEEEEE;
	color: #565656;
	font-size: 14px;
}

.SMSTemplate_UpdateAllAreas{
	display:block;
	text-align:left;
	padding-left:20px;
}

.customSmsMessage{
    font-size: 10pt;
    color: #565656;
    width: 300px;
}

/****************************
	Warnings
****************************/
.PageWarningText{
	font-size: 8pt;
	color: #566D7E;
	text-align: right;
	vertical-align: bottom;
	height: 16px;
}

input[type='number']{
	width: 60px;
}