/* Artfully masterminded by ZURB */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Shared Styles :: Login :: Page Name 2 */ /* ----------------------------------------- Shared Styles ----------------------------------------- */ body { margin: 0; padding: 0; background-color: #a4a4a4; color: #769379; /* #424242 */ font-family: 'Lato', sans-serif; } a {color: #769379; text-decoration: none; font-weight: bolder; border-bottom: 1px dotted #769379} #iwa-top-nav a {border: none} label {color: #999} fieldset {border: none} h3.subheader, .panel h3.subheader {color: #aaa} .black {color: #000} .charcol {color: #003300; line-height: 150%} .charcol p {color: #003300; font-size: 1.3em; line-height: 150%; margin-right: 10%} #page-title {font-weight: normal} #iwa-language-selector { top: 30px; position: relative; left: 16%; } #iwa-language-selector .language { background-color: rgba(77, 117, 81, 0.85); border-bottom: none; padding: 10px 20px; color: #fff; } /* Top navigation */ .nav-bar {background-color: #202D33; margin-top: 0} .nav-bar li {webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .nav-bar > li.has-flyout > a:first-child::after {content: none} .nav-bar > li.active {background-color: transparent; border-color: transparent; font-weight: bold} .nav-bar > li:hover, .nav-bar > li.active:hover {background-color: transparent} .nav-bar > li:last-child {border-right: none; webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} /* Bottom menu */ .nav-bar.bottom {position: fixed; bottom: 0; margin-bottom: 0; z-index: 10000; margin-left: 20px; background-color: #4d7361; moz-border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0} .nav-bar.bottom .flyout {background-color: #4d7361; border: none; margin-left: 30px; webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .nav-bar.bottom li:last-child .flyout {width: 100px} #footer #search-mobile, #footer #featured-sub-mobile, #footer #feedback-mobile{ display: none;} #footer li a {border: none} #footer li .feedback_toggle {line-height: 120%; } #footer li .feedback_toggle a{color: white} #footer #language_selector {width: 120px; padding-right: 0;} #footer #language_selector #languages {width: 125px; height: 145px } #footer #language_selector #languages .language {white-space: nowrap} .border-up-rounded {-webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0} #iwa-top-nav li:last-child ul {margin-left: -40px} @media only screen and (max-width: 767px) { #iwa-top-nav {margin-top: 15px} .nav-bar > li.active {text-transform: uppercase} /*bottom menu*/ .nav-bar.bottom {position: relative; bottom: none; margin-bottom: none; z-index: 10000; margin-left: 0px; background-color: #4d7361; moz-border-radius: 0px 0px 0 0; -webkit-border-radius: 0px 0px 0 0; border-radius: 0px 0px 0 0} #footer #search-mobile, #footer #featured-sub-mobile,#footer #feedback-mobile { display: block;} #footer #search-mobile{ padding: 20px 40px 20px 20px} #footer #search, #footer #feedback{display: none;} .nav-bar.bottom .flyout {background-color:inherit; border: inherit; margin-left: inherit; webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} #footer #language_selector {width: inherit;} #footer #language_selector #languages{width: inherit; height: inherit; text-align: right; background: #f2f2f2; } #footer #language_selector #languages div{color: #555; } .border-up-rounded {-webkit-border-radius: 0px 0px 0 0; -moz-border-radius: 0px 0px 0 0; border-radius: 0px 0px 0 0} } @media only screen and (min-width: 768px) { #iwa-top-nav {position: fixed; right: 20px; z-index: 10000} .nav-bar {height: 42px; moz-border-radius: 0px 0px 20px 20px; -webkit-border-radius: 0px 0px 20px 20px; border-radius: 0px 0px 20px 20px} /* turning off the down-arrow on the navigation */ .nav-bar > li {padding: 0 10px; border: none; margin-top: 2px} .nav-bar > li > a:first-child, .nav-bar > li > a:last-child {padding-left: 40px} .nav-bar li ul li a:hover {background-color: #202D33; color: #fff} .nav-bar ul.flyout {width: 130px; top: 30px; left: 30px; border: none; webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} ul.flyout {background-color: transparent} ul.flyout li, .nav-bar li ul li {border-left: none} ul.flyout li a#last-menu-item {moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0 0 10px 10px} ul.flyout li a, .nav-bar li ul li a {font-size: 0.75em; padding: 8px 20px; background-color: #202D33; webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;} .nav-bar li ul li a {color: #fff; line-height: 1.5em; font-weight: normal} .nav-bar li ul li a:hover {text-decoration: underline} .nav-bar li ul li.non-selectable a {color: #888; cursor: default} .nav-bar li ul li.non-selectable a:hover {text-decoration: none} #footer #search-mobile, #footer #featured-sub-mobile,#footer #feedback-mobile { display: none;} } @media only screen and (max-width: 767px) { .nav-bar > li > a.flyout-toggle{width: 200px} } @media only screen and (min-width: 768px) { #page-title {margin-top: 50px} } @media only screen and (max-width: 767px) { #page-title {left: 50%; top: 22px; position: absolute; font-size: 2.5em; color: #ccc; text-shadow: #444 0 1px 0, #ddd 0 -1px 0; } } /* colored list of items/links */ .list-container .thumbnail-box { cursor: pointer; background-repeat: no-repeat; padding-right: 10px; background-size: 187px; } .list-container .thumbnail-box h5 {font-weight: normal; margin-top: 10px; margin-bottom: 2px} .list-container .thumbnail-box p {height: 70px; overflow: hidden; margin-bottom: 5px; font-size: 1.1em; line-height: 1.5} .list-container .thumbnail-box.unclickable {cursor: default} .list-container .thumbnail-box.unclickable p, #page-container .thumbnail-box.unclickable h5 {color: #ccc} .list-container a.thumbnail-box {color: #1B5321} .list-container a.thumbnail-box:hover {color: #fff} @media only screen and (max-width: 767px) { .list-container .thumbnail-box { /*padding-left: 160px; */ background-position: -45px 0; padding-left: 150px; padding-right: 0px; } .list-container .thumbnail-box h5 {font-weight: normal; margin-top: 10px; margin-bottom: 2px; font-size: 1em;} .list-container .thumbnail-box p {padding-right: 10px;} } @media only screen and (min-width: 768px) { .list-container .thumbnail-box { /*padding-left: 160px; background-position: -30px 0;*/ padding-left: 185px; margin-top: 10px; margin-bottom: 10px; moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: none; background-position: -20px; } .list-container .thumbnail-box p {padding-right: 20px} } #page-container.gradient { background-color: #a4a4a4; background: -moz-linear-gradient(top, #e3e3e3, #a4a4a4); background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#a4a4a4)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e3e3e3', endColorstr='#a4a4a4'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e3e3e3', endColorstr='#a4a4a4')"; padding-bottom: 75px } #page-container.gradient.light { background-color: #dddebf; background: -moz-linear-gradient(top, #f8f9e9, #dddebf); background: -webkit-gradient(linear, left top, left bottom, from(#f8f9e9), to(#dddebf)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f8f9e9', endColorstr='#dddebf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f8f9e9', endColorstr='#dddebf')"; padding-bottom: 75px } @media only screen and (min-width: 768px) { .panel.radius-large {-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px} .panel.radius-large-bottom {-webkit-border-radius: 0 0 25px 25px; -moz-border-radius: 0 0 25px 25px; border-radius: 0 0 25px 25px} } @media only screen and (max-width: 767px) { .panel.radius-large, .panel.radius-large-bottom {-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0} } .custom-bullet-gt {list-style-type: none; padding: 0} .custom-bullet-gt li:before {content: "> "} dl dd {margin: 0; padding: 0.75em 0 1.25em 0} #disqus_thread {background-color: #9E9E9E; border: none} #disqus-header {padding: 22px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-color: #9E9E9E; margin-bottom: -22px; color: #fff; cursor: pointer} @media only screen and (min-width: 768px) { #disqus-container {margin-top: 40px} } @media only screen and (max-width: 767px) { #disqus-container {margin-top: 20px} } /* languages */ /*#languages {margin-bottom: -20px} #languages a {display: block; text-decoration: none; border: 1px solid transparent; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 42px; height: 32px; margin: 0 2px; float: left; background: transparent url('/images/flags.png') no-repeat; cursor: pointer} #languages a#en {background-position: 0 0} #languages a#es {background-position: -40px 0} #languages a.active {border: 1px solid #eee; background-color: #f6a828}*/ .language {cursor: pointer; color: #fff} /*.language#en {background: transparent url('/images/flags_v.png') no-repeat 0 2px; margin-bottom: 5px} .language#es {background: transparent url('/images/flags_v.png') no-repeat 0 -29px}*/ .language.active {font-weight: bold} @media only screen and (max-width: 767px) { /*#languages {position: absolute; top: 30px; right: 20px; margin: auto}*/ } /* ----------------------------------------- Login Page ----------------------------------------- */ #forgot-password {border: none; padding-top: 2%; text-align: right} .error { background: url('/images/alert_32.png') no-repeat; padding: 5px 40px; color: #b81900 !important} .error {margin: 2% 0} .error span {color: #dc143c} /* margin-left is ok to be left as px since it's relative to the alert icon's size */ input.radius {-webkit-border-radius: 3px; border-radius: 3px} @media only screen and (max-width: 767px) { .error { background: none; padding: 10px 0} .error span {color: #dc143c} /* margin-left is ok to be left as px since it's relative to the alert icon's size */ #login-panel {background-color: transparent; border: none} } @media only screen and (min-width: 768px) { #login-panel { min-width: 400px; padding: 25px 15px; background: -moz-linear-gradient(top, #e3e3e3 0%, #a4a4a4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e3e3), color-stop(100%,#a4a4a4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e3e3e3 0%, #a4a4a4 100%) no-repeat; /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e3e3e3 0%, #a4a4a4 100%); /* Opera 11.10+ */ background: linear-gradient(to bottom, #e3e3e3 0%, #a4a4a4 100%); /* W3C */ } #login-button {width: 120%} } body#login {background: #424242} /* ----------------------------------------- IWA ----------------------------------------- */ body#iwa {background: #000000; height: 100%} /*body#iwa {background: #ccc0ab url('/images/bg_iwa_mobile.png')}*/ #everything-con{position:absolute; width:100%; height:100%; top:0px; background-color:#CACACA; background-size: auto 100%;} #nav-container{ height: 60%; width: 100%;} #chapters {position: relative; left: 50%; z-index: 1100} #chapters #main-links a{display: block; float: left; border: none} #audio-sound-switch {width: 50px; height: 50px; cursor: pointer; background-position: 0 -50px; background-repeat: no-repeat; margin-top: -20px; position: relative; top: 80%; left: 90%; z-index: 1101; } #audio-sound-switch:hover {background-position: 0 0} #audio-sound-switch.on {background-image: url('/images/speaker_on.png')} #audio-sound-switch.off {background-image: url('/images/speaker_off.png')} #chapters #updates{text-align: center; margin-top: 11em; margin-bottom: 2em} #chapters #updates p{font-weight: 900;font-size: 1.75em;margin-bottom: 0px;line-height: 1;color:#003300 } #chapters #updates p a{color: #003300} #chapters #updates p a:hover{color: #4D704D} @media only screen and (min-width: 768px) { #everything-con #chapters {width: 400px; margin: 0 0 0 -195px} #everything-con #chapters #main-links a {width: 120px; height: 120px; background-repeat: no-repeat} #everything-con.en #chapters #main-links a {background-image: url('/images/chapters_360.png')} #everything-con.es #chapters #main-links a {background-image: url('/images/chapters_360_es.png')} #everything-con.zh #chapters #main-links a {background-image: url('/images/chapters_360_zh.png')} #everything-con #iwa-logo {width: 400px; height: 142px; background-position: top left; background-repeat: no-repeat} #everything-con #iwa-logo-sub {width: 400px; height: 27px; margin-bottom: 20px; background-position: top left; background-repeat: no-repeat} #everything-con.en #iwa-logo {width: 400px; height: 142px; background: transparent url('/images/iwa_logo_400.png') no-repeat top left} #everything-con.en #iwa-logo-sub {width: 400px; height: 27px; margin-bottom: 20px; background: transparent url('/images/iwa_logo_sub_400.png') no-repeat top left} #everything-con.es #iwa-logo {background-image: url('/images/iwa_logo_400_es.png')} #everything-con.es #iwa-logo-sub {background-image: url('/images/iwa_logo_sub_400_es.png')} #everything-con.zh #iwa-logo {background-image: url('/images/iwa_logo_400_zh.png')} #everything-con.zh #iwa-logo-sub {background-image: url('/images/iwa_logo_sub_400_zh.png')} #treating.middle {margin: 0 20px} } @media only screen and (max-width: 767px) { #everything-con #chapters {width: 320px; margin: 0px 0px 0px -165px; } #everything-con #chapters #main-links a {width: 100px; height: 100px; background-repeat: no-repeat} #everything-con.en #chapters #main-links a {background-image: url('/images/chapters_300.png')} #everything-con.es #chapters #main-links a {background-image: url('/images/chapters_300_es.png')} #everything-con.zh #chapters #main-links a {background-image: url('/images/chapters_300_zh.png')} #everything-con #iwa-logo {width: 320px; height: 114px; background-position: top left; background-repeat: no-repeat} #everything-con #iwa-logo-sub {width: 320px; height: 22px; margin-bottom: 10px; background-position: top left; background-repeat: no-repeat} #everything-con.en #iwa-logo {background-image: url('/images/iwa_logo_320.png')} #everything-con.en #iwa-logo-sub {background-image: url('/images/iwa_logo_sub_320.png')} #everything-con.es #iwa-logo {background: url('/images/iwa_logo_320_es.png')} #everything-con.es #iwa-logo-sub {background-image: url('/images/iwa_logo_sub_320_es.png')} #everything-con.zh #iwa-logo {background-image: url('/images/iwa_logo_320_zh.png')} #everything-con.zh #iwa-logo-sub {background-image: url('/images/iwa_logo_sub_320_zh.png')} #treating.middle {margin: 0 10px} } #iwa_logo {width: 100%} #everything-con #chapters #main-links a#understanding {background-position: top left} #everything-con #chapters #main-links a#understanding:hover {background-position: bottom left} #everything-con #chapters #main-links a#treating {background-position: top center} #everything-con #chapters #main-links a#treating:hover {background-position: bottom center} #everything-con #chapters #main-links a#living {background-position: top right} #everything-con #chapters #main-links a#living:hover {background-position: bottom right} /* IWA quotes on top of the bg video */ #quote-super-con{width: 100%; min-height: 250px; height: 40%;} #quote-container {position:relative; z-index: 1000; text-shadow: 2px 2px 2px #000} #quote-container p {color: #fff;} #quote-container p#quote-author {text-align: right; margin-right: 20px; font-style: italic} @media only screen and (min-width: 768px) { #quote-container { width: 400px} #quote-container p {font-size: 120%} } @media only screen and (max-width: 767px) and (orientation : landscape) { #everything-con{ min-height: 600px} #quote-super-con { width: 100%; top:0px; margin-top: 50px; min-height: 250px; height: 250px} #quote-container {position:relative; font-size: 1em; width: 300px; margin-left: auto; margin-right: auto; margin-top: 50px; } } @media only screen and (max-width: 767px) and (orientation : portrait) { #everything-con{background-position-x: -275px;} #quote-super-con { width: 100%; top:0px; min-height: 200px; height: 200px} #quote-container {position:relative; font-size: 1em; width: 300px; margin-left: auto; margin-right: auto; } } /*ipad landscape mode*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { #quote-super-con {width: 100%; min-height: 200px; height: 200px; top:0px; margin-top: 50px; } #quote-container {position:relative; font-size: 0.6em; width: 300px; margin-left: auto; margin-right: auto; } #chapters {width: 320px; margin: 0px 0px 0px -165px;} #chapters #main-links a{width: 100px; height: 100px; background: url('/images/chapters_300.png') no-repeat} #iwa-logo {width: 320px; height: 114px; background: transparent url('/images/iwa_logo_320.png') no-repeat top left} #iwa-logo-sub {width: 320px; height: 22px; margin-bottom: 10px; background: transparent url('/images/iwa_logo_sub_320.png') no-repeat top;} #treating.middle {margin: 0 10px} } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { #everything-con{background-position-x: -275px;} #quote-super-con { width: 100%; top:0px; margin-top: 50px; } #quote-container {position:relative; font-size: 1em; width: 300px; margin-left: auto; margin-right: auto; } #treating.middle {margin: 0 10px} } /* ------------------ Sections: Understanding, Treating, Living With ------------------ */ @media only screen and (max-width: 767px) { #page-title {display: none} } #bgnd-image-understanding { background: url('/images/bg_understanding.png') no-repeat 10% 10%; position: absolute; height: 579px; top: 100px; } #bgnd-image-treating { background: url('/images/bg_treating.png') no-repeat 10% 10%; position: absolute; height: 511px; top: 100px; } #bgnd-image-living { background: url('/images/bg_living.png') no-repeat 10% 10%; position: absolute; height: 581px; top: 100px; } #section-title {display: block; height: 70px; border: none; background-repeat: no-repeat; background-position: top left} .en #section-title {background-image: url('/images/iwa_logo_150.png')} .es #section-title {background-image: url('/images/iwa_logo_150_es.png')} .zh #section-title {background-image: url('/images/iwa_logo_150_zh.png')} /* --------------------- Details pages --------------------- */ #details-title h3 {font-family: 'Lato', sans-serif; font-size: 1.5em; font-weight: bolder; color: #37494e} #details-title h3 span {font-size: 0.75em; color: #769379} @media only screen and (min-width: 768px) { #details-title {margin-top: 75px} } #details-video-container {/*padding-bottom: 50px*/} #share{ float: right; height: 40px; width: 120px; background:#ffffff; padding: 0px} #share .fkButton{background: url('/images/facebook-share.png')} #share .trButton{background: url('/images/twitter-share.png')} #share .geButton{background: url('/images/google-share.png')} #share .socialButton{cursor: pointer; border-bottom:hidden; display:none; float: left; height: 40px; width:40px; background-repeat: no-repeat; background-position: top left;margin-right: -2px; } #share .socialButton:hover{background-position: 0px -40px} #share #shareButton{ cursor: pointer; float: right; height: 40px; width: 40px; background: url('/images/share.png') no-repeat top left; margin-right: -2px;} #share .shareText{ float:left; cursor: pointer; margin-top: 8px; font-size: 20px;margin-top: 2px; margin-left: 20px; } #sensory-table {border-collapse: separate; cell-spacing: 1px; cell-padding: 5px} #sensory-table td {text-align: center} #sensory-table th {padding: 10px} #sensory-table tbody tr:nth-child(even) {background: transparent} #understanding-details {background-color: #c5c6c7; color: #665} #understanding-details .video-detail {margin-left: 20px} #understanding-details #video-text-author { text-align: right; font-style: italic; color: #37494e; font-size: 1.17em} #understanding-details .author {font-size: 1.8em; margin-bottom: 0} #understanding-details .title {font-size: 1.2em; margin-bottom: 30px} #treating-details h3 {color: #37494e; font-size: 1.25em} #treating-details a.details-tab {color: #758775; font-size: 1.15em; cursor: pointer} #treating-details #details-research ul li {list-style-type: none; padding: 10px 40px; background: url('/images/pdf.png') no-repeat center left} #treating-details #details-research ul li.nopdf {background: none;} .related-credits .title {font-size: 24px; color: #768675; text-transform: uppercase} .related-credits .item {height: 55px; margin: 30px 0; cursor: pointer} .related-credits .item .thumbnail {width: 100px; height: 55px; border-radius: 5px; moz-border-radius: 5px; -webkit-border-radius: 5px} .related-credits .item .description {text-transform: uppercase; color: #2a352f; font-size: 18px; margin: -55px 0 0 110px; height: 22px; overflow: hidden} .related-credits .item .details {font-size: 14px; margin-left: 110px; color: #768675} ul.nav-bar.credits-menu {background-color: transparent; margin-left: 50px} ul.nav-bar.credits-menu a.nav-bar-section {border: 0; color: #ce7c65; white-space: nowrap; background: transparent url('/images/arrow_pink_dn_small.png') no-repeat right center; padding-right: 20px} ul.nav-bar.credits-menu ul.flyout {width: 100%; top: -17px; left: 15px} ul.nav-bar.credits-menu ul.flyout li.container { background-color: rgba(229, 206, 201, 0.95); border: 5px solid #cf7f7f; border-radius: 10px; moz-border-radius: 10px; -webkit-border-radius: 10px; padding-bottom: 20px } ul.nav-bar.credits-menu ul.flyout .flyout-header {text-align: right; padding: 20px 20px 20px 0; color: #d0806a} ul.nav-bar.credits-menu ul.flyout .flyout-header span {background: transparent url('/images/arrow_pink_up_small.png') no-repeat right center; padding-right: 20px; cursor: pointer} ul.nav-bar.credits-menu .flyout-content .credits-key {width: 47%; float: left; margin-left: 5%; text-align: right; white-space: nowrap} ul.nav-bar.credits-menu .flyout-content .credits-key span {padding-right: 5px; font-weight: bold; font-size: 10px; color: #ce7c65} ul.nav-bar.credits-menu .flyout-content .credits-names {width: 47%; float: left} ul.nav-bar.credits-menu .flyout-content .credits-names span {font-size: 10px; color: #82220f} .representation-filter {cursor: pointer; margin-top: 20px} .representation-filter p {text-align: center; font-size: 18px; text-transform: uppercase} .representation-filter p:hover {text-decoration: underline; font-weight: bold; color: #000} .representation-filter p span {font-weight: bold; color: #000} @media only screen and (max-width: 767px) { #treating-details a.details-tab {float: left; margin-right: 10px} #treating-details .details-text {margin-top: 5em} } @media only screen and (min-width: 768px) { #treating-details {padding: 30px 30px 10px 63px} #treating-details a.details-tab {margin-right: 15px} #treating-details a.details-tab.selected {border-bottom: 5px solid #ccc; padding: 5px; font-weight: bold; background-color: #e9e9e9} #treating-details .details-text {margin-top: 35px} } /* ----------------------- representation_details ----------------------- */ .youtube_wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .youtube_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ----------------------- Search_browse ----------------------- */ #sebr {max-width: 1000px} #sebr #details-title{ padding-left: 23px;} #sebr #details-title p{ margin-bottom: 50px;} #sebr .title{ margin-bottom: 0px; font-size: 20px} #sebr .radius{-webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; } #sebr #left_col {padding-right: 10px;} #sebr .keywords{ padding-top: 10px;} #sebr .keywords .title{ margin-bottom: 50px; font-weight: bold} #sebr .keywords a{display: block; border-bottom: none; margin-bottom: 10px} #sebr .search input{width: 250px; margin-left: 100px} /* ----------------------- Search / Browse ----------------------- */ #search-input-container {margin-bottom: 30px} .search-result { margin-bottom: 10px; padding: 5px; cursor: pointer; background-size: 190px !important; background-position: -50px 0 !important; background-color: #fafafa; background-repeat: no-repeat !important} .search-result #title {margin-top: 0; margin-bottom: 10px; padding-left: 150px; height: 1.15em; overflow: hidden} .search-result #description {margin-bottom: 0; height: 4.75em; overflow: hidden; padding-left: 150px} .search-result #duration {text-align: right; white-space: nowrap; padding-right: 25px} @media only screen and (max-width: 767px) { .search-result #description {padding-right: 10px} } @media only screen and (min-width: 768px) { .search-result { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .search-result #description {padding-right: 20px} :: #no-results-container p {height: 100px} } #search-results-video video {margin-bottom: 25px} #search-results-video p {float: left; height: 100px; overflow: scroll} #no-results-container p {color: #333; font-weight: bold} .keywords a {cursor: pointer} /* ----------------------- about ----------------------- */ #abt{max-width: 1000px} #abt .radius { -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px;} #abt h3 { font-family: 'Lato', sans-serif; font-size: 1.5em; font-weight: bolder; color: #37494e;} #abt p{font-size: 14px;} #abt-sections li{ list-style: none; padding: 0px 10px;} #abt-sections li:first-child{padding-left: 0px} #abt-sections li:last-child{padding-right: 0px} #abt-sections li > div{overflow: hidden; min-height: 15em;} #abt-sections li .further-details p{display: block; font-size: 8px;} #abt-videos .video{cursor: pointer;} #abt-videos .video p:first-of-type{font-weight: bold; margin-bottom: 0px; margin-right: 20px} #abt-videos .video p:last-of-type{color: #37494e} #abt-credits .credits-key{ text-align: right;} #abt-credits .credits-key p{ margin-right:10px; margin-bottom: 0px; font-weight: bold} #abt-credits .credits-value{ text-align: left; border-left: solid} #abt-credits .credits-value p{ margin-left:10px; margin-bottom: 0px} #abt-credits .potrait_con{float: left; text-align: center; padding-top:30px} #abt .video-prod-credits div .panel{border:hidden; margin:0px} #abt .links{background: #9E9E9E; color:white; text-align: center} #abt .links a{color:white} @media only screen and (max-width: 767px) { #abt-credits .credits-key{text-align: left} #abt-credits .credits-value{ border-left: hidden} #abt-credits .credits-value p{ margin-left:0px; margin-bottom: 0px} #abt .video-prod-credits div .panel{padding: 13px 0px} #abt-sections li{padding: 0px} } /* ----------------------- Resources ----------------------- */ /* see resources.css */ /* ----------------------- Footer ----------------------- */ @media only screen and (max-width: 767px) { } @media only screen and (min-width: 768px) { } i.fa {margin-left: 5px}