/* Name    : default
 * Version : 1.0
 * Content : Dragon Matrix Page CSS styles (header, main, menu items)
 * Author  : blenistour
 */

/* -------------------------------------------------------------------- */
/* ---------------------------- LOGIN -------------------------------- */
/* -------------------------------------------------------------------- */

.loginForm {
  width: 430px;

  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;

  border-color: #999999 #999999 #999999 #999999;
  border-style: solid;
  border-right-width: 1px;
  border-left-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.loginButton {
  text-align:left;
}

.loginLinks {
  position: relative;
  top: 10px;
}

/** Login links : forgot password and create account
 */
.loginLinks a {
   background-image: url('./images/link.gif');
   background-repeat: no-repeat;
   padding-left:11px;
   margin-left:0px;
   margin-top:5px;
   margin-bottom:5px;
   display: block;
}

/* -------------------------------------------------------------------- */
/* ------------------------ HEADER & PAGE ----------------------------- */
/* -------------------------------------------------------------------- */

#dmPageContainer {
    margin: 0 auto;
    padding: 0;
}

#dmPage {
    position:relative;
    width:790px;
    left:0px;
    top:0px;
    margin: 0;
    padding: 0;
    text-align: left;
}

/** container for header and logout
 */
#dmHeaderContainer {
    width:790px;
    height:202px;
    background-image:url('./images/page-header.jpg');
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    z-index: 1;
}

/** Header containing the team name and user name
 */
#dmHeader {
  position: absolute;
  left: 10px;
  top: 163px;
  z-index: 10;
}

#dmHeader .text {
   font-weight: bold;
   z-index: 10;
}

/** Logout button and text
 */
#dmLogout {
  position: absolute;
  left: 738px;
  top: 6px;
  z-index: 10;
}

#dmLogout .text {
   height:18px;
   font-weight: bold;
   z-index: 10;
}

/** Team selection in the header
 */
#dmTeamSelect {
  position: absolute;
  left: 6px;
  top: 4px;
  z-index: 10;
}

#dmTeamSelect .text {
   height:11px;
   font-weight: bold;
   z-index: 10;
}

/* -------------------------------------------------------------------- */
/* ------------------------- MAIN CONTENT ----------------------------- */
/* -------------------------------------------------------------------- */

/** Defines the main column where the menu and main content are displayed
 */
#dmMain {
  position: absolute;
  left: 0px;
  top: 218px;
  width: 500px;
}

/** Defines the style for the menu items
 */
.menuItem, .menuItemSelected, .menuItemEmpty, .menuItemEnder {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
   color: #000000;

   width: 92px;
   height: 25px;

   padding-top: 6px;
   background-repeat: no-repeat;
   overflow: hidden;
}

.menuItem a:active {text-decoration:none;color: #777777;}
.menuItem a:link {text-decoration:none;color: #777777;}
.menuItem a:visited {text-decoration:none;color: #777777;}
.menuItem a:hover {text-decoration:underline;color: #000000;}
.menuItem {
   background-image: url('./images/menuItem.gif');
}

.menuItemSelected a:active {text-decoration:none;color: #000000;}
.menuItemSelected a:link {text-decoration:none;color: #000000;}
.menuItemSelected a:visited {text-decoration:none;color: #000000;}
.menuItemSelected a:hover {text-decoration:underline;color: #000000;}
.menuItemSelected {
   background-image: url('./images/menuItemSelected.gif');
}

.menuItemEmpty {
   background-image: url('./images/menuItemEmpty.gif');
}

/** empty item ending the menu on the right
 */
.menuItemEnder {
   width:40px;
   background-image: url('./images/menuItemEmpty.gif');
}

/** Defines the position of the different menu items
 */
#dmMainMenuItem0, #dmMainMenuItem1, #dmMainMenuItem2,
#dmMainMenuItem3, #dmMainMenuItem4, #dmMainMenuItemEnder {
  position: absolute;
  top:  0px;
}
#dmMainMenuItem1 {
  left: 92px;
}
#dmMainMenuItem2 {
  left: 184px;
}
#dmMainMenuItem3 {
  left: 276px;
}
#dmMainMenuItem4 {
  left: 368px;
}
#dmMainMenuItemEnder {
  left: 460px;
}

/** Defines the border of the main content
 *  this was done to avoid IE & Firefox differences on the way they
 *  consider CSS width/padding.
 */
#dmMainContentBorder {
  position: absolute;
  left: 0px;
  top: 25px;

  border-color: #6D7584 #6D7584 #6D7584 #6D7584;
  border-style: solid;
  border-right-width: 1px;
  border-left-width: 1px;
  border-top-width: 0px; 
  border-bottom-width: 1px;
}

/** Defines the style of the main content block where news, practices, festivals are displayed
 *  The width is defined by the parent's width (500px) minus padding and border
 */
#dmMainContent {
  width: 498px;
}

/** Defines the style of the main content when the Please wait message is displayed
 */
.mainContentWait {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
   color: #000000;

   width: 100%;
   height: 350px;

   position: relative;
   top: 150px;
}