﻿/* Tag Styles */
body{background-color:#231f20; font-family:Calibri; font-size:16px;}
img {border:0px;}

 a img:hover{border-color:#231f20;} 

/* ID Styles */
#wrapper{width:100%; min-height:1200px; background-color:#231f20; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
#header{width:1000px; height:200px; background-color:#231f20;}
#white-line{width:100%; height:5px; background-color:white;}
#centered-content{width:1000px; min-height:200px; margin:0 auto;}
#notification{width:98%; min-height:60px; background-color:hsla(198, 60%, 50%,0.8); color:white; margin:0 auto;}
#content{width:95%; min-height:1000px;text-align:justify; margin:0 auto; color:white;}
#logo{width:70%; height:200px; float:left;}
#menu{width:30%; height:200px;float:right; position:relative; z-index:20;}
#dBody {
	min-height:300px;
}


/* Classes */
.logo-size{height:200px;}
.heading-text{font-size:1.2em; font-weight:bold; margin-left:10px;}
.menu-heading{font-size:1.4em; font-weight:bold; margin-left:10px;}
.indent-text{width:90%; margin:0 auto;}
.image-right-index{float:right; margin:10px 10px 10px 10px; width:35%;}
.image-left-index{float:left; margin:10px 10px 10px 10px; width:60%;}
.text-notification-index{float:right; width:30%; background-color:hsla(198, 60%, 50%,0.8); color:white; padding:10px 10px 10px 10px; margin-top:130px;}
.header-notification-index{width:30%; background-color:hsla(198, 60%, 50%,0.8); color:white; padding:10px 10px 10px 10px;}
.curve-base{border-bottom-left-radius:45px; border-bottom-right-radius:45px;}

.instructor-img-gap{margin:30px 20px 30px 20px;}

/* Menu System */
#menu ul{margin-top:100px;}
#menu {position:relative; margin:0; padding:0;}        
#menu li{list-style:none;}
#menu li a{display:block; padding:5px 10px; text-decoration:none; font-weight:bold; text-align:left; color:white;}
#menu li a:hover{color:hsla(198, 60%, 50%,0.8); }
#menu li ul {display:none;}
#menu li:hover ul{display:block; position:relative; left:0; width:200px; margin:0; padding:0; background-color:#231f20;}
/* End of Menu System */
/* Menu Click System */
#menu-click {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    background-color: hsla(0,0%,0%,0.8);
    text-align: center;
    visibility: hidden;
    width: 100%;
    height: 100%;
}
#menu-click {
    text-align: center;
    padding-top: 100px;
}
#menu-click a {
    text-decoration: none;
    font-size: 2em;
    color: white;
    text-align:center;
    line-height:60px;
    padding-bottom:20px;
}
#menu-click a:hover{color:hsla(198, 60%, 50%,0.8); }

/* End of menu click*/

/*Instructor styles*/
.background-image-instructors{background-image:url(../images/instructors.png); background-repeat:no-repeat;}
.background-color-instructors{background-color:hsla(198, 60%, 50%,0.9);}
#instructor-content h1{text-transform:uppercase;font-size:2em; text-align:center;}     
#instructor-content table{margin:0 auto;}   
#instructor-details{width:80%; min-height:650px; margin:0 auto; }
#instructor-text{width:65%; min-height:650px;margin-bottom:20px; float:left;}
#instructor-image{width:30%; float:right;}
.instructor-image-size{width:300px;}
.left-push{margin-left:10px;}
.back-link{color:white; text-decoration:none;}
.back-link:hover{color:#231f20; font-weight:bold;}
.img-border{border: 5px solid white;}

/* Gallery*/
.example-image{width:200px; height:150px; border:5px solid white; border-radius:15px; margin:10px 10px 10px 10px;}
.active {font-style:italic; color:#231f20;}
#content-gallery{width:95%; min-height:1000px;text-align:justify; margin:0 auto; color:white;}
        #notification{height:100px;}
        #notification h2{float:left; margin-left:50px;}
        #notification a{text-decoration:none; color:white;}
        #notification a:hover{color:#231f20;}
        #content-gallery img:hover {
            border: 5px solid hsla(198, 60%, 50%,0.9);
        }