/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2015/08/03, 20:40:07
    Author     : http://hekaton.jp tetsuya-takiguchi
*/

/*
 Layout Common
-----------------------------------------------*/
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/*
 wrapper Layout
-----------------------------------------------*/
#wrapper {
    position: relative;
    height: auto !important; /*IE6対策*/
    height: 100%; /*IE6対策*/
    min-height: 100%;
    background-color: #595956;
}

/*
 header Layout
-----------------------------------------------*/
header {
    background-color: #F2AB27;
    border-bottom: 3px solid #0D0D0D;
}

header h1 {
    color: #D95C14;
}

/*
 content Layout
-----------------------------------------------*/
.content {
    /*padding-bottom: 140px;*/
}

/*
 input number area 
-----------------------------------------------*/
div.number-input {
    display: inline-block;
    float: left;
    width: 30%;
}

div.number-input .number {
    width: 100%;
}

div.number-rest {
    display: inline-block;
    float: left;
    width: 5%;
    text-align: center;
}

.txtNumber {
    color: #D95C14;
}

/*
 button number area 
-----------------------------------------------*/
.number-input-area {
    margin-bottom: 1em;
    padding: 1em;
}

.number-button-area {
    margin-bottom: 2em;
    padding: 1em;
}

.number-button-table {
    background-color: #F2AB27;
    border-collapse: separate;
    border-spacing: 1em;
    width: 100%;
}

.number-button-table td {
    width: 33.33333%;
}

.btnNumber {
    width: 100%;
}

/*
 footer area 
-----------------------------------------------*/
footer {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0px;
    background-color: #F2AB27;
    border-top: 3px solid #0D0D0D;
}

footer div.row {
    text-align: center;
}

/*
 partial css
-----------------------------------------------*/
.margin-bottom-1em {
    margin-bottom: 2em;
}

.margin-bottom-2em {
    margin-bottom: 2em;
}

.padding-1em {
    padding: 1em;
}

/*
 Media queries
-----------------------------------------------*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    h1 {
        font-size: 28px;
    }
    
    .content {
        padding-bottom: 2em;
    }
    
    footer {
        height: 2me;
    }

    .numberArea .input-group-addon {
        padding: 10px 2px;
    }

    .btnNumber {
        height: 2.5em;
        font-size: 20px;
    }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

    h1 {
        font-size: 36px;
    }

    .content {
        padding-bottom: 4em;
    }
    
    .numberArea .input-group-addon {
        padding: 10px 16px;
    }

    footer {
        height: 4em;
    }
    
    footer .container-fluid {
        margin-top: 1em;
    }

    .btnNumber {
        height: 2.5em;
        font-size: 40px;
    }
}