/*
font-family: 'Adobe Garamond Pro', Garamond, "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", 'Arbutus Slab', Georgia, serif;
font-family: 'Ubuntu Mono', Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
font-family: 'Lato','Helvetica Neue', sans-serif;
*/

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

body {
    text-align: center;
    background: #333;
    font-family: 'Lato','Helvetica Neue', sans-serif;
    color: #eee;
    padding: 0;
    margin: 10px;
}

code {
    font-family: 'Lato','Helvetica Neue', sans-serif;
}

a {
    color: #e7a226;
    text-decoration: none;
}

a:hover {
    color: #5a9edd;
}

#main {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

#main h1 {
    /*background: #ffc;*/
    padding: .3em 0;
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    color: #eee;
    border-bottom: 1px solid #777;
    margin: 0 10px;
    text-align: center;
    display: none;
}

#main h1 a {
    color: #ffc;
    text-decoration: none;
}

#main > h2 {
    font-size: 10px;
    margin: 2px 0;
}

#main h6 {
    /*background: #ffc;*/
    padding: 0;
    margin: 0;
    font-size: .75em;
    padding: .215em 0;
    font-weight: normal;
    color: #ffc;
    border-top: 1px solid #777;
    margin: 0 10px;
    margin-top: 15px;
    text-align: center;
}

#inp {
    margin: 0 auto;
}

h2 {
    font-size: 14px;
    line-height: 1;
    margin: 10px 10px 10px;
}

#inp input {
    display: block;
    float: left;
    width: 62%;
    min-height: 44px;
    margin: 0 2% 10px 0;
    border: none;
    border-right: none;
    padding: 0 2%;
    vertical-align: top;
    background-color: #f8ffff;
}

#inp input:focus {
}


#pre {
    margin: 10px 10px;
    display: none; /*hide the dice buttons temporarily */
}

.button-group {
    overflow: hidden;
    clear: both;
}

button{
    width: 32%;
    margin: 0 2% 10px 0;
    padding: 5px 0;
    min-height: 44px;
    border: none;
    float: left;
    display: block;
    font-weight: 700;
    font-size: 28px;
    color: white;
    background: #555;
    text-transform: lowercase;
}

button.half {
    width: 15%;
}

button.end {
    margin-right: 0;
}

button#pre_d,
button#pre_plus,
button#pre_minus {
    background: #777;
}

button#inp_backspace {
    float: right;
    width: 32%;
    margin: 0;
    font-size: 12px;
}

/* confirmation buttons */
#confirm button {
    font-size: 18px;
    background-color: #c53333;
}

#confirm button#pre_clear {
    font-size: 12px;
}

#confirm button#inp_go {
    background-color: #29a529;
}

#pre button:hover {
    background-color: #ccc;
}


/* results */
#results {
    margin: 10px 0;
    padding: 0;
    border: 1px solid #fff;
    height: 110px;
    overflow: auto;
    background-color: #505048;
    color: #ffe;
    font-size: 12px;
    clear: both;
}

.roll_source {
    margin-top: .3em;
    margin-bottom: 3px;
}

.roll_source em{
    color: #ff0;
    font-style: normal;
    font-weight: bold;
}

.roll_source a {
    color: #8ee;
}

.roll_result {
    margin: 5px 0;
    font-weight: bold;
    font-size: 1.2em;
}

.roll_result  strong{
    font-size: 1.2em;
    color: white;
    background: #111;
    padding: 1px .5em;
    -moz-border-radius: 1em;
}

.roll_result  sub{
    color: #999;
}

.roll_help {
    margin: 10px;
    padding: 0.3em;
    text-align: justify;
    color: #ffa;
    font-size: 11px;
}

.roll_help strong {
    color: #ffe;
}

.roll_help hr {
    border: none;
    border-bottom: 1px solid #777;
}

.roll_help a {
    color: #8ee;
}

.roll_help ul {
    padding: 0 1em;
    margin: 10px;
}

.hidden {
    display: none;
}

noscript  div {
    margin: 10px;
    text-align: justify;
    display: block;
}

noscript h2 {
    text-align: center;
    color: #ee7;
    font-weight: normal;
}

#contact  {
    margin: 10px;
    text-align: justify;
    font-size: 10px;
    color: #999;
}

#contact p {
    margin: 0;
    margin-bottom: 5px;
}

#contact button{
    margin: 0;
    border: 1px solid gray;
    -moz-border-radius: .75em;
    -webkit-border-radius: .75em;
    border-radius: .75em;
    background: #ea3;
    color: #028;
}

#contact button:hover {
    border: 1px solid #a81;
}

#footer {
    font-size: 12px;
}

#footer:after {
    display: block;
    content: '';
    clear: both;
}

#footer a {
    float: left;
    display: block;
    padding: 10px;
}

#footer a.right {
    float: right;
}