/* The basic styling is for mobile phones. */

/*
iPhone 5:       320 x  568
Nexus 5:        360 x  640
iPhone 6:       375 x  667
Nexus 5X:       411 x  731
iPhone 6 Plus:  414 x  736
Nexus 6P:       435 x  773
Nexus 7:        600 x  960
iPad Mini:      768 x 1024
iPad:           768 x 1024
Nexus 10:       800 x 1280
*/

:root {
    --background-color-default: #00BBFF;
    --foreground-color-default: #FFF;
    --height-of-site-header: 28px; 
    --margin-of-modal-dialog: 5px;
    --padding-of-modal-body: 5px;
    --width-of-carousel-control: 24px;
}

[class*="col-"] {
    width: 100%;
    float: left;
    position: relative;
    min-height: 1px;
    margin: 10px;
}

.col-p-1 {width: 8.33%;}
.col-p-2 {width: 16.66%;}
.col-p-3 {width: 25%;}
.col-p-4 {width: 33.33%;}
.col-p-5 {width: 41.66%;}
.col-p-6 {width: 50%;}
.col-p-7 {width: 58.33%;}
.col-p-8 {width: 66.66%;}
.col-p-9 {width: 75%;}
.col-p-10 {width: 83.33%;}
.col-p-11 {width: 91.66%;}
.col-p-12 {width: 100%;}

.ic-site-header {
    height: var(--height-of-site-header); 
    line-height: 28px;
    font-size: 20px;
    margin: 2px;
    padding-right: 5px;
    border-radius: 2px;
    background-color: var(--background-color-default);
}
.ic-site-logo {
    -ms-transform: scale(0.5,0.5); /* IE 9 */
    -webkit-transform: scale(0.5,0.5); /* Safari */
    transform: scale(0.5,0.5);
    transform-origin: top;
    margin: 2px;
    margin-left: -10px;
}
.ic-site-name {
    float: right !important;
    font-family: monospace;
    font-weight: bold;
    color: white;
}

.container {
    padding-right: 2px;
    padding-left: 2px;
    margin-right: auto;
    margin-left: auto;
}

.menu, .ic-menu-fix {
    background-color: var(--background-color-default);
    color: var(--foreground-color-default);
    margin: 2px;
    padding: 2px;
    border-radius: 2px;
    z-index: 1;
}
.ic-menu-fix {
    position: fixed; 
    top: 0px;
}

.nav-pills>li>a {
    border-radius: 2px;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 5px 7px;
    background-color: var(--background-color-default);
}

.ic-iframe {
    margin: 5px;
    padding-right: 10px;
    width: 100%;
}

.ic-counter-line-below-iframe {
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    padding-right: 10px;
}

.table {
    min-height: 80px;
    margin-bottom: 0px;
}
.table>tbody>tr>td {
    text-align: center;
    vertical-align: middle;
    border-top: 0px;
    padding: 0px;
}
.row {
    margin-right: 0px;
    margin-left: 0px;
}

.btn-gallery {
    color: var(--foreground-color-default);
    background-color: transparent;
    border-color: var(--background-color-default);
    padding: 0px;
    line-height: 1.3333333;
    border-radius: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
}
.td-thumbnail {
    height: 58px;
}
.img-thumbnail {
    margin: 3px;
}
.ic-gallery-name {
}

.panel-body {
    padding-left: 4px;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 0px;
}
.panel-group .panel+.panel {
    margin-top: 2px;
}

.modal-dialog {
    margin: var(--margin-of-modal-dialog);
    width: auto;
}
.modal-body {
    padding: var(--padding-of-modal-body);
}
.modal-footer {
    padding: 5px;
}
.ic-close-button-div {
    position: absolute;
    top:0;
    right:0;
    z-index:100;
    margin-top:5px;
}
.ic-btn-close-modal-carousel {
    z-index: 100;
    color: white;
}

.carousel {
    background-color: #ddd;
}
.carousel-control {
    width: var(--width-of-carousel-control);
    opacity: 1;
    background-color: var(--background-color-default);
    font-size: inherit;
}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
    right: 5px;
    margin-right: 0;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
    left: 5px;
    margin-left: 0;
}
.carousel-indicators li {
    visibility: hidden; 
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    margin: auto;
}
.ic-glyphicon-modal-carousel {
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,.0);
}