/*
   Site.css

   Contains styles used by more than one page.
*/ 


/**********************************
   Multiple pages
 **********************************/

BODY 
{
    font-family: verdana, sans-serif;
    font-size: 95%;
    margin: 0;
}

.noWrap
{
    white-space: nowrap;
}

/* Remove default blue border around images within links. */

A IMG
{
    border: none;
}

.divPageCaption
{
    font-size: 120%;
    margin-bottom: 1.5em;
}

.spnErrorMessage
{
    color: #ff0000;
}

/* Class used by ASP.NET for disabled controls. */

.aspNetDisabled 
{
    color: #808080;
}

/*
Two-column tables for a user input form, where Label controls are in the left
column and the input controls are in the right column.
*/

.tbl2ColumnForm
{
}

.tbl2ColumnForm TD
{
    padding: 0.3em;
}

/* The cells in the label column should be right-aligned. */

.td2ColumnFormColumn1
{
    text-align: right;
}

/* TextBox for entering account information. */

.txbAccountInfo
{
    width: 15em;
}


/**********************************
   Site.master
 **********************************/

.divSiteLogo
{
    margin-bottom: 1.3em;
}

.divOverallPage
{
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    width: 950px;
    margin-left: auto;
    margin-right: auto;
}



.divAccountLinks
{
    margin-bottom: 0.8em;
    -webkit-text-size-adjust: 100%;
}

.spnSearch
{
    float: right;
}

.divFooter
{
    margin-top: 3.0em;
    margin-bottom: 1.0em;
    -webkit-text-size-adjust: 100%;
}

.hlFeedImage
{
    vertical-align: top;
}

.spnFooterLink
{
    margin-right: 1em;
    white-space: nowrap;
}

.divAccountLinks, .divFooter
{
    font-size: 85%;
}


/**********************************
   TagControl.cs
 **********************************/

.spnTag
{
    margin-right: 0.5em;
}


/**********************************
   Graph.aspx and EditGraph.aspx
 **********************************/

.imgGraph
{
    border: 1px solid black;
}

.divGraph
{
    margin-bottom: 0.6em;
}

.divGraphAttribute
{
    margin-bottom: 1em;
}

.divGraphAttributeLabel
{
    float: left;
    width: 8em;
    text-align: right;
    margin-right: 1em;
}

.divGraphAttributeValue
{
    margin-left: 9em;
}

.divWorkbook, .divGraphML, .divWorkbookSettings
{
    margin-top: 1.0em;
}

.imgAboutWorkbook IMG, .imgAboutGraphML IMG, .imgAboutWorkbookSettings IMG
{
    vertical-align: text-bottom;
}

.divSMRFLogo
{
    float:right; 
    margin-top:30px;
}

.divContent
{
    margin-top:120px;
}

.divLogo
{
    position:absolute; 
    margin-top:10px;
}

#hlSiteLogo img
{
    max-width: 500px;
}



/*
    YouTube like play button
    */


.play { 
  background: #e62117;
  border-radius: 50% / 10%;
  color: #FFFFFF;
  font-size: 5px; /* change this to change size */
  height: 3em;
  /*margin: 20px auto;*/
  padding: 0;
  position: relative;
  text-align: center;
  text-indent: 0.1em;
  transition: all 150ms ease-out;
  width: 4em;
  cursor:pointer;
}

.play:hover {
  background: #b31217;
}

.play::before { 
  background: inherit;
  border-radius: 5% / 50%;
  bottom: 9%;
  content: "";
  left: -5%;
  position: absolute;
  right: -5%;
  top: 9%;
}

.play::after {
  border-style: solid;
  border-width: 1em 0 1em 1.732em;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
  content: ' ';
  font-size: 0.75em;
  height: 0;
  margin: -1em 0 0 -0.75em;
  top: 50%;
  position: absolute;
  width: 0;
}

@media screen and (max-width: 480px){
  .divOverallPage
    {
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .imgGraph
    {
        border: 1px solid black;
        width: 100%;
    }
    
    #hlSiteLogo img
    {
        width: 95%;
    }
    
    #descriptionLabel
    {
        display:none;
    }
    
    #descriptionValue
    {
        margin-left: 0;
    }

    a 
    {
        word-wrap: break-word;
    }
    
    .spnSearch 
    {
        float:none;
        padding: 5px;
    }
    
    .pnlGraphCanvas
    {
        width: 100% !important;
        height: 400px !important;
    }
    
    .divSMRFLogo
    {
        float:right; 
        margin-top:80px;
    }
    
    .divContent
    {
        margin-top:170px;
    }
    
    .divLogo
    {
        position:absolute; 
        margin-top:10px;
        width: 100%;
    }    
}