/**
 * This file contains the definition of the HTML style to be applied to the whole site.
 * 
 * @author Xavier Bertou <bertou@cab.cnea.gov.ar>
 * @author Cyril Lachaud <cyril.lachaud@in2p3.fr>
 * @package GENERAL
 * @subpackage CSS


	 Remember :
# defines id elements, there can be only one id element type per page
. defines class elements, there is no limitation on the number of call to class elements
 * $Id: auger_style.css,v 1.16 2012-04-12 20:11:08 kdaumille Exp $
 */


.STANDARD_LIGHT {background-color:rgb(120,152,198) !important;}
.STANDARD_NORMAL {background-color:rgb(70,102,148) !important;}
.STANDARD_DARK {background-color:rgb(35,51,74) !important;}

.LOS_LEONES_LIGHT {background-color:#94CBDA !important;}
.LOS_LEONES_NORMAL {background-color:#498CAA !important;}
.LOS_LEONES_DARK {background-color:#132228 !important;}

.LOS_MORADOS_LIGHT {background-color:#B397C1 !important;}
.LOS_MORADOS_NORMAL {background-color:#854EA1 !important;}
.LOS_MORADOS_DARK {background-color:#1A0E20 !important;}

.LOMA_AMARILLA_LIGHT {background-color:#FFECB6 !important;}
.LOMA_AMARILLA_NORMAL {background-color:#CFAA4D !important;}
.LOMA_AMARILLA_DARK {background-color:#342C14 !important;}

.COIHUECO_LIGHT {background-color:#AAF1AC !important;}
.COIHUECO_NORMAL {background-color:#70A171 !important;}
.COIHUECO_DARK {background-color:#183018 !important;}

.HEAT_LIGHT {background-color:#DDE8AA !important;}
.HEAT_NORMAL {background-color:#B5C476 !important;}
.HEAT_DARK {background-color:#8C9F41 !important;}

/* ##### Common Styles ##### */

body {
	font-family: verdana, helvetica, arial, sans-serif;
  margin: 0;
  padding: 0;
	background-color:white;
  width:100%;
}

html > body {
	font-size: 10pt;
}

hr {
	color:grey;
	background-color:grey;
	border:0;
	margin:1px;
	padding:0;
	height:1px;
}

hr.big {
	color:grey;
	background-color:grey;
	border:0;
	margin:2px;
	padding:0;
	height:2px;
}

a {
  color: rgb(61,92,122);
	background-color: transparent;
	text-decoration: underline;
  margin: 0;
}

a:hover {
	color: rgb(117,144,174);
	text-decoration: none;
}

.nodecoration {
	text-decoration:none !important;
}

ol {
  margin: 1em 0 1.5em 0;
  padding: 0;
}

ul {
	list-style-type: square;
  margin: 1em 0 1.5em 0;
  padding: 0;
}

dl {
  margin: 1em 0 0.5em 0;
  padding: 0;
}

ul li {
	line-height: 1.5em;
  margin: 1.25ex 0 0 1.5em;
  padding: 0;
}

ol li {
	line-height: 1.5em;
  margin: 1.25ex 0 0 2em;
	padding: 0;
}

dt {
	font-weight: bold;
  margin: 0;
  padding: 0 0 1ex 0;
}

dd {
	line-height: 1.75em;
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}

.doNotDisplay {
  display: none !important;
}

.smallCaps {
	font-size: 117%;
	font-variant: small-caps;
}

.red {
  color:red;
}

.blink {
	text-decoration:blink;
}

.center {
	text-align:center;
}

.hide {
	visibility:hidden;
}

img {
  border:  5px double rgb(204,204,204);
  margin: 1em 1em 1em 1em;
}

img.noborder {
  border:  none;
  margin: 0px;
}

.AugerMap {
  border: none;
  margin: 0 0 0 0;
	text-align: left;
}

.inText {
  border: none;
  margin: 0 0 0 0;
}

.left {
	text-align: left;
}

.Black {
	background-color:black !important;
}

.Extreme {
	background-color:red !important;
	color:white !important;
}

.High {
	background-color:orange !important;
	color:white !important;
}

.Medium {
	background-color:yellow !important;
	color:black !important;
}

.Low {
	background-color:purple !important;
	color:white !important;
}

.Graphics {
  padding:7px;
}

table.non-border td, table.non-border {
  border: none; padding: 2px 0px 2px 0px;
}

/* ################################## Header ################################### */

#header {
	width : 100%;
	z-index:10000;
}

.superHeader {
  position:fixed;
	width:100%;
  z-index:10000;
  color: white;
	padding: 2px;
}

.superHeader span {
  color: rgb(195,196,210);
	background-color: transparent;
	font-weight: bold;
}

.superHeader a {
  color: rgb(240,240,240);
	font-weight: normal;
	background-color: transparent;
	text-decoration: none;
  margin: 0;
}

.superHeader a:hover {
  color: rgb(193,102,90);
	background-color: transparent;
	text-decoration: none;
}

.superHeader li {
  display:inline;
}


.midHeader {
	position:absolute;
  top:1.65em;
  width:100%;
  color: white;
}

.midHeader a {
	text-decoration:none;
	color:white;
}

.headerTitle {
	font-size: 200%;
  padding-top: 2px;
  padding-left: 10px;
  margin:0;
}

.headerSubTitle {
	font-size: 130%;
	font-weight: normal;
	font-style: italic;
  padding-bottom: 2px;
	padding-left:10px;
}


#LastUpdate_Span {
	float:right;
	font-family: "Times New Roman", serif;
	font-weight:normal !important;
	font-size: 14px;
	color:white;
	margin-top:2px;
	/*margin-right:1em;*/
}


/* ################################### Div for the alarms ################################### */

#alarms_div {
	background-color: transparent;
  position: absolute;
	float:left;
  width : 42em;
  left : 38em;
  padding: 0;
  margin: 0;
}

#alarms_div a {
	text-decoration: none;
}

.alarmspan {
  float: left;
	text-align: center;
	vertical-align:middle;
	color: white;
  margin: 2px;
  width: 12px;
  height: 14px;
	line-height: 0.2em;
}

.spacer {
clear: both;
}

/* ##### Side Menu ##### */

#side-left, #side-right, #side-left-large, #side-right-large, #side-left-bis, #side-left-large-bis, #side-fd {
  color: rgb(117,117,117);
	background-color: transparent;
	list-style-position: inside;
  margin: 0;
  padding: 1ex 0;
  border: 2px solid rgb(204,204,204);
  position: absolute;
  text-decoration: none;
}

#side-left, #side-right, #side-left-large, #side-right-large {
  top: 8em;
}

#side-fd {
  top: 1.5em;
  right: 0em;
}

#side-left-bis, #side-left-large-bis {
  bottom: 2em;
}

#side-left, #side-right, #side-left-bis {
  width: 15em;
}

#side-left-large, #side-right-large, #side-left-large-bis {
  width: 23em;
}

#side-left,#side-left-large,#side-left-large-bis, #side-left-bis {
  left: 1em;
}

#side-right, #side-right-large {
  right: 1em;
}

[id="side-bar"] {
  position: fixed !important;  /* Makes the side menu scroll with the page. Doesn't work in MSIE */
}

#side-bar a {
	text-decoration: none;
}

#side-bar:hover {
  color: rgb(117,144,174);
	background-color: transparent;
	border-color: rgb(117,144,174);
}

#side-bar li {
  margin: 0;
  padding: 0.75ex 0 1ex 1.75ex;
}

#side-bar li:hover {
  color: rgb(61,92,122);
	background-color: transparent;
}


#side-bar li a:hover {
	text-decoration: underline;
}

.sideBarTitle, .sideBarSubtitle {
/*color: rgb(61,92,122);*/
color: rgb(41,72,102);
			 text-decoration: none;
			 list-style-type: none;
			 text-align: center;
margin: 0;
padding: 0;
}

.sideBarTitle {
	font-size: 120%;
}

.sideBarSubtitle {
	font-size: 100%;
}

/* ######################################## Time Menu ######################################## */

#time-left , #time-right {
  color: rgb(117,117,117);
	background-color: transparent;
	list-style-position: inside;
  width: 15em;
  margin: 0;
  padding: 1ex 0;
  border: 2px solid rgb(204,204,204);
  position: absolute;
  top: 14em;
	text-decoration: none;
}


#time-left {
left: 1em;
}
#time-right {
right: 1em;
}


[id="time-bar"] {
position: fixed !important;  /* Makes the side menu scroll with the page. Doesn't work in MSIE */
}

#time-bar a {
	text-decoration: none;
}

#time-bar:hover {
color: rgb(117,144,174);
			 background-color: transparent;
			 border-color: rgb(117,144,174);
}

#time-bar li {
margin: 0;
padding: 0.75ex 0 1ex 1.75ex;
}

#time-bar li:hover {
color: rgb(61,92,122);
			 background-color: transparent;
}


#time-bar li a:hover {
	text-decoration: underline;
}

.timeBarTitle {
color: rgb(61,92,122);
			 text-decoration: none;
			 list-style-type: none;
			 text-align: center;
			 font-size: 120%;
margin: 0;
padding: 0;
}

/* ##### Main Copy ##### */

#main {
  position:absolute;
  top:6.0em;
  bottom:2em;
	text-align: justify;
  padding: 0.5em 10px;
  clear: left;
	margin-bottom: 8em;
	margin-left: 17.5em;
	margin-right:1em;
	margin-top: 0.5ex;
			 /*width:80%;*/
}

.debug {
	text-align: justify;
padding: 0.5em 10px;
clear: left;
			 background-color: rgb(255,255,153);
			 /*margin:  0.5ex 5em 1em 17.5em;*/
}

#main h1 {
color: rgb(117,144,174);
			 background-color: transparent;
			 font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
			 font-size: 186%;
margin: 0;
padding: 1.5ex 0 0 0;
}

#main h2 {
  color: rgb(61,92,122);
	background-color: transparent;
	font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	text-decoration:none !important;
	font-size: 151%;
  margin:0;
}

#main p {
	line-height: 1.75em;
  margin: 1em 0 1.5em 0;
  padding: 0;
}

#main img {
  border:  none;
  margin: 0px;
	z-index:0;
}

div.status_div {
  border: 2px solid rgb(102,102,102);
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
  margin: 0.5em;
	text-align:center;
}
div.status_div table {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}


/* ##### Footer ##### */

#footer {
  position: fixed;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #f5f5f5;
  right: 0px;
  bottom: 0px;
  width:100%;
	text-align:right;
	font-size: 10px;
  /*color: <?php echo $STYLE_COLORS["dark"] ?>;*/
	background-color: rgb(240,240,240);
	z-index:10000;
  padding: 0px 10px;
}

#footer a {
  /*color: <?php echo $STYLE_COLORS["dark"] ?>;*/
}

/* ##### SlideBar ##### */

.slidebar {
  float : left;
	margin-top : 2px;
	margin-left : 20px;
	background-color : #CCCCCC;
  width : 200px;
  height : 10px;
}

.slidebutton {
  width:10px;
  height:10px;
	background-color:#f00;
  cursor:move;
}

/* --- Exceptions --- */

.exceptions {
	font-size: 200%;
  color: red;
	font-weight: normal;
	font-style: italic;
  position: fixed;
  margin: 0 0 1ex 0;
  padding: 0;
}

/* TABLES */

table {
	border-width: 1px;
	/*border-spacing: 1px;*/
	border-spacing: 0px;
	border-style: solid;
	/*border-color: #ccc;*/
	border-color: #336699;
	border-collapse: separate;
	margin:2px;
	font-size: 9pt;
}

th {
	/*border:1px solid #bbb;*/
	border:1px solid gray;
	padding:4px;
	background-color:#336699;
	/*background-color:#ddd;*/
	/*color:#000;*/
	color:#FFFFFF;
	text-align:center;
	text-decoration: none;
	font-weight:bold;
}

th a {
	color:#FFFFFF !important;
	font-weight:bold !important;
	text-decoration: none !important;
}

td {
	text-align: left;
	vertical-align: top;
	max-width:500px;
	overflow:auto;
	padding: 4px;
	border: 1px solid gray;
	/*border: 1px solid #ccc;*/
}

.Row {
  margin:5px; 	
  padding: 5px;
  border:1px solid #336699;	
	background-color:#FFFFFF;	
  color:#000000;	
}

.sortcol {
   cursor: pointer;
}

.sortasc {
    background-color: #CC33FF;
    /*background-image: url("http://moni.auger.org.ar/~lachaud/GENERAL/Images/up.gif");*/
}

.sortdesc {
    background-color: #6600FF;
    /*background-image: url("http://moni.auger.org.ar/~lachaud/GENERAL/Images/down.gif");*/
}

.nosort {
    cursor: default;
}

/*th.AlarmLevel {
  padding: 2px !important; 
}

td.AlarmLevel, th.AlarmLevel {
  padding: 0px !important; 
}*/


/******************** Eye and Mirror **********************/

div.eye {
  border: 1px dashed #ccc;
  padding: 15px;
}

span.mirror, span.amirror {
  border: 1px dashed #ccc;
  padding: 10px;
  background: #90EE90;
  border: 1px solid #777;
	z-index: 100000;
  padding: 3px;
	border-top: none;
	border-bottom: none;
	border-left: none;
}

span.mirror {
  background: #90EE90;
}

span.amirror {
  background:   #FF6347;
}

.eyenormal {
  border: 1px solid #fff;
	border-top: none;
	border-bottom: none;
	border-left: none;
  padding: 2px;
  color: black;
}

div.fdmain-right-rel {
  position: absolute;
  top: 0em;
  left: 46em;	
  width: 40em;
}


div.fdmain-left, div.fdmain-right {
  position: absolute;
  top: 0em;
  width: 40em;
}

div.fdmain-left {
  left: 1em;
}
div.fdmain-right {
  left: 44em;
}

table.fdmain {
  width: 45em;
  border-spacing: 1px;
  border: 1px solid #ccc;
  border-collapse: separate;
  margin:2px;
  font-size: 9pt;
}

table.fdmain th {
  border:1px solid #bbb;
  padding:4px;
  background-color:#ddd;
  color:#000;
  text-align:center;
  text-decoration: none;
  font-weight:bold;
}

table.fdmain th a {
  color:#000 !important;
  font-weight:bold !important;
  text-decoration: underline !important;
}

table.fdmain td {
  text-align: center;
  max-width:500px;
  overflow:auto;
  padding: 4px;
  border: 1px solid #ccc;
}

table.fdmain td a {
  color:#000 !important;
  font-weight:bold !important;
  text-decoration: none !important;
}

/* ########################  BOX SYSTEM FOR GRAPHICS  ######################### */

#webdeveloper-ruler {
	background-color:#FFFF99 !important;
  border:1px solid #FFCC66 !important;
  left:5px;
  opacity:.9 !important;
  padding:5px !important;
  position:absolute !important;
  top:5px;
	z-index:1000 !important;
}

#webdeveloper-ruler, #webdeveloper-ruler dd, #webdeveloper-ruler dl, #webdeveloper-ruler dt, #webdeveloper-ruler p {
  margin:0pt !important;
}

#webdeveloper-ruler, #webdeveloper-ruler p {
	font-family:sans-serif !important;
	font-size:10px !important;
	font-style:normal !important;
	font-variant:normal !important;
	font-weight:normal !important;
	letter-spacing:0pt !important;
	text-align:left !important;
	text-decoration:none !important;
	text-transform:none !important;
}

#webdeveloper-ruler dd, #webdeveloper-ruler dt {
  padding:0pt 5px !important;
}

#webdeveloper-ruler dl, #webdeveloper-ruler p {
  padding:0pt !important;
}

#webdeveloper-ruler dt {
	font-size:12px !important;
}

#GraphicsSelection_Container_Div {
	/*cursor:move !important;*/
  height:100% !important;
  overflow:hidden !important;
  position:relative !important;
  width:100% !important;
}

#GraphicsSelection_north-east {
	border-width:0pt 0pt 1px 1px !important;
	/*cursor:ne-resize !important;*/
  right:0pt !important;
  top:0pt !important;
}

#GraphicsSelection_north-west {
	border-width:0pt 1px 1px 0pt !important;
	/*cursor:nw-resize !important;*/
  left:0pt !important;
  top:0pt !important;
}

#GraphicsSelection_Div {
	background-color:#CCCCCC !important;
  left:250px;
  opacity:.5 !important;
	outline-color:#FF0000 !important;
	outline-style:solid !important;
	outline-width:1px !important;
  position:absolute !important;
  top:250px;
	z-index:999 !important;
}

#GraphicsSelection_Div div div {
	background-color:#999999 !important;
	border-color:#000000 !important;
	border-style:dotted !important;
  height:10px !important;
  position:absolute !important;
  width:10px !important;
}

#GraphicsSelection_south-east {
	border-width:1px 0pt 0pt 1px !important;
  bottom:0pt !important;
  right:0pt !important;
}

#GraphicsSelection_south-west {
	border-width:1px 1px 0pt 0pt !important;
  bottom:0pt !important;
  cursor:sw-resize !important;
  left:0pt !important;
}

/*  #################################  AutoCompleter for LS Names  ##############################  */

div.autocomplete {
	position:absolute;
	width:220px;
	background-color:white;
	border:1px solid #888;
	margin:0px;
	padding:0px;
}

div.autocomplete ul {
  list-style-type:none;
	margin:0px;
	padding:0px;
}

div.autocomplete ul li.selected {
	background-color: #ffb;
}

div.autocomplete ul li {
	list-style-type:none;
	display:block;
	margin:0;
	padding:1px;
	height:16px;
	cursor:pointer;
}

/*  ################################  Authorization part  ##############################  */

#mainAuth {
	position:absolute;
	top:10em;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

table.footerTimePref {
	display:inline;
	border:none;
}

table.footerTimePref td {
	border-width:0px;
}

div.timepreferences {
	position:absolute;
	bottom:0px;
	left:30px;
}

/*  ######################################  END OF Authorization part  #####################################  */


/* ########################   NAVIGATION MENU LAYOUT   ##################### */


/* All <ul> tags in the menu including the first level */
.menulist {
  float:left;
}

.menulist, .menulist  ul {
  margin: 0;
  padding: 0;
	list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
  display: none;
  position: absolute;
  top: 0.5em;
	margin-top: 13px; /* I'm using ems and px to allow people to zoom their font */
  left: -1px;
  width: 11em;
}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
  top: -1px; margin-top: 0;
  left: 147px;
}

/*
	 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
	 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
 */
.menulist li {
	font-weight: bold;
  float: left;
  display: block;
  position: relative;
  top: -2px;
	margin-top: 0;
	margin-right:0;
	margin-left: 0;
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
  float: none;
  margin: 0;
}

.menulist ul>li:last-child {
	/*margin-bottom: 1px; */ /* Mozilla fix */
}

/* Links inside the menu */
.menulist a {
	font-weight: normal;
	color: rgb(240,240,240);
	text-decoration: none;
  display: block;
}

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
	color: red;
}

.menulist a.highlighted {
  color: rgb(240,240,240);
}

/*
	 If you want per-item background images in your menu items, here's how to do it.
	 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#"></a>
	 2) Copy and paste these next lines for each link you want to have an image:
	 .menulist a#xyz {
	 background-image: url(out.gif);
	 }
	 .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
	 background-image: url(over.gif);
	 }
 */

/* Only style submenu indicators within submenus. */
.menulist a .subind {
  display: none;
}
.menulist ul a .subind {
  display: block;
  float: right;
}

/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
  float: left;
}
.menulist ul a {
  float: none;
}
/* \*/
.menulist a {
  float: none;
}

/*
HACKS: IE/Win:
A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
 */
*:first-child+html .menulist ul li {
  float: left;
  width: 100%;
}

* html .menulist ul li {
  float: left;
  height: 1%;
}

* html .menulist ul a {
  height: 1%;
}

.open {
  background-color: lightgreen;
}

.close {
  background-color: orange;
}