/* Body */
.tMainBackground {
    height              : 100%;
    background-color    : #f0f0f0;
}

#tPagewrapper {
    width               : 75%;
    margin              : 0 auto;
    /*z-index             : 1; for what??*/
}

#tHeader {   
    width               : 100%;
    margin              : 30px auto;
    float               : left; /*important! without it the MenuPanel doesn`t lie into header*/
    padding             : 10px 0 0;
    background          : linear-gradient(left, #000000 0%, #000000 41%, #cccccc 100%); 
    background          : -moz-linear-gradient(left, #000000 0%, #000000 41%, #cccccc 100%);
    background          : -webkit-linear-gradient(left, #000000 0%, #000000 41%, #cccccc 100%); 
    background          : -ms-linear-gradient(left, #000000 0%, #000000 41%, #cccccc 100%); 
    background          : -o-linear-gradient(left, #000000 0%, #000000 41%, #cccccc 100%); 
    filter              : progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#cccccc,GradientType=1);  
    background-color    : #000; /*solid color for Opera, because gradient doesn`t work*/
    box-shadow          : 0px 5px 30px 0px #424242; 
    -moz-box-shadow     : 0px 5px 30px 0px #424242; 
    -webkit-box-shadow  : 0px 5px 30px 0px #424242;    
    position            : relative; /*refresh-icon is absolute to header*/
}
/* The login-control */
.tLoginBox  {
    clear               : left;
    background-color    : #cccccc;
    border              : 5px solid #cccccc;
}

.tLoginBox .tEdit {
    color               : #000000;
}
.tLoginBox .tLabel {
    font-weight         : normal;
    padding-top         : 5px;
}

.tLoginTitleText {
    background-color    : #000000;
    color               : #FFFFFF;
    padding             : 1px;
}


/* Title on top of the page ("LCN Global Visualization System") */
.tFooter 
{
    display:none;
}
.tAppNameText {
    color               : #FFD800;
    display             : inline; /* for putting .tAppNameText and .tAppLicenseeText next to eachother(h2 and h3 have normally display:block)*/
    padding-left        : 50px;
}
/* Licensee below the title */
.tAppLicenseeText {
    color               : #FFFFFF;
    display             : inline; /* for putting .tAppNameText and .tAppLicenseeText next to eachother*/
    padding-left        : 15px;
    font-size           : 16px;
}

/* Navigation*/
.tMenuPanel /*div*/
{
    float               : left; /*without this the navigation flows out of tMenuPanel-background, when it breaks to the next line*/ 
    margin              : 10px 0 0;
    width               : 100%;  
    border-top          : 1px solid #f0f0f0;
    background-image    : url("navBar/navBar.gif");
    background-repeat   : repeat-x;
    background-color    : #000000;
}

.tNavBar /*ul*/
{
    width               : 75%; /* %-value for wrapping to the next line while scaling the width of browser*/
    padding-left        : 8%; /* % instead of px, because padding-left shall normally adjust to width of browser*/
}

/* Hide LCN-Logo in menu */
.tHome {
    display             : none;
}
.tHomeIcon {
    /*  Not shown anyway */
}

/*Connection-indicators in the navigation-bar*/

.ConnectionStateArea {
    position            : absolute;
    right               : 0;
    top                 : 0;
}

/*Contenttitle*/
.tTitle {
    font-size           : 18px;
    text-align          : center;
}

/* Tableau-group / tableau selection */
.tSelectionArea {
    max-width           : 1100px;
    margin              : 30px auto; /* this distance is only chosen, because in firefox the shadow doesn`t lie on .tSelectionArea*/
    background-color    : #FFFFFF;
    padding             : 3%;
    position            : relative; /*tBackToMainLink is absolute to .tSelectionArea*/
}

/* STRUCTURE:
 <div .tSelectionBox>
      <a.tGroupSelectionBox .tGroupSelectionBoxHover or NoHover/.tTableauSelectionBox .tTableauSelectionBoxHover or NoHover>
        <span.tNameinSelectionBox></span>
      </a>
   </div>
*/ 


/* div.tTransparent lies over a and greys it out*/
.tTableauGroupSelectionBoxHover .tTransparent,
.tTableauSelectionBoxHover .tTransparent {
    display             : block;
}
.tTableauGroupSelectionBox:hover .tTransparent,
.tTableauSelectionBox:hover .tTransparent {
    display             : none;
}

.tTableauGroupSelectionBoxHover:hover,
.tTableauSelectionBoxHover:hover {
     background-color   : #e0e0e0;
     border             : solid 2px #999999;
}

.tTableauGroupSelectionBoxHover:hover .tNameInSelectionBox,
.tTableauSelectionBoxHover:hover .tNameInSelectionBox {    
    background-color    : #cccccc;
    color               : #525252;
}

/* back to overview of tableaugroups (from site with tableaus)*/

.tBackToMainLink {
    width               : 25px; 
    height              : 100%; 
    background-color    : #cccccc; 
    position            : absolute; 
    top                 : 0px; 
    left                : 0px; 
    background-image    : url("arrow.png");
    background-repeat   : no-repeat;
    background-position : center center;
}

 .tBackToMainLink:hover {
   background-color     : #C4C4C4; 
   background-image     : url("arrowhover.png");
}

.tBackToMainLink span {  /* hide text from link */
    display             : none;
}

@media only screen and (max-width: 1570px) {
    
    .tSelectionArea {
        padding-left    : 10%;
    }
    
}

@media only screen and (max-width: 1018px)  {
    
    .tSelectionArea {
        padding-left    : 20%;
    }
    
}

@media only screen and (max-width: 800px) {
    
    .tTitle {
        font-size       : 14px;
        text-align      : left;
        margin-left     : 20px;
    }
    
    .tSelectionArea {
        padding-left    : 15%;
    }
    
}

@media only screen and (max-width: 715px) {

    #tHeader {
        width           : 100%;  
        margin          : 0;
    }
  
    #tPagewrapper { 
        width           : 100%;
        margin          : 0;
    }
          
    .tSelectionArea {
        padding-left    : 5%;
    }
}
@media only screen and (max-width: 620px) {
    
    .tSelectionArea .tBackToMainLink {
    background-position : center 35px;
    }
    
}

@media only screen and (max-width: 495px) 
{
      .tSelectionArea {
       padding-left     : 8%;
    }
}

@media only screen and (max-width: 433px) {
    
    .tAppLicenseeText {
        display         : none;
    }
    
    .tSelectionArea {
       padding-left     : 15%;
    }
}