/**
 * Global styles.
 */
html,body {
    /** Theme background base - Google Grey 50 */
    background-color: #FAFAFA;
    height: 100%;
}

a, a:link, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
}

h {
    font-weight: inherit;
}

/**
 * Main content.
 */
.psr-main {
    display: flex;
    /* Take up at least one screen (minus header) so the vert line separating
       left nav from content doesn't stop off when the left-nav is collapsed. */
    min-height: calc(100% - 68px);
}

/**
 * #header
 * Top header.
 */
#header {
    /* Theme primary text inverse - 100% white */
    color: #FFF;
    /* Theme primary - Google Blue 600 */
    background-color: #3B78E7;
 
    height: 68px;
    /* Same as #content-container, otherwise bugs on h-scroll. */
    min-width: 800px;
    width: 100%;
}

/* Hack to enable vertical alignment. This and the `#header *` selector are
   crazy-fragile. You have been warned. */
#header:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#header * {
  display: inline-block;
  vertical-align: middle;
}

#header #header-icon {
    margin-left: 24px;
    margin-right: 24px;

    background-image: url("/google-cloud-powershell/img/gcp-logo.png");
    background-repeat: no-repeat;
    background-position: center;

    width: 25px;  min-width: 25px;
    height: 25px; min-height: 25px;
}

#header .psr-headerText {
    margin-left: 24px;

    font-size: 20px;
    line-height: 36px;
    font-family: "Open Sans";
    font-weight: 100;
}

/**
 * #content-container
 * The container for the content. Keep content within a 768px column, centered
 * within the available area.
 */
#content-container {
    /* Hack- Full-page line, even if #content-container is longer than #left-nav. */
    border-left: 1px solid rgba(0,0,0,0.08);
    min-height: 100%;

    min-width: 800px;
    width: 100%;

    padding-bottom: 24px;
}

#content-container .psr-contentBlock {
    margin: auto;
    min-width: 768px;
    max-width: 768px;
}

/**
 * #content-header
 * Header for all content pages.
 */
#content-header {
    color: #3B78E7;
    background-color: rgba(0,0,0, 0.04);
    height: 114px;

    margin-bottom: 24px;
}

/* Schenanigans to make the content text centered vertically. */
#content-header .psr-contentHeaderContainer {
    display: table;
    height: 114px;
 }

#content-header h1 {
    font-family: "Roboto";
    font-weight: 300;
    font-size: 40px;
    line-height: 50px;

    display: table-cell;
    vertical-align: middle;
}

/**
 * #content
 * Parent element for all content pages.
 */
#content {
    font-family: "Roboto";
    font-size: 16px;
    line-height: 28px;
    color: rgba(0,0,0,.87);
}

#content .text {
    margin-bottom: 14px;
}

#content .psr-textBlock p {
    margin-bottom: 14px;
}

#content h2 {
    font-family: "Roboto";
    font-size: 20px;
    line-height: 36px;
    font-weight: 300;
    color: rgba(0,0,0,.54);
    margin-top: 16px;
}


#content pre {
    font-family: "Roboto Mono";
    font-size: 16px;
    line-height: 28px;
    color: rgba(0,0,0,.87);

    padding: 12px;
    background-color: rgba(0,0,0, 0.04);
    margin-bottom: 16px;

    white-space:pre-wrap;
}

/* .psr-linkTable - A table containing singular rows of links. */
table.psr-linkTable,
.psr-linkTable th,
.psr-linkTable td {
    border: 1px solid rgba(0,0,0,0.08);
    min-width: 100%;
}

table.psr-linkTable,
.psr-linkTable th {
    padding: 16px 12px;
}

.psr-linkTable td > a {
    padding: 16px 12px;
    display: block;
    height: 100%;
}

.psr-linkTable th {
    text-align: left;
    font-size: 14px;
    line-height: 26px;
    font-weight: 500;
    color: rgba(0,0,0,.87);
    background-color: rgba(0,0,0,.04);
}

.psr-linkTable tr:hover {
    background-color: rgba(0,0,0,.04);
}

/** See the applyHtmlStyling filter for more information. */
code { font-family: "Roboto Mono"; }
code.code   { color: rgba(  0,   0,  60, .87); }
code.cmdlet { color: rgba( 59, 120, 231, .87); }
code.text   { color: rgba( 67, 160,  71, .87); }

a > code.cmdlet:hover {
    text-decoration: underline;
}

/** Beta labels in their various forms. */

.beta-label {
    color: #0288d1;
    background-color: #e1f5fe;
    font-size: 60%;
    padding: 2px;

    position: relative;
    left: 0px;
}

/* The label should be to the "top right" of the surrounding text.
 Unless there is a way to do this in CSS, we just hard-code it based
 on the containing element's ID. */
#content-header .beta-label { top: -20px; }
#content        .beta-label { top:  -5px; }
#left-nav       .beta-label { top:  -3px; }