@charset "UTF-8";
@-moz-document url-prefix() {
}

/********************************************
		     DOCUMENT INFORMATION
---------------------------------------------

	- Document: MSM Theme   
	- Version:  1.0.2
	- Client:   Morehouse School of Medicine
	- Author:   ProjectFamous.net
				AmosWilliams@Gmail.com   
				
---------------------------------------------
		     Table of Contents
---------------------------------------------

	- Colors
	- Core
	- Layout
	- Header
	- Course Mobile Nav
	- Course Grid
	- Sidebar 
	- Course Navigation
	- Mailing List
	- Color Override
	- Gradient  *not used*  
	- Media Quries *mobile*
	
---------------------------------------------
             COLORS
---------------------------------------------

Gray rgb(128, 130, 132)
Teal rgb(21, 142, 167)
Blue rgb(35, 46, 99)
Lite Blue rgb(217, 238, 242)

********************************************/

/********************************************
             CORE
********************************************/

body {margin: 0; padding: 0; font-size: 18px; text-align: center; font-family: 'Crimson Text', serif;}
#interior-page h1, #interior-page h2 {text-align: left;}
#interior-page h2 {margin-top: 0; padding: 5px 0;padding: 5px 0;padding-left: 10px; color: white;}
.rounded {border-radius: 5px;}

/********************************************
             LAYOUT
********************************************/

#content {height: auto;overflow: hidden!important;position: relative; margin-top: .5%;}
.inner {width: 90%; margin: 0 auto;}
.content{float: right; width: 75%;}
.sidebar{float: left; width: 22%; background-color: rgb(21, 142, 167);position: absolute;left: 5%; height:100%;}

/********************************************
             HEADER
********************************************/

#header {height: 90px; background: white; overflow: hidden;}
#header .inner {height: 100%;}
.logo {display: block; float: left; width: 600px; height: 100%; background: url(../images/global/msm_oepe_logo.gif) no-repeat; background-size: contain;  cursor: pointer; }
.title {display: block; float: left; width: 35%; height: 100%; max-width: 307px;   cursor: pointer;}
.title span {color: rgb(21, 142, 167);font-size: 23px;box-sizing: border-box;padding: 3px 10px;display: block;margin-top: 17px;margin-left: 10px;text-align: left;border-left: 3px solid;font-weight: bold;}
/* HEADER NAVIDATION */ 
.header-nav{display: block; float: right; width: 45%; height: 100%;}
.header-nav .menu {list-style: none; margin: 0; padding: 0; margin-top: 12px;}
.header-nav .menu li {float: left; /* padding-right: 21px; *//* display: block; */width: 23%;text-align: center;margin: 2px;border: 1px solid rgb(128, 130, 132);}
.header-nav .menu li.last {padding: 0;}
.header-nav .menu li a {color: rgb(35, 46, 99); line-height: 30px; /* text-align: center; */text-decoration: none;width: 100%;display: block; font-size: 13px;}
.header-nav .menu li:hover {background-color: rgb(21, 142, 167) }
.header-nav .menu li:hover a {color: white;} 
/* SOCIAL MEDIA */
social li {display: inline-block;}
.social {width: 95%;display: block;}
.social li {width: 32px;height: 32px;background-color: blue;display: inline-block;float: right;background-size: contain;margin: 3px;}
.social ul {margin: 0;padding: 0;list-style: none;}
.twitter {background: url(../images/global/twitter.png);}
.facebook {background: url(../images/global/facebook.png);}
.youtube {background: url(../images/global/youtube.png);}
/* BANNER */
#banner {height: auto;overflow: hidden!important;position: relative;}
.feature{float: left; width: 75%;}
.special_feature{float: right; width: 22%; height: 100%;position: absolute;right: 5%; color: rgb(35, 46, 99);}
.special_feature p, .sidebar p { padding: 10px; margin: 0; text-align: center; }
img.full { width: 100%;}
.overlay {position: absolute;z-index: 2;bottom: 0;}
.overlay img {width: 100%;height: auto;}
.info-text {display: block;position: absolute;top: 10%;width: 30%;padding-left: 15%;color: white;font-size: 26px;text-align: center;}
.info-text a {border: 2px solid white;text-decoration: none;color: white;padding: 5%;text-transform: uppercase;font-size: 22px;display: block;}
a.button {padding: 5px;display: block;background: rgb(35, 46, 99);width: 70%;margin: 16px auto;color: white;text-decoration: none;text-transform: uppercase;}
.feature:after, .special_feature:after, #banner:after {content: ""; display: block; clear: both;}

/********************************************
             COURSE MOBILE NAVIGATION
********************************************/

/*Hide checkbox*/
input[type=checkbox]{display: none;-webkit-appearance: none;}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .class-nav{display: block;}
.show-menu {text-decoration: none;color: #fff;background-color: rgb(35, 46, 99);text-align: center;padding: 10px 0;display: none;}

/********************************************
             COURSE GRID
********************************************/

ul.cats {list-style: none;margin: 0;padding: 0;margin-left: 3%;}
.cats li {float: left;width: 30%;background-color: rgb(35, 46, 99);margin: 1%;padding: 10px 0px;border: 1px solid transparent;}
.cats.gray li {background-color: rgb(128, 130, 132);}
.cats span {color: white;}
.cats span.title {display: block;width: 100%;text-align: center;text-transform: uppercase;padding-top: 5px;font-size: 17px;}
.cats img {width: 90%;display: block;margin: 0 auto;}
.cats p {margin: 0;padding: 0;color: rgb(21, 142, 167);font-size: 13px;text-transform: uppercase;}
.cats p span {padding: 0 5px;font-size: 23px;}
.cats li:hover { background-color: rgb(21, 142, 167); cursor: pointer;}
.cats li:hover p {color: rgb(35, 46, 99);}

/* Remove box for content block */
.content ul.cats {}
.content .cats li { background-color: white;}
.content .cats.gray li {background-color: white;}
.content .cats span {}
.content .cats span.title {}
.content .cats img {padding: 5%; border-color: transparent; background-color: rgb(35, 46, 99);   border: 1px solid transparent;border-radius: 5px;}
.content .cats.gray img {background-color: rgb(128, 130, 132);}
.content .cats span { color: rgb(35, 46, 99);}
.content .cats p span {}
.content .cats li:hover img, .content .cats.gray li:hover img   {background-color: rgb(21, 142, 167); }
.content .cats li:hover span {color: rgb(21, 142, 167); }

/********************************************
             SIDEBAR
********************************************/

.sidebar ul.cats { margin: 0;}
.sidebar .cats li { width: 85%; margin: 0 auto; float: none; margin-top: 7%;}
.content .cats span {padding-top: 5px; display: block;  width: 90%; margin: 0 auto;}
.sidebar .cats li:hover { background-color: rgb(35, 46, 99); cursor: default;}
.sidebar .cats li:hover p {color: rgb(21, 142, 167);}

li.rounded a {text-decoration: none;}

/********************************************
             COURSE NAVIGATION
********************************************/

ul.class-nav {margin: 0 auto;padding: 0;width:  100%;list-style: none;}
.class-nav li {display: inline-block;width: 10%;border-bottom: 3px solid;padding-bottom: 10px;}
.class-nav li.active, .class-nav li:hover {border-color:rgb(21, 142, 167); }
.class-nav a {color: black;text-decoration: none;font-size: 16px;}

/********************************************
             MAILING LIST
********************************************/

.mailing-list {clear: both;   /* padding-top: 20px; */border: rgb(21, 142, 167) solid 1px;width: 416px;margin: 25px auto;padding: 5px 0px;display: inline-block;}
.mailing-list input[type="text"] {width: 285px;font-size: 10px;line-height: 18px;border: none;/* margin-top: -12px; */position: relative;top: -1px;}
.mailing-list label {font-size: 13px;font-style: italic;padding-right: 11px;line-height: 26px;}
.mailing-list label span {font-style: normal;position: absolute;font-size: 46px;}

/********************************************
             COLOR OVERRIDE
********************************************/

.gray {background-color: rgb(128, 130, 132);}
.blue {background-color: rgb(35, 46, 99);}
.light {background: rgb(217, 238, 242);}

/********************************************
             GRADIENT
********************************************/

.gradient {/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top left, #96B6DD 0%, #FFFFFF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #96B6DD 0%, #FFFFFF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top left, #96B6DD 0%, #FFFFFF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #96B6DD), color-stop(1, #FFFFFF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #96B6DD 0%, #FFFFFF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #96B6DD 0%, #FFFFFF 100%);}

/********************************************
             MEDIA QUERIES
********************************************/


@media only screen and (max-width: 1200px){
    .inner {width: 95%;}
    .special_feature {right: 2.5%;}
    .sidebar {left: 2.5%;}
    ul.class-nav li a {font-size: 14px;}
    .logo {width: 560px;}
}

@media only screen and (max-width: 1100px){
    .title{width: 28%;}
    .sidebar {width: 27%}
    .content {width: 70%;}
    .logo {width: 460px;}
}

@media only screen and (max-width: 1065px){
    .cats span.title, .content .cats span {font-size: 15px;}
    .title span {font-size: 19px;}
    
    
}

@media only screen and (max-width: 985px){

    ul.class-nav li a {font-size: 12px;}
}


@media only screen and (max-width: 950px){
    .feature {float: none;width: 100%;}
    .special_feature, .sidebar {float: none; width: 100%; height: inherit;  position: relative; right: 0%; left: 0%;padding: 10px 0; margin: 10px 0;}
    ul.cats {margin-left: 2%;}
    .sidebar .cats li {max-width: 400px;}
    .content {width: 100%;}
    .header-nav .menu li {width: 30%;}
}

@media only screen and (max-width: 915px){

    .header-nav {width: 35%;}
    .title {width: 28%;}
}

@media only screen and (max-width: 890px){
    .info-text {font-size: 20px; width: 35%; padding-left: 2.5%;}
    .info-text a {font-size: 18px;}
    .header-nav {width: 40%;}
}

@media only screen and (max-width: 850px){
.header-nav {width: 100%;float: none; clear:both; display: block;}
#header {height:inherit;}
.logo {height: 60px; width: 100%; background-position: center;}
.header-nav .menu li {width: 24%;}
.header-nav {  padding-top: 1px; height: 60px;}
.title {width: 40%;}
    
/*Make dropdown links appear inline*/
ul.class-nav {
    position: static;
    display: none;
}
/*Create vertical spacing*/
.class-nav li {
    padding: 7px 0;

}
.class-nav li:hover {background-color: rgb(21, 142, 167);}
/*Make all menu links full width*/
ul.class-nav li, .class-nav li a {
    width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
    display:block;
}    
    
ul.class-nav li a {font-size: 14px;}

}

@media only screen and (max-width: 760px){
    .cats li{width: 46%;}
    h1 {font-size: 1.5em;}
    .cats li.rounded:nth-child(odd){ clear: left;}
}

@media only screen and (max-width: 700px){
    .info-text {top: 0%;}
}

@media only screen and (max-width: 610px){
    .info-text {font-size: 16px}
    .info-text a {font-size: 16px; padding: 3%;}
}

@media only screen and (max-width: 555px){
    .title span {padding: 8px 0px;  border-left: none;  border-top: 3px solid;  /* font-size: 14px; */  text-align: center;  width: 100%;  margin-left: 0;}
    .title {max-width: 100%; width: 100%;}
    .logo {  background-position: center;  height: 45px; width: 100%; margin-top: 10px; }
    .mailing-list {width: 100%; border: rgb(21, 142, 167) solid 2px; margin: 25px auto; clear: both;}
    .mailing-list label { width: 100%; display: block; font-size: 20px;}
    .mailing-list input[type="text"] {display: none;}
    .mailing-list label span {display: none;}
    .overlay {display: none;}
}

@media only screen and (max-width: 500px){
    .header-nav .menu li {width: 48%;}
    .cats span.title, .content .cats span {font-size: 12px;}
    .info-text {width: 50%;}
    .info-text a {display: none;}
}


@media only screen and (max-width: 400px){
    .cats p {font-size: 12px; display:none;}
    .cats p span {font-size: 18px;}
}