/*
.ui-selected,
.ui-selecting{
	background-color	:#C0C0C0;
	color				:#000000;
}
*/

.click-selected{
	background-color	:#C0C0C0;
	color				:#000000;
}

/*
.ui-selecting{
	background-color	:#C0C0C0;
	color				:#000000;
}

.ui-unselecting{
	background-color	:#ffffff;
	color				:#C0C0C0;
}
*/
p,h3,h4,tr{
    color: white;
}

table{
    background-color: #222222;
}

.selectable{
	width		:120px;
	margin		:auto;
	border		:1px black solid;
	text-align	:center;
	color		:#C0C0C0;
	float		:left;
}

.ui-widget-content{
	min-height	:25px;
	border		:1px black solid;
}

.ui-selectable-helper{
	border		:1px black dotted;
	position	:absolute;
}

.rowdiv{
	display		:inline;
}

body {
    /*max-width: 1024px;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    overflow-x: hidden;
    background-color: #000000;
}

#banner {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 60px;
    /*margin: 0px;*/

/*    background-color: #f0f0f0;*/
/*    min-height: 50px;*/
/*    border-bottom: 1px black solid;*/
/*    margin-bottom: 10;*/
}
#banner img{
    width: 100%;
/*    border: 1px red solid;*/
}


img {

}

#logo {
/*    position: absolute;*/
/*    left: 0px;*/
/*    right: 250px;*/
/*    float: left;*/
    text-align: center;

}

#FB-loptop {
/*    position: absolute;*/
/*    width: 250px;*/
/*    right: 0px;*/
    padding-top: 20px;
/*    text-align: center;*/
}

#FB-loptop button{
    margin: 5px;
/*    float: right;*/
/*    clear: both;*/
/*    margin-bottom: 20px;*/
/*    margin-right: 40px;*/
    width: 150px;

}

#FB-mobile {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.divide-line {
    width: 100%;
    height: 0px;
    border-top: 5px #e0e0e0 solid;
    margin-top: 10px;
    margin-bottom: 10px;
}

.divide-line.time{
    margin-bottom: 30px;
}

.external-link {
    width:90%;
    height:50px;
    float:left;
    text-align:center;
    margin-bottom: 5px;
    border: 1px #c0c0c0 solid;
    cursor: pointer;
}

#tweet {
    height: 200px;
    background-color: #ddddff;
}

.post {
/*    float:right*/
    width: 90%;
    min-height: 50px;
    margin-left:     auto;
    margin-right: auto;
    margin-bottom: 10px;
/*    background-color: #00ff*/
    border: 1px solid #0000ff;
    padding: 10px;
}

.post img{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: auto;
}

#new-post button{
    float: right;
/*    margin-right: 10px;*/
}

.clear {
    clear: both;
}

#new-post-form {
    padding: 10px;
    width: 100%;
}

#readmore {
    float: right;
    color: #0000ee;
    cursor: pointer;
}


#about {
    padding:10px;
}

#schedule tr,
#schedule td{
    border: 1px black solid;
    padding: 5px;
}

#mapCanvas{
    width:100%;
    height:50%;
    min-width:300px;
    min-height:300px;
    float:right;
}

#app{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 800px) {
    p.text{
        clear: both;
    }
    #about img{
        margin-bottom: 10px;
        float: left;
    }
    #contact,
    #about,
    #schedule,
    #channel,
    #gallery,
    #instructor{
        padding:10px;
    }

    #mapCanvas{
        width:100%;
        height:50%;
        min-width:300px;
        min-height:300px;
        float: left;
    }
}

#coverpage {
    position: relative;
    height: 100%;
    width: 100%;
    min-height: 600px;
    overflow: auto;
/*    background-image:url('../img/osoto.jpg');*/
/*    background-repeat:round;*/
/*    background-position:center;*/
}



@media(min-width: 1024px){
/*    #homepage-quote*/
    #coverpage-center {
        position: absolute;
        left: 30%;
        right: 30%;
        top:15%;
        text-align: center;
    }

    #coverpage-img p,
    #quote{
        color: white;
        text-align: center;
        font-size: 25;
        font-style: italic;
    }

    #coverpage-img span,
    #quote span{
        float: right;
        color: #bbbbbb;
    }
    #coverpage-img span::before,
    #quote span::before{
        content: '- ';
    }





}

@media(max-width: 1024px){

    #coverpage-center {
        position: absolute;
        left: 10%;
        right: 10%;
        top:15%;
        text-align: center;
    }

    #quote{
        color: white;
        text-align: center;
        font-size: 25;
        font-style: italic;
    }

    #quote span{
        float: right;
        color: #bbbbbb;
    }

    #quote span::before{
        content: '- ';
    }

    #coverimage-left,
    #coverimage-right{
        display: none;
    }
}

@media(min-width: 460px){
    #coverpage-img{
    /*    position: relative;*/
    /*    max-width: 50%;*/
        position:relative;
/*        background-image: url(../img/homepage-background.png);*/
        background-repeat: round;
    /*    max-width:1024px;*/
        margin-left: auto;
        margin-right: auto;
        height: auto;
    }

    #coverpage{
        text-align: center;
        position: relative;
    }

    #coverimage-mobile{
/*        width: 100%;*/
        display: none;
    }

    #osoto,
    #coverimage-right{
        right: 2%;
        position: absolute;
        top: 120px;
/*        z-index: 100;*/
        max-width:30%;
        max-height:30%;
    }

    #coverpage-logo {
    /*    float: left;*/
        left:10%;
        position: absolute;
        top:40px;
        z-index: 100;
    }

    #coverimage-left{
        left: 5%;
        position: absolute;
        top: 65px;
/*        z-index: 100;*/
        width:20%;
        max-width:70%;
        max-height:70%;
/*        height: 20%;    */
    }

    #coverimage-right{
        float: right;
    }
}

@media(max-width: 460px){
    #coverimage-mobile{
/*        width: 100%;*/
/*        width: auto;*/
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }

    #osoto,
    #coverimage-right,
    #coverpage-img p,
    #coverpage-center{
        display: none;
    }

    #coverpage-logo {
    /*    float: left;*/
/*        left:10%;*/
/*        position: absolute;*/
/*        top:40px;*/
/*        z-index: 100;*/
/*        max-width: 1024px;*/
/*        text-align: center;*/

        height: 50%;
        margin-top: 15%;
        margin-left: auto;
        margin-right: auto;
    }
}

#coverpage-btn {
/*    position: absolute;*/
    max-width: 1024px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}



#enter-btn {
    position: absolute;
    bottom: 13%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #dddddd;
    font-weight: 900;
    font-size: large;
    border: white 4px solid;
    width: 200px;
    height: 40px;
    border-radius: 20px;
    padding-top: 4px;
    left:0;
    right:0;
    cursor: pointer;
}

#coverpage-info {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left:0;
    right:0;
    bottom: 20%;
    text-align: center;
    color: #dddddd;
/*    margin-bottom: 1%;*/
}

#socialmedia-facebook{
    text-align: center;
}

@media (max-width: 800px) {
    #socialmedia-twitter {
        display: none;
    }

    #socialmedia-facebook{
        position: relative;
        width: 100%;
/*        height: 500px;*/
    /*    height:100%;*/
    }
}

@media (min-width: 800px) {
    #socialmedia-twitter {
    /*    position: absolute;*/
        width: 40%;
        height: 400px;
        float: left;
    /*    top: 10px;*/
    /*    bottom: 0px;*/
    /*    top: 260px;*/
    }

    #socialmedia-facebook{
    /*
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    */
        position: relative;
        float: right;
        width: 55%;
/*        height: 500px;*/
    /*    height:100%;*/
    }
}
#coverpage-banner {
    margin-top: 100px;
    margin-left: 0px;
    width: 100%;
}

.video{
    width: 100%;
    text-align: center;
    float: left;
    margin: 20px;
}

.thumbnail {
    background-color: black;
    height: 300px;
    position: relative;
    margin:0;

}

.thumbnail img{
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
/*    height: 150px;*/
}

#gallery .caption{
/*    border: 1px solid red;*/
    text-align: center;
/*    padding:0px;*/
    margin-bottom: 10px;
}

.caption h4{
    color: white;
    margin-top:5px;
}

table, th, td{
    /*border: 1px solid red;*/
}

.profile-btn{
    float: right;
    /*border-radius: 10px;*/
    /*border: 3px solid white;*/
    cursor: pointer;
}

.instructor-detail {
    border:1px solid white;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 10px;
    border-radius: 20px;
/*    height: auto;*/
}