/* used for main headers, color: primaryAccentColor */
/* Hopkins color "tomato", used for headers and select list highlights */
/* Lighter version of the primaryAccentColor for highlighting rollovers */
/* Hopkins color "Bloomberg" */
/* light gray */

@media screen and (max-width: 958px) {
	#tagline {margin-right:140px;}
}

@media screen and (max-width: 950px) {
  #featuredCourse .info {
    text-align: left;
    margin-right: 0;
    clear: both;
    float: left;
    width: 100%;
  }
  #featuredCourse img {
    float: left;
  }
  #searchBrowse form input[type="search"] {
    width: 143px;
  }
  #searchBox {
    margin-top: .7em;
  }
  #main.use #free,
  #main.use #license {
    height: 18em;
  }
  #main.use #resources .col1 {
    padding-top: 51px;
  }
  #main.use #resources .col2 {
    width: 30%;
  }
  #main.use #resources .col2 div {
    text-align: left;
  }
  #main.use #resources .col2 div div {
    width: 100%;
  }
  #main.use #resources .col2 div img#OER-Handbook {
    width: 100%;
  }
  #shareAndUse {
  	width:100%;
	display:block;
	margin:0;
	}
  #share, #searchBrowse {width:49%;}	
  #use, #featuredCourse {width:49%;}	
  .ocwDesc {
  	width:100%;
	margin:0; 
	width:auto;
	display:block;
	}
}
@media screen and (max-width: 850px) {
  #main.use #free,
  #main.use #license {
    height: 20em;
  }
  #tagline {margin-right:80px;}
}
@media screen and (max-width: 768px) {
  #tagline {margin-right:20px;}
}
@media screen and (max-width: 730px) {
  #main.course #courseImage {
    margin-right: 0;
  }
  #main.course #courseInfoBox {
    margin-left: 0 !important;
    margin-top: 1em;
    width: 100%;
    min-height: 0 !important;
  }
  #main.use #resources .col1 {
    padding-top: 0;
  }
  #main.use #resources .col2 {
    width: 420px;
    margin-top: 2em;
    margin-left: 1.8em;
    float: left;
    clear: both;
  }
  #main.use #resources .col2 div {
    width: 100%;
    margin-top: 2em;
    float: left !important;
  }
  #main.use #resources .col2 div div {
    text-align: left;
    width: 100%;
  }
  #main.use #resources .col2 div img#OER-Handbook {
    width: 100%;
  }
}
@media screen and (max-width: 721px) {
  #floatPage ul.nav-tabs li.selected {
    background: none;
  }
  #floatPage ul.nav-tabs li.selected a,
  #floatPage ul.nav-tabs li.selected a:hover {
    cursor: default;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-color: #DDDDDD #DDDDDD transparent;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    color: #555555 !important;
  }
  #searchBrowse form input[type="search"] {
    width: 210px !important;
  }
}
@media screen and (max-width: 708px) {
  #tagline {
  	width:230px;
	margin-top:25px;
	text-align:center;
  }
}
@media screen and (max-width: 640px) {
  #vidPlayer {
    width: 100% !important;
    height: 100% !important;
  }
}
@media screen and (max-width: 600px) {
  #tagline {
  	width:150px;
	margin-top:15px;
	margin-right:10px;
	text-align:left;
	float:left;
  }	
  #featuredCourse img {
    width: 100%;
  }
  #share .info {
    margin-left: 0px;
    float: left;
    clear: left;
    width: 100%;
    margin-top: 5px;
  }
  #jhsphLogo,
  #occLogo {
    position: relative;
    width: 100%;
    margin-top: 15px;
    top: 0;
  }
  #jhsphLogo {
    padding-top: 15px;
    left: 0;
  }
  #occLogo {
    right: 0;
  }
  #terms {
    padding: 0 6em 10px 6em;
    border-bottom: 1px solid #5f5f5f;
  }
  #searchBrowse form input[type="search"] {
    width: 100px;
  }
  #main {
    padding-bottom: 12em !important;
  }
  #courseInfoBox {
    height: auto;
    width: 100%;
  }
  #comments,
  #poll {
    float: none !important;
  }
  #comments {
    width: 100% !important;
  }
  #comments #comment_txt {
    width: 97% !important;
  }
  #comments input[type='submit'] {
    float: left !important;
  }
  #poll {
    margin-left: 0 !important;
    margin-top: 5em;
    width: 100% !important;
    clear: both;
  }
  #main.share .col1,
  #main.share .col2 {
    width: 100%;
    float: left;
  }
  #main.share .col2 {
    margin-top: 1em;
  }
  #main.share #discoverLink1 {
    display: none;
  }
  #main.share #discoverLink2 {
    display: block;
    margin-top: 1em;
  }
  #main.use #free,
  #main.use #license {
    height: auto;
    width: 100%;
  }
  #main.use #resources .col1 {
    padding-top: .5em;
    margin-top: 0;
    width: 100%;
  }
  #main.use #resources .col1 div {
    margin-left: 0 !important;
  }
  #main.use #resources .col2 {
    width: 100%;
    margin-top: 2em;
    margin-left: 0;
    text-align: center;
  }
  #main.use #resources .col2 div {
    float: none !important;
    text-align: center;
  }
  #main.use #license img.cc_label {
    margin-left: 0 !important;
    margin-bottom: 10px !important;
    display: block;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  #jhsphLogo {
    background: url('/views/common/gfx/logo_jhsph_x2.png') no-repeat center;
    width: 100%;
    height: 100%;
  }
  #jhsphLogo a {
    display: block;
    width: 264px;
    height: 72px;
  }
  #occLogo {
    background: url('/views/common/gfx/logo_OERC_x2.gif') no-repeat center;
    width: 100%;
    height: 100%;
  }
  #occLogo a {
    display: block;
    width: 222px;
    height: 64px;
  }
  #main {
    padding-bottom: 12em !important;
  }
}
/*** iPad ***/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px) and (max-device-width: 1024px) {
  #jhsphLogo {
    width: 154px;
    height: 72px;
    background-size: 154px 72px;
  }
  #occLogo {
    width: 148px;
    height: 43px;
    background-size: 148px 43px;
  }
}
@media screen and (max-width: 504px) {
  #header {
    background-image: none;
  }
  #tagline {
  	width:auto;
	font-size: .8em;
	text-align:left;
	margin:0;
	padding:5px 0 5px 34px;
	float:none;
	display:block;
	clear:both;
	background-color:#67aefa;
	color:#194784;
  }
  #nav {
    font-size: .98em;
  }
  #featuredCourse img {
    width: 100%;
  }
  #share,
  #use {
    width: 100% !important;
	display:block;
	margin:0;
  }
  #share {
    margin-right: 0 !important;
    margin-bottom: 15px;
	border:none;
  }
  #searchBrowse,
  #featuredCourse {
    width: 100%;
  }
  #searchBrowse form input[type="search"] {
    width: 68%;
  }
  body {
    font-size: 1.7em;
  }
  h1 {
    font-size: 1.2em;
  }
  #header h1 {font-size:0;}
  h1#sectionHead span.large {
    font-size: 1.5em;
  }
  #find ul li {
    line-height: 1.5em;
  }
  #searchBox {
    width: 100%;
  }
  #searchBox form input[type="search"] {
    width: 70%;
  }
  #main.share #sectionHead #searchBox,
  #main.use #sectionHead #searchBox,
  #main.about #sectionHead #searchBox {
    display: none;
  }
  #main.share #sectionHead #headerText,
  #main.use #sectionHead #headerText,
  #main.about #sectionHead #headerText {
    width: 100%;
  }
  #courseNav {
    display: none;
  }
  #featuredCourse img {
    margin-top: 0;
  }
  #featuredCourse span[style="color:#ffffff"] {
    display: none;
  }
  #main.course #mobileCourseNav {
    display: block;
  }
  #main.course .col2 {
    border: none;
    padding: 0;
    width: 100%;
  }
  #main.course .col2 ul.browseList {
    padding: 0;
  }
  #main.course .col2 ul.browseList li {
    padding: .5em 0 .5em 0;
    margin: 0;
  }
  #main.course .col2 ul.browseList li.selected {
    background-color: #992d33;
  }
  #main.course #sectionHead {
    display: none;
  }
  #main.course .sectionPadding {
    padding-top: .8em;
  }
  #main.course #courseImage,
  #main.course #courseImage .image {
    width: 100%;
  }
  #main.course #comments #comment_txt {
    width: 97% !important;
  }
  .threeColTable {
    font-size: .8em;
  }
  .sectionPadding {
    padding-top: 1.2em;
  }
  #main.course button.search,
  #main.share button.search,
  #main.use button.search {
    display: block;
  }
  #infoBar {
    margin-top: 10px;
  }
  #popup_content #close {
    float: right;
    cursor: pointer;
    margin-top: -1em;
    width: 30px;
    height: 29px;
    background: url('/views/common/gfx/mobile_icon_CloseWindow_480.gif');
  }
  #main.browse .col1,
  #main.browse .col2 {
    width: 100% !important;
    float: left;
    border-right: none;
  }
  #main.browse #infoBar,
  #main.browse #spacerRow td {
    display: none;
  }
  #main.browse table#browse {
    margin-top: 0;
    border: 1px solid #fff;
  }
  #main.browse table#browse th,
  #main.browse table#browse td {
    padding-left: 0;
    padding-right: 0;
  }
  #main.browse table#browse ul.browseList {
    padding-left: 0;
  }
  #main.browse table#browse #browseCatItems li {
    margin-right: 0;
  }
  #main.browse #imageBrowse {
    margin-left: 0;
    background: none;
  }
  #main.browse #imageBrowse ul,
  #main.browse #imageBrowse ul li {
    padding-left: 0 !important;
  }
  #main.browse #imageBrowse ul p,
  #main.browse #imageBrowse ul li p {
    float: left;
    width: 50%;
    text-align: left;
    margin-top: .5em;
    margin-bottom: .5em;
  }
  #main.browse #imageBrowse ul p:first-of-type,
  #main.browse #imageBrowse ul li p:first-of-type {
    margin-top: .5em !important;
  }
  #main.browse #imageBrowse ul .image,
  #main.browse #imageBrowse ul li .image {
    float: left;
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: 0;
  }
  #main.browse #imageBrowse ul li {
    border-bottom: 1px solid #d8d8d8;
    width: 100%;
    padding-top: 0 !important;
    background-image: url('/views/common/gfx/icon_accordionArrow-right.gif');
    background-repeat: no-repeat;
    background-position: center right;
  }
  #main.browse #imageBrowse ul li:last-of-type {
    border: none;
  }
  #main.browse #imageBrowse ul {
    margin-left: 2% !important;
    width: 98%;
  }
  #main.browse #imageBrowse #pageNumbers {
    display: none;
  }
  #main.browse .nav-tabs {
    margin-top: 1em;
  }
  #floatPage .col2 #Courses ul li {
    list-style-image: url('/views/common/gfx/bullet_red.gif') !important;
  }
  #floatPage .col1 ul.browseList a {
    display: inline;
    width: auto;
  }
  #finalDrillDownList {
    color: #000;
    padding: .2em 0 .2em 1em;
  }
  #finalDrillDownList li:hover {
    background-color: transparent !important;
  }
  #finalDrillDownList p:first-of-type {
    margin-top: 1em !important;
  }
  #finalDrillDownList ul {
    margin-left: 0;
    padding-left: 0;
  }
  #finalDrillDownList ul li {
    list-style-image: url('/views/common/gfx/bullet_red.gif') !important;
    padding-top: 10px !important;
  }
  #imageBrowse.well {
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    text-align: left !important;
    overflow: auto;
  }
  #imageBrowse.well ul {
    padding: 0;
    width: 100%;
    margin-left: 0 !important;
  }
  #imageBrowse.well li {
    display: block;
    overflow: auto;
  }
  #imageBrowse.well .image {
    margin-top: .5em;
    margin-bottom: .5em;
  }
  #imageBrowse.well .title {
    float: left;
    width: 9.5em;
    margin-top: .5em;
    margin-bottom: .5em;
  }
  .col3 {
    display: none;
  }
  .col2 ul.browseList li.selected .topicName {
    background-color: #f5f5f5 !important;
  }
  .col2 ul.browseList li .topicName {
    background-color: #f5f5f5;
    color: #992d33;
    padding-top: .5em !important;
    padding-bottom: .5em !important;
    padding-right: 40px !important;
  }
  .col2 ul.browseList li .topicName:hover {
    background-color: #f5f5f5 !important;
  }
  .col2 ul.browseList li .topicName.closed,
  .col2 ul.browseList li .topicName.open {
    background-repeat: no-repeat;
    background-position: center right;
  }
  .col2 ul.browseList li .topicName.closed {
    background-image: url('/views/common/gfx/icon_accordionArrow-down.gif');
  }
  .col2 ul.browseList li .topicName.open {
    background-image: url('/views/common/gfx/icon_accordionArrow-up.gif');
  }
  #main.use #resources .col2 div {
    text-align: center;
  }
  #main.use #resources .col2 div div {
    width: 100%;
    float: right;
  }
  #main.use #floatPage .indented,
  #main.use #free .indented,
  #main.use #license .indented {
    margin-left: 1em;
  }
  table#browse {
    margin-top: 1em !important;
  }
  #floatPage #imagePreview img {
    max-width: 97% !important;
    width: 97%;
    margin-left: 0;
    margin-right: 0;
  }
  #floatPage #imagePreview img.cc_label {
    width: auto;
    float: left;
    clear: both;
    margin-left: 10px;
    margin-top: 10px;
  }
  #jhsphLogo,
  #occLogo {
    position: relative;
    width: 100%;
    margin-top: 15px;
    top: 0;
  }
  #jhsphLogo {
    padding-top: 15px;
    left: 0;
  }
  #occLogo {
    right: 0;
  }
}
/*** Samsung Galaxy III (Retina Display) ****/
@media only screen and (max-device-width: 721px) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    font-size: 1.35em;
  }
  #header {
    height: 71px;
  }
  #header h1 img {
    width: 231px;
    height: 71px;
  }
  #tagline {
  	width:auto;
	font-size: .8em !important;
	text-align:left !important;
	margin:0 !important;
	padding:5px 0 5px 20px !important;
  }
  #main.course button.search,
  #main.share button.search,
  #main.use button.search {
    background-image: url('/views/common/gfx/icon-search-ocw-hi.png');
    background-size: 30px 30px;
    height: 40px;
    right: 14px;
    top: 1em;
    width: 40px;
  }
  #main.course #mobileCourseNav .dropdown-toggle {
    font-size: 1em;
    line-height: 1em;
  }
  #main {
    margin-left: 0;
    margin-right: 0;
  }
  #nav {
    font-size: 1.02em;
    right: 0;
    top: 71px;
  }
  #main.course #courseImage {
    width: 98% !important;
  }
  #searchBox form input[type="search"] {
    width: 62% !important;
    height: 1.3em;
  }
  #popup_content #close {
    margin-top: -1.5em;
    margin-right: -0.5em;
    width: 30px;
    height: 29px;
    background: url('/views/common/gfx/mobile_icon_CloseWindow_480.gif');
  }
  #jhsphLogo {
    height: 32px;
    background-size: 116px 32px;
  }
  #occLogo {
    margin-top: 10px;
    height: 32px;
    background-size: 111px 32px;
  }
  .modal button.close {
    font-size: 2em !important;
    line-height: 30px !important;
    width: 40px !important;
  }
  #main.use #resources .col1 {
    margin-top: 0;
    width: 100%;
  }
  #main.use #resources .col1 div {
    margin-left: 0 !important;
  }
  #main.use #resources .col1 iframe {
    width: 100%;
    height: 250px;
  }
  .col2 ul.browseList li .topicName {
    padding-right: 30px !important;
  }
  #searchBox form input[type="search"] {
    height: 1.8em;
  }
  #searchBox form input.btn {
    font-size: 1.4em;
  }
  #searchBrowse #searchBox form input.btn {
    font-size: 1.1em;
  }
  #popup_content #searchBox {
    float: right;
    margin-bottom: 2em;
  }
  #popup_content #searchBox input[type="search"] {
    width: 9.5em;
    height: 1.5em;
  }
  #popup_content #searchBox input.btn {
    font-size: 1.1em;
  }
  #popup_content #close {
    width: 30px;
    height: 28px;
    margin-top: -30px;
    margin-right: -10px px;
    background: url('/views/common/gfx/mobile_icon_CloseWindow-hi.gif') no-repeat;
    background-size: 30px 28px;
  }
  .col2 ul.browseList li .topicName {
    padding-right: 60px !important;
  }
  .col2 ul.browseList li .topicName.closed {
    background-image: url('/views/common/gfx/icon_accordionArrow-down-hi.gif');
    background-size: 30px 15px;
  }
  .col2 ul.browseList li .topicName.open {
    background-image: url('/views/common/gfx/icon_accordionArrow-up-hi.gif');
    background-size: 30px 15px;
  }
  #main.browse #imageBrowse ul li {
    background-image: url('/views/common/gfx/icon_accordionArrow-right-hi.gif');
    background-size: 23px 18px;
  }
  .dropdown-menu {
    max-width: 700px;
  }
  .btn {
    font-size: 1em;
  }
}

@media screen and (max-width: 396px) {
	#tagline {font-size:.6em;}
}	


/*** iPhone and FireFox mobile ****/
@media screen and (max-width: 320px) {
  #searchBrowse form input[type="search"] {
    width: 60% !important;
  }
  body {
    font-size: 1.1em;
  }
  #header {
    height: 74px;
  }
  #header h1 {
    width: 75%;
  }
  #nav {
    top: 74px;
    font-size: 1.1em;
    right: 0;
  }
  #searchBox form input[type="search"] {
    width: 67%;
  }
  #main {
    margin-left: 0;
    margin-right: 0;
  }
  #main.course .sectionPadding {
    padding-top: 20px;
  }
  #main.course button.search,
  #main.share button.search,
  #main.use button.search {
    background-image: url('/views/common/gfx/icon-search-ocw.png');
    background-size: 25ps 25px;
    margin-top: 20px;
    height: 30px;
    width: 30px;
    top: 0;
  }
  #courseImageAndInfoBox {
    display: inline;
    width: 50% !important;
  }
  #courseImage {
    width: 97% !important;
  }
  #courseInfoBox,
  #courseImage {
    display: block;
  }
  #popup_content input[type='search'] {
    width: 10.5em !important;
    height: 1.2em;
  }
  #popup_content #close {
    width: 23px;
    height: 22px;
    margin-top: -1.5em;
    margin-right: -0.5em;
    background: url('/views/common/gfx/mobile_icon_CloseWindow_320.gif');
    background-size: 23px 22px;
  }
  #main.browse .nav-tabs {
    font-size: .87em;
  }
  #main.use #resources .col2 {
    width: 100%;
    margin-left: 0;
    margin-top: 2em;
    float: left;
    text-align: center;
    clear: both;
  }
  #main.use #resources .col2 div {
    float: left !important;
    width: 100% !important;
    margin-left: 0;
    text-align: center;
  }
  #main.use #resources .col2 div img#OER-Handbook {
    width: 100% !important;
  }
}