/* Name    : default
 * Version : 1.0
 * Content : Dragon Matrix Base CSS styles
 * Author  : blenistour
 */

/* -------------------------------------------------------------------- */
/* ---------------------- HTML redefinitions -------------------------- */
/* -------------------------------------------------------------------- */

body {
    background-color: #FFFFFF;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;

	padding: 0;
	margin: 0;
	text-align: left;

    scrollbar-face-color: #DFE0FF;
    scrollbar-highlight-color: #DFE0FF;
    scrollbar-shadow-color: #DFE0FF;
    scrollbar-3dlight-color: #DFE0FF;
    scrollbar-arrow-color: #666677;
    scrollbar-track-color: #666677;
    scrollbar-darkshadow-color: #666677;
    cursor: default;
}

a {
  cursor: pointer;
}

/** A title of a category of elements (see practice/festivals)
 */
h1 {
   background-image: url('./images/categoryTitle.gif');
   background-repeat: no-repeat;

   padding-left: 10px;
   padding-bottom: 3px;
   padding-top: 1px;

   margin-left: 5px;
   margin-top: 15px;
   margin-bottom: 10px;

   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: bold;
}

/** Standard form styles
 */
input, select, textarea, .inputSmall, .inputMedium, .inputLarge, .selectSmall, .selectLarge, .textareaMedium {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #333333;
   background-color: #EEEEEE;
   height: 17px;
   border-color: #999999;
   border-style: solid;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px
}

select {
 height: 15px;
}

textarea {
 padding-top:3px;
 padding-left:3px;
}

input {
 font-weight: normal;
 padding-left:3px;
}

.inputSmall {
   font-weight: normal;
   width:30px;
   padding-left : 3px;
}

.inputRadio {
   background-color: #FFFFFF;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px
}

.inputCode {
   font-weight: normal;
   width:100px;
   padding-left : 3px;
}

.inputDate {
   width:80px;
   cursor: default;
   padding-left : 3px;
}

.inputNumber {
   width:40px;
   text-align:right;
   padding-right : 3px;
}

.inputMedium {
   width:200px;
   padding-left : 3px;
}

.inputLarge {
   width:300px;
   padding-left : 3px;
}

.selectSmall {
   width:40px;
}

.selectLarge {
   width:200px;
}

.textareaMedium{
   width:300px;
   height:60px;
}

/* -------------------------------------------------------------------- */
/* ------------------------ BASE CSS STYLES --------------------------- */
/* -------------------------------------------------------------------- */

/** Defines something selectable
 */
.selectable {
  cursor: pointer;
}

/** Defines title 1, used for the biggest titles
 */
.title1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #444444;
    font-style: normal;
    font-weight: bold;
    text-decoration:none;
}
.title1 a:active {text-decoration:none;color: #000000;}
.title1 a:link {text-decoration:none;color: #000000;}
.title1 a:visited {text-decoration:none;color: #000000;}
.title1 a:hover {text-decoration:underline;color: #000000;}


/** Defines title 2, used for section titles
 *  the inactive one is for text that are supposed to represent an inactive or past state
 */
.title2, .selectableTitle2, .title2Inactive {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: bold;
   text-decoration:none;
}
.title2 a:active {text-decoration:none;color: #000000;}
.title2 a:link {text-decoration:none;color: #000000;}
.title2 a:visited {text-decoration:none;color: #000000;}
.title2 a:hover {text-decoration:underline;color: #000000;}

.selectableTitle2 {
  cursor: pointer;
}

.title2Inactive {  color: #70727C; }
.title2Inactive a:active {text-decoration:none;color: #70727C;}
.title2Inactive a:link {text-decoration:none;color: #70727C;}
.title2Inactive a:visited {text-decoration:none;color: #70727C;}
.title2Inactive a:hover {text-decoration:underline;color: #000000;}

/** Defines standard text, selectable text and an error text
 *  the inactive one is for text that are supposed to represent an inactive or past state
 */
.text, .selectableText, .errorText, .successText, .textInactive {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-weight: normal;
   text-decoration:none;
}
.text a:active {text-decoration:none;color: #000000;}
.text a:link {text-decoration:none;color: #000000;}
.text a:visited {text-decoration:none;color: #000000;}
.text a:hover {text-decoration:underline;color: #000000;}

.selectableText {
  cursor: pointer;
  font-style: normal;
}

.errorText {
  text-decoration:none;
  color: #DD2222;
  font-weight: bold;
}

.successText {
  text-decoration:none;
  color: #22AA22;
  font-weight: bold;
}

.textInactive {  color: #70727C; }
.textInactive a:active {text-decoration:none;color: #70727C;}
.textInactive a:link {text-decoration:none;color: #70727C;}
.textInactive a:visited {text-decoration:none;color: #70727C;}
.textInactive a:hover {text-decoration:underline;color: #000000;}

/** Defines small text
 */
.small {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 9px;
   font-weight: normal;
}
.small a:active {text-decoration:none;color: #000000;}
.small a:link {text-decoration:none;color: #000000;}
.small a:visited {text-decoration:none;color: #000000;}
.small a:hover {text-decoration:underline;color: #000000;}

/* -------------------------------------------------------------------- */
/* --------------------------- BUTTONS -------------------------------- */
/* -------------------------------------------------------------------- */

/** Defines a button with rollover effect
 * Therea re two versions of the button, one with default alignment and one centered
 */
.button1Up, .button1Down, .button1Over, .button1UpCentered, .button1DownCentered, .button1OverCentered {
  width:90px;
  height:24px;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: center;  
  text-decoration:none;
  color: #333333;
  cursor: pointer;

  background-repeat: no-repeat;
  background-image: url('./images/button.gif');
  background-position: 0 0px;

  overflow: hidden;
  display: block;
}

.button1UpCentered, .button1DownCentered, .button1OverCentered {
  margin:auto;
}

.button1Over, .button1OverCentered {
  background-position: 0 -24px;
}

.button1Down, .button1DownCentered  {
  background-position: 0 -48px;
}

.button1Text {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: center;  
  text-decoration:none;
  color: #333333;
  margin-top:5px;
}


/** Defines a tab "open" button, 
 * the button has 3 styles for display (up), onmouseover (on), and clicked (down)
 */
.buttonOpenUp, .buttonOpenOn, .buttonOpenDown  {
  width:15px;
  height:15px;
  background-repeat: no-repeat;
  background-image: url('./images/tabOpen.gif');
  background-position: 0 0px;
  display: block;
  overflow: hidden;
}

.buttonOpenOn {
  background-position: 0 -15px;
}

.buttonOpenDown {
  background-position: 0 -30px;
}

/** Defines a tab "close" button, 
 * the button has 3 styles for display (up), onmouseover (on), and clicked (down)
 */
.buttonCloseUp, .buttonCloseOn, .buttonCloseDown  {
  width:15px;
  height:15px;
  background-repeat: no-repeat;
  background-image: url('./images/tabClose.gif');
  background-position: 0 0px;
  display: block;
  overflow: hidden;
}

.buttonCloseOn {
  background-position: 0 -15px;
}

.buttonCloseDown {
  background-position: 0 -30px;
}

/* -------------------------------------------------------------------- */
/* ---------------------------- TABLES -------------------------------- */
/* -------------------------------------------------------------------- */

/** A table of a category (see practice/festivals)
 */
.categoryTable {
  position:relative;
  left:25px;
  width:455px;
  padding: 2px;
  margin-bottom:10px;
}

/** Style of a label cell of the category table
 */
.categoryTableLabelCell, .categoryTableTextAreaLabelCell, 
.categoryTableLabelCellLarge, .categoryTableTextAreaLabelCellLarge {

  height:16px;
  background-color: #ABBAE1;

  padding-left: 4px;
  padding-bottom: 1px;
  padding-top: 4px;

  text-align: left;
  vertical-align:middle;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: bold;
}

.categoryTableLabelCell, .categoryTableTextAreaLabelCell {
  width:100px;
}

.categoryTableLabelCellLarge, .categoryTableTextAreaLabelCellLarge {
  width:160px;
}


/** Specialized label for textareas
 */
.categoryTableTextAreaLabelCell, .categoryTableTextAreaLabelCellLarge {
  vertical-align:top;
}

/** Style of a value cell of the category table
 */
.categoryTableValueCell {

  padding-left: 4px;
  padding-bottom: 0px;
  padding-top: 5px;

  text-align: left;
  vertical-align:middle;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-style: normal;
}

/** Style of a comment cell of the category table
 */
.categoryTableCommentCell {

  padding-left: 4px;
  padding-bottom: 1px;
  padding-top: 4px;

  text-align: left;
  vertical-align:middle;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: normal;
}

.categoryTableValueCell a, .categoryTableCommentCell a {
  text-decoration:none;
  color: #000000;
}

.categoryTableValueCell a:active {text-decoration:none;color: #000000;}
.categoryTableValueCell a:link {text-decoration:none;color: #000000;}
.categoryTableValueCell a:visited {text-decoration:none;color: #000000;}
.categoryTableValueCell a:hover {text-decoration:underline;color: #000000;}

.categoryTableCommentCell a:active {text-decoration:none;color: #000000;}
.categoryTableCommentCell a:link {text-decoration:none;color: #000000;}
.categoryTableCommentCell a:visited {text-decoration:none;color: #000000;}
.categoryTableCommentCell a:hover {text-decoration:underline;color: #000000;}


/* -------------------------------------------------------------------- */


/** A table for displaying data list (see user directory)
 */
.dataTable {
  position:relative;
  left:15px;
  width:94%;
  padding: 0px;
  margin:0px;

  background-color: #FFFFFF;
  border-left:1px;
  border-top:1px;
  border-right: 0px;
  border-bottom: 0px;
  border-color: #9CA1AF;
  border-style: solid;
}

.dataTable th {

  height:24px;
  padding:2px;
  background-color: #96A6DB;

  text-align: left;
  vertical-align:middle;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: bold;

  border-left:0px;
  border-top:0px;
  border-right: 1px;
  border-bottom: 1px;
  border-color: #9CA1AF;
  border-style: solid;
}

.dataTable td {

  height:20px;
  padding:2px;

  vertical-align:middle;
  text-align: left;

  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: normal;

  border-left:0px;
  border-top:0px;
  border-right: 1px;
  border-bottom: 1px;
  border-color: #9CA1AF;
  border-style: solid;
}

.dataTableOddRow {
  background-color: #D8DDFA;
}

.dataTable tbody tr:hover {
	background-color: #BBC2EB;
}

.dataTable tbody tr a {
  color: #000000;
  text-decoration: underline;
  font-weight: bold;
}

.dataTable tbody tr a:visited {text-decoration: none;}
.dataTable tbody tr a:link {text-decoration: none;}
.dataTable tbody tr a:hover {text-decoration: none;}
.dataTable tbody tr a:active {text-decoration: none;}