﻿html{
    overflow-y: scroll;
}

body{
    font-family:'Meiryo'!important;
    background-color:#E8E8E8!important;
}

/* header  */
.header{
    background-color:#FFF!important;
}

.header .navbar{
    margin-bottom:0px;
}

.navbar-toggle .icon-bar{
    background-color:#F1C40F;
}
.navbar-toggle .icon-bar{
    background-color:#ECF0F1;
}

.navbar-toggle:hover::before,
.navbar-toggle:focus::before {
    color: #F1C40F !important;
}

#chongshih-navbar-collapse li > a,
#chongshih-navbar-collapse li > a{
    color:#ECF0F1;
}
#chongshih-navbar-collapse li > a:hover,
#chongshih-navbar-collapse li > a:focus{
    color:#F1C40F;
}

#imgLogo {
    margin-top:50px;
}

/* footer */
footer.footer {
  background-color: #3498DB;
  margin-top:140px;
}

footer.footer ul{
  margin-top:16px;
}

footer.footer img{
  width:36px;
}

/* index */
.carousel .item,
.carousel-control.left, 
.carousel-control.right{ 
     background-color:#45B1E8;
}

.tile{
    height:340px;
    overflow-y:hidden;
    box-shadow: 3px 3px 6px 5px #888888;
}

/* about */
#outLinks ul > li{
    text-indent:1em;
}

#outLinks ul > li > a{
    text-indent:0em;
    color:#3498DB;
}

/* album*/
.page img.img-rounded {
    height: 140px;
    width: 140px;
}

#imgLoad{
    padding-top:40px;
}

#album-switch{
    padding-top:10px;
}

#album-switch > li > a{
    color:#3498DB;
    background-color:#E8E8E8;
    border-radius:0px;
}

#album-switch > li.active > a{
    color:#FFFFFF;
    background-color:#3498DB;
}

#photoContainer .photo-item{
    margin-top:10px;
    margin-bottom : 5px;
}


/* price */
#productClassPageScrollContainer{
    padding-top:10px;
}

#caculateContainer{
    padding-top:15px;
}

#productContainer .label-custom {
    background-color: #3498DB;
    color:#ECF0F1;
}

#productContainer img{
    height:120px;
    width:120px;
}

#productContainer .panel {
    background-color:#F0F0F0;
    box-shadow: 5px 3px 10px 3px #444444;
}

#productContainer .panel p{
    white-space: pre-line;
}

#productContainer .panel label{
    font-size:20px;
    padding-right:5px;
}

#productContainer a.showAlbum {
    font-size: 20px;
    color:#3498DB;
}

#productContainer a.showAlbum:hover {
    color:#34495E;
}

.btnToTop span{
    color:#888888;
}
.btnToTop span:hover{
    color:#222222;
}

/* contact */
.jumbotron{
    box-shadow: 5px 3px 10px 3px #444444;
}

/* button */
.btn.btn-page-scroll {
    background: none;
    padding: 12px 22px;
    border-radius:0px;
    border-bottom: none !important;
    border-top: none !important;
}
.btn-info.btn-page-scroll {
    border: 2px solid #31708f;
    color: #31708f;
}

.btn{
    border-radius:0px!important;
}

@media screen and (min-width: 768px){

    /* header  */
        #websiteName{
        font-size:52px;
    }

    .navbar-toggle .icon-bar{
        background-color:#ECF0F1;
    }

    .navbar-toggle:hover::before,
    .navbar-toggle:focus::before {
        color: #F1C40F !important;
    }

    .navbar-collapse ul.nav {
        margin-right: 0;
        float: none;
        width: 100%;
    }

    .navbar-collapse ul.nav li {
        width: 20%;
        text-align: center;
    }

    /* index */
    #carousel-example-generic .carousel-inner div.item > img{
        height:450px;
    }
    .tile p{
        font-size:18px!important;
    }

    /* contact */
    #contactInfoContainer address{
        font-size:24px!important;
    }
}

@media screen and (max-width: 767px) {

    /* header  */
    .navbar-collapse ul.nav li{
        width: 100%;
        text-align:center;
    }

    #imgLogo {
        max-width:150px;
        max-height:150px;
    }

    #websiteName{
        font-size:28px;
    }

    #websiteTitle{
        font-size:16px;
    }

    /* index */
    #carousel-example-generic .carousel-inner div.item > img{
        height:300px;
    }

    /* price */
    #productContainer .panel img{
        height:80px;
        width:80px;
    }

    #productContainer .panel h4{
        font-size:20px;
    }

    #productContainer .panel p,
    #productContainer .panel label{
        font-size:14px;
    }

    .btn.btn-page-scroll{
        padding: 3px;
        font-size: 14px;
        line-height: normal;
        border:1px solid;
    }

    /* contact */
    #contactInfoContainer address img{
        width:18px;
        height:18px;
    }

    #contactInfoTitle{
        font-size:30px;
    }
}


