simpleid/www/html/simpleid.css

/*
 * SimpleID
 *
 * Copyright (C) Kelvin Mo 2009
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public
 * License as published by the Free Software Foundation; either
 * version 2 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public
 * License along with this program; if not, write to the Free
 * Software Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
 * 
 * $Id$
 */

@import url(normalize.css);

/* General elements -------------------------------------------------------- */
html {
    font: 12px/19px Helvetica, Arial, sans-serif;
}

h1 {
    font-weight: normal;
    color: #666666;
}

a {
    border-bottom: 1px solid #CCCCCC;
    color: #1144AA;
    text-decoration: none !important;
    font-weight: bold;
}
a:visited {
    border-color: #CCCCCC;
    color: #114499;
}
a:focus, a:hover {
    border-color: #4488EE;
    color: #4488EE;
}

table {
    border-collapse: collapse;
    margin: 0 0 1em 0;
    width: 100%;
}

td, th {
    border-bottom: 1px solid #CCCCCC;
    text-align: left;
    vertical-align: top;
    padding: 5px 5px;
}
th {
    border-bottom: 0px;
    background-color: #666666;
    color: #FFFFFF;
    white-space: nowrap;
    font-weight: bold;
}

pre {
    border:1px solid #CCCCCC;
    padding: 5px;
    font-family:"Bitstream Vera Sans Mono","Courier New",monospace;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: scroll;
}

/* Page layout ------------------------------------------------------------- */
#header {
    background-color: #666666;
    color: #CCCCCC;
    padding: 0px 10px;
    line-height: 1;
}
#header-inner { margin: 0px auto; max-width: 1140px; }

#header h1 {
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0.5em 0;
    color: #CCCCCC;
    letter-spacing: 0;
}

#header h1 a {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: none;
}

#nav-toggle, #logo { float: left; padding: 5px 0px; }
#nav-toggle {
    padding: 5px;
    border-right: 1px solid #FFFFFF;
    margin-right: 0.5em;
    cursor: pointer;
    display: none;
}
#nav-toggle img { padding: 0.5em; }

#nav {
    background-color: #666666;
    color: #CCCCCC;
    padding: 5px 10px;
}
#nav-inner { margin: 0px auto; max-width: 1140px; }
#nav ul {
    margin: 0;
    padding: 0;
    text-align: left;
}
#nav li {
    display: inline;
    list-style-type: none;
}
#nav a {
    background-color: #888888;
    padding: 6px 8px;
    border-width: 0;
    color: #FFFFFF;
}
#nav ul#nav-left { float: left; }
#nav ul#nav-right { float: right; }

#user {
    float: right;
    margin: 0.5em 0;
    padding: 5px 0;
}
.logged-in-as .identity {
    padding-left: 20px;
    background: transparent url(user.png) no-repeat top left;
    color: #FFFFFF;
}
.logged-in-as a {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    font-weight: normal;
}
#logout:before { content: " · "; }

#user-toggle {
    float: right;
    padding: 5px;
    margin-left: 0.5em;
    border-left: 1px solid #FFFFFF;
    cursor: pointer;
    display: none;
}
#user-toggle img { padding: 0.5em; }

#footer {
    margin: 2em 0;
    padding: 0px 10px;
    text-align: right;
    font-size: 0.9em;
    color: #999999;
}
#footer address { font-style: normal }
#footer a { color: #999999; }

#content {
    margin: auto;
    padding: 1em 10px;
    max-width: 1140px;
    clear: both;
}


/* Specific elements ------------------------------------------------------- */
.realm, .site {
    padding-left: 20px;
    background: transparent url(world.png) no-repeat top left;
}
.app {
    padding-left: 20px;
    background: transparent url(application.png) no-repeat top left;
}
.device {
    padding-left: 20px;
    background: transparent url(drive.png) no-repeat top left;
}
.url-elide { color: #999999; }

span.last-time { display: none; }

.message, .login-security {
    border: 1px solid #666666;
    border-radius: 4px;
    padding: 0 10px;
    background: #DDDDDD;
    margin-bottom: 10px;
}
.message p { line-height: 1; }

.unsecure {
    border: 1px solid #AAAA11;
    background: #FFFFDD;
}
.unsecure p { padding-left: 20px; background: transparent url(lock-open.png) no-repeat top left; }
.secure {
    border: 1px solid #44AA11;
    background: #EEFFDD;
}
.secure p { padding-left: 20px; background: transparent url(lock.png) no-repeat top left; }

.block {
    background-color: #EEEEEE;
    margin-bottom: 20px;
}
.block-header {
    background-color: #666666;
    margin:0 0 5px;
    padding: 5px 10px;
}
.block-header h2 {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    border-top-width: 0;
}
.block-header-links {
    float: right;
    font-size: 0.9em;
    text-align: right;
    white-space: nowrap;
}
.block-header-links a {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    font-weight: normal;
}
.block-content {
    padding: 5px 10px;
}
.block-content p {
    margin: 0 0 5px 0;
    padding: 0;
}
.block-content h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 0;
    padding: 5px 0 0 0;
}

#discovery label { display: inline; }
#discovery-templates { display: none; }

.otp-key {
    font-size: 18px;
    font-family: "Bitstream Vera Sans Mono","Courier New",monospace;
    margin: 5px;
}
.otp-letters { padding: 0 2px; }
#otp-key-qr { padding: 16px 0; }

/* Forms */
.form-item { margin: 1em 0; }

label {
    display: block;
    font-weight: bold;
    padding: 2px 0;
}
label.option { font-weight: normal; }

select, textarea, input[type="text"], input[type="password"], input[type="number"] {
    display: inline-block;
    padding: 0.5em;    
    border: 1px solid #AAAAAA;
    border-radius: 2px;
}
select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
    border-color: #1144AA;
}

input[type="submit"], input[type="button"] {
    padding: 0.5em 1em;
    background-color: #EEEEEE;
    border: 1px solid #999999;
    border-radius: 2px;
    zoom: 1;
    vertical-align: middle;
    font-weight: bold;
}
input[type="submit"]:active, input[type="button"]:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
}
input[type="submit"][disabled], input[type="button"][disabled] {
    color: #999999 !important;
    background-color: #EEEEEE !important;
    border-color: #999999 !important;
}
input[type="submit"].form-default, input[type="button"].form-default {
    color: #FFFFFF;
    background-color: #1144AA;
    border-color: #114499;
}

input[type="radio"], input[type="checkbox"] { margin: 0.5em 0; }
input[type="radio"]:focus, input[type="checkbox"]:focus {
    outline: 1px auto #1144AA;
}

/* Dialogs and dialog pages */
.dialog-page { background: #EEEEEE; }
.dialog-page #content {
    padding-top: 50px;
    max-width: 400px;
}
.dialog-page #content-inner {
    padding: 20px;
    border: 10px solid #DDDDDD;
    background: #FFFFFF;
}

.dialog-page form { padding-right: 2px; } /* Used to adjust the padding in text boxes */
.dialog-page .form-item { padding-right: 1em; } /* Used to adjust the padding in text boxes */
.dialog-page select, .dialog-page textarea, .dialog-page input[type="text"], .dialog-page input[type="password"], .dialog-page input[type="number"] {
    width: 100%;
}

/* Mobile devices ---------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    html { font-size: 14px; }

    #logo .version { display: none; }

    #nav-toggle, #user-toggle { display: block; }
    #nav-toggle.expand, #user-toggle.expand { background-color: #888888; }

    #nav {
        display: none;
        position: absolute;
        float: none;
        left: 10px;
        top: 40px;
        padding: 0;
    }
    #nav.expand { display: block; }
    #nav li { display: block; }
    #nav a { display: block; }

    #user {
        display: none;
        position: absolute;
        float: none;
        right: 10px;
        top: 40px;
        background-color: #888888;
        margin: 0;
        padding: 0 8px;
    }
    #user.expand { display: block; }
    #user span {
        display: block;
        padding: 6px 0;
    }
    #logout:before { content: ""; }
    
    .dialog-page { background: #FFFFFF; }
    .dialog-page #content { padding-top: 10px; }
    .dialog-page #content-inner {
        padding: 0px;
        border-width: 0px;
    }
}