/**
 * Wf4Ever-styling of specification - overrides styling from ReSpec.js
 */

@import url(http://fonts.googleapis.com/css?family=Tauri);
@import url(boxes.css);

body.wf4ever {
    /* Disable 'Unofficial Draft' */
    background-image: none;
}
/* not so red! */
body.wf4ever code {
    color: #a55;
}
.logo {
}
.logo img {
    position: absolute;
    left: 4em;
    top: 0;
    height: 5em;
}
blockquote {
    font-style: italic;
}
.status {
    position: fixed;
    left: 0em;
    top: 0em;
    text-align: right;
    vertical-align: middle;
    /* Square version of the inside span. Slightly larger */
    width: 24em;
    height: 24em;
    /* Don't steal focus! */
    z-index: -1;
    /* For mobile browsers who overlap */
    opacity: 0.6;
    /* Enable for debugging 
    background: #abc;
     */
    
    /** From http://stackoverflow.com/questions/1080792/how-to-draw-vertical-text-with-css-cross-browser */

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /* also accepts left, right, top, bottom coordinates; not
    * required, but a good idea for styling */
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    /* Should be unset in IE9+ I think. */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* The actual status box */
 .status div {   
    display: block;
    background: green;
    color: white;
    width: 23em;
    padding-top: 0.3em;
    padding-left: 0em;
    padding-right: 5em;
    padding-bottom: 0.3em;
    /* Enable for debugging 
    border: red thin solid;
     */
} 

/* And text inside, don't confuse fonts as it breaks em above */
.status div span {
    font-family: "Tauri";
    font-size: larger;
}