@import url("normalize.css");

body {
    background-color:#e0e0e0;
    /*background-color:#f0f0f0;*/
    font-family:Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    font-size:12px;
    -webkit-text-size-adjust: 100%;
}

#content {
    position:relative;
    width: 300px;
    margin:0 auto;
    padding:0 10px; /*total width:320px*/
    background-color:#f0f0f0;
    z-index: 10;
}

header h2 {
    font-size:8px;
    text-align: center;
    margin:0;
    padding:10px 0;
    line-height:100%;
    font-weight: 100;
}

header h1 {
    font-weight: 900;
    font-size:40px;
    text-align: center;
    margin:0;
    padding:0 0 10px;
    line-height:100%;
}
#result {
    margin-right: -6px;
}
#resultPoint, #resultYenPerMl
{
    background-color: #fff;
    width:147px;
    border-radius: 4px;
    margin:0 6px 0 0;
    padding:10px 0;
    float:left;
    text-align: center;
}

h3 {
    background-color:#666;
    color:#eee;
    padding:4px 7px;
    font-size:12px;
    margin-top:20px;
    margin-bottom:5px;

    /* border-radius */
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}

#result h4 {
    margin:0;
    padding:0;
    font-style:none;
    font-weight:100;
    font-size:11px;
}

#result span {
    margin:0 0 10px;
    padding:0;
    font-style:none;
    font-weight:100;
    font-size:12px;
}
#result span.resnum {
    font-weight:900;
    font-size:30px;
}
#resultPoint span.resnum {
    color:#af4352;
}
#resultYenPerMl span.resnum {
    color:#a5903c;
}

#inputArea {
    margin-right:-9px;
}
#inputMl, #inputPer, #inputYen {
    float:left;
    width:94px;
    margin:15px 9px 15px 0;
}

#inputArea h4{
    text-align:center;
    font-weight:100;
    font-size:14px;
    margin:0;
    padding:0;
}
#inputArea span.unit {
    font-size:80%;
}

#calculator input[type="number"] {
    text-align:center;
    border: 1px solid #bbb;
    width:90px;
    font-size:18px;
    height: 26px;

    /* border-radius */
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;

    /* box-shadow */
    box-shadow:rgba(153, 153, 153, 0.4) 1px 1px 2px 1px inset;
    -webkit-box-shadow:rgba(153, 153, 153, 0.4) 1px 1px 2px 1px inset;
    -moz-box-shadow:rgba(153, 153, 153, 0.4) 1px 1px 2px 1px inset;
}

#calculator input[type="button"] {
    display: block;
    margin:0 96px 0 90px;
    width:120px;
    padding:0.9em 0;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #444;
    outline:none;

    /* border */
    border:1px solid rgb(79, 79, 79);

    /* border-radius */
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;

    /* box-shadow */
    box-shadow:rgba(255, 255, 255, 0.9) 0px 1px 2px 0px inset;
    -webkit-box-shadow:rgba(255, 255, 255, 0.9) 0px 1px 2px 0px inset;
    -moz-box-shadow:rgba(255, 255, 255, 0.9) 0px 1px 2px 0px inset;

    /* gradient */
    background: -moz-linear-gradient(top, #555, #333);
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
}

#calculator input[type="button"]:hover {
    /* gradient */
    background: -moz-linear-gradient(top, #333, #111);
    background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
    }
    #calculator input[type="button"]:active {
    /* gradient */
    background: -moz-linear-gradient(top, #000, #444);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
}

#history {
}

#history .pointBar {
    height:12px;

    /*background-color:#efaab3;*/
    background: #0026a0;
    background: -webkit-linear-gradient(90deg, #00a8ff, #0026a0);
    background: -moz-linear-gradient(90deg, #00a8ff, #0026a0);
    background: -ms-linear-gradient(90deg, #00a8ff, #0026a0);
    background: linear-gradient(90deg, #00a8ff, #0026a0);



    margin-bottom:8px;

    /* border-radius */
    border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
}

#history .historyPointNum {
    font-weight: bold;
    color:#af4352;
}
#history .historyYenPerMlNum {
    font-weight: bold;
    color:#8a741c;
}

#document {
}

#document p {
    margin-top:5px;
}

#document table {
    width:300px;
}
#document th {
    font-weight:normal;
}
#document th,
#document td {
    border:1px solid #aaa;
    text-align:center;
	background-color:#fafafa;
    padding:2px;
}

#document td:first-child {
    width:2em;
}

.numericalFormulaArea {
    width:292px;
    text-align:center;
    display:inline-block;
	border:1px solid #aaaaaa;
	padding:3px;
	font-family:monospace;
	background-color:#fafafa;
}
.caption { font-size:75%; }

#meyasuArea h3 {
    margin-right:4px;
    margin-bottom:2px;
}
#meyasuArea {
    margin-right:-4px;
}
#youryouArea, #dosuuArea {
    float:left;
}
#meyasu table {
    width:148px;
    margin-right:4px;
}
#meyasu th {
    font-weight:normal;
}
#meyasu th,
#meyasu td {
    border:1px solid #aaa;
    text-align:center;
	background-color:#fafafa;
    padding:2px;
}



#notice {
    margin:10px 0;
    height: auto;
    display: table;
}
#notice div {
    display: table-cell;
}

#notice .iconfont {
    line-height:0.5em;
    width:70px;
    vertical-align:middle;
}
#notice p {
    margin:0;
    line-height:1.3em;
    font-size:8px;
    width:230px;
}

.icon-stophand, .icon-bikamark {
    margin:0;
    padding:0;
}

.icon-stophand { font-size: 26px; }
.icon-bikamark { font-size: 26px; }

#tweetButton {
    text-align: center;
    margin-top: 5px;
}

#tweetButton a {
    color: #55acee;
    font-weight: bold;
}
#tweetButton a:link { color: #55acee; }
#tweetButton a:visited { color: #55acee; }
#tweetButton a:hover { color: #55acee; }
#tweetButton a:active { color: #55acee; }

#copyright {
	margin:20px auto 0;
	border-top:1px solid #dddddd;
	padding-top:10px
}

#copyright address {
    font-style:normal;
    text-align:center;
}

#qlook {
	margin:20px auto 0;
    text-align:center;
}

#horoyoiLinkArea p {
    margin:0;
}
#horoyoiLinkArea .horoyoiLink {
    border:1px solid #ddd;
    padding: 4px;
    background-color:#fafafa;
    text-align: center;
}

.nojsnote {
    text-align:center;
}

/*clearfix*/
.clear,
section:after,
footer:after,
#resultPoint:after,
#resultYenPerMl:after,
#notice:after
{
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
}

.ad_display {
    position: absolute;
    top: 20px;
    z-index: 0;
}
#imobile_ad_display_right { right: 20px; }
#imobile_ad_display_left  { left: 20px; }