html,body,header,footer{
padding: 0;
margin: 0;
font-size: 12px;
color: #000;
background-color: #fff;
min-width: 300px;
}
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 100px;
}
img{width: 100%;}
/*
* Custom styles
*/
nav#header{
background-color: #094dfa;
min-width: 300px;
}
#navbar{
text-align: right;
float: right;
}
#navbar .home{
font-size: 34px;
}
.navbar-brand {
font-size: 24px;
color: #000;
padding: 0px;
}
.navbar-brand > .logo{
padding: 5px;
border-radius: 0 0 50% 50%;
background-color: #094dfa;
}
.navbar-brand > .title{
font-size: 28px;
padding-top: 20px;
padding-left: 20px;
color: #fff;
}
.navbar-brand > .title > .subtitle{
font-size: 13px;
}
.navbar-brand.fixed-theme > .logo{
background-color: #0d42cb;
padding: 5px;
margin-top: 0px;
border-radius: 0 0 50% 50%;
}
.navbar-brand > .title{
font-size: 28px;
padding-top: 20px;
padding-left: 20px;
color: #fff;
}
.fixed-theme .title{
font-size: 24px;
padding-top: 5px;
padding-left: 20px;
color: #fff;
}
.navbar-brand img{
max-width: 80px;
max-height: 80px;
}
.navbar-brand.fixed-theme img{
max-width: 70px;
max-height: 70px;
}
.navbar-container {
padding: 20px 0 20px 0;
}
.navbar.navbar-fixed-top.fixed-theme {
background-color: #222;
border-color: #080808;
box-shadow: 0 0 5px rgba(0,0,0,.8);
}
.navbar-brand.fixed-theme {
font-size: 18px;
color: #fff;
}
.navbar #navbar > ul li a{
font-size: 16px;
color: #fff;
}
.navbar #navbar > ul > li > ul.dropdown-menu a {
font-size: 14px;
color: #000;
}
.navbar #navbar > ul li a:hover{
font-size: 16px;
color: #000;
}
.navbar.navbar-fixed-top.fixed-theme #navbar > ul li a{
font-size: 14px;
color: #fff;
}
.navbar.navbar-fixed-top.fixed-theme #navbar > ul li a:hover{
font-size: 14px;
color: #000;
}
.navbar.navbar-fixed-top.fixed-theme #navbar > ul > li > ul.dropdown-menu a {
font-size: 14px;
color: #000;
}
.navbar-container.fixed-theme {
padding: 0;
text-align: left;
}
.navbar-container.fixed-theme .navbar-header button .icon-bar{
background-color: #fff;
}
.navbar-brand.fixed-theme,
.navbar-container.fixed-theme,
.navbar.navbar-fixed-top.fixed-theme,
.navbar-brand,
.navbar-container{
transition: 0.8s;
-webkit-transition: 0.8s;
}
/* ------------------------------------- */
.site > .site-body > .site-wrapper > .site-container{
min-height: 300px;
padding: 0;
}
.site > .site-body > .site-wrapper > .site-container label{
color: #000;
}
.site .subsite-name{
text-transform: uppercase;
color: #0d42cb;
}
.site > .site-body > .site-wrapper > .site-container > .post-index{
margin: 0;
padding:0;
margin-top: 50px;
background-color: #fff;
padding-top: 10px;
}
.post{
height: 300px;
background-color: #fff;
display: block;
margin-bottom: 50px;
overflow: hidden;
}
.post > .post-featured-img{
height: 250px !important;
display: block;
cursor: pointer;
overflow: hidden;
background-color: #fff;
margin-left: -15px;
}
.post > .post-featured-img > .blured > a > img{
width: 100%;
height: 100%;
overflow: hidden;
}
.post > .post-featured-img > .blured > a > img:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
z-index: -9;
}
.post > .post-featured-img > .blured{
height: 250px !important;
width: 100%;
display: block;
background-color:rgba(0,0,0,0.5);
position: absolute;
}
.post > .post-featured-img > .blured{
}
.post > .post-featured-img > .year{
position: absolute;
background-color: #12387e;
display: block;
width: 50px;
z-index: 999;
padding: 10px;
margin-bottom: 40px;
text-align: center;
color: #fff;
font-size: 14px;
}
.post > .post-featured-img > .month{
position: absolute;
background-color: #1d6ea2;
display: block;
width: 50px;
z-index: 999;
padding: 10px;
margin-top: 35px;
text-align: center;
color: #fff;
font-size: 14px;
}
.post > .post-featured-img > .day{
position: absolute;
background-color: #1d6ea2;
display: block;
width: 50px;
z-index: 999;
padding: 4px;
margin-top: 65px;
text-align: center;
color: #fff;
font-size: 12px;
}
.post > .post-content >.post-title > a{
text-decoration: none;
color: #000;
}
.post > .post-content >.post-title > a:hover{
text-decoration: none;
color: #1d6ea2;
}
.post > .post-content >.post-title > a > h4{
font-size: 20px;
text-transform: uppercase;
}
.post > .post-content >.post-title > a > h4::first-letter{
font-size: 25px;
}
.post > .post-content > .post-content-desc{
max-height: 150px;
display: block;
overflow: hidden;
}
.post > .post-content > .post-content-desc::first-letter{
font-size: 18px;
}
.post > .post-content > .post-options{
display: block;
padding: 5px 0;
}
.post > .post-content > .post-options > .posted-by{
display: inline-block;
padding: 5px 0;
}
.post > .post-content > .post-options > .post-category{
display: inline-block;
margin-left: 15px;
color: #1d6ea2;
}
.post > .post-content > .post-options > .post-details{
display: block;
padding: 5px 0;
}
.post > .post-content > .post-options > .post-details .btn{
border-radius: 0;
}
.tiles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tile {
position: relative;
float: left;
width: 100%;
height: 100%;
overflow: hidden;
}
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-out;
}
.txt {
position: absolute;
z-index: 2;
right: 0;
bottom: 10%;
left: 0;
font-family: 'Roboto Slab', serif;
font-size: 9px;
line-height: 12px;
text-align: center;
cursor: default;
}
.x {
font-size: 32px;
line-height: 32px;
}
.post-read > .post-featured-img{
display: block;
cursor: pointer;
overflow: hidden;
background-color: #fff;
}
.post-read > .post-featured-img > a > img{
width: 100%;
height: 100%;
}
.post-read > .post-content{
line-height: 20px;
font-size: 13px;
color: #555;
padding: 0;
}
.post-read > .post-content > .post-content-desc{
line-height: 20px;
padding: 0;
}
.post-read > .post-content > .post-title > h3{
text-transform: uppercase;
font-size: 24px;
margin: 25px 0;
}
.post-read > .post-content > .post-options{
font-size: 8px;
margin: 50px 0;
display: block;
padding: 15px 0;
border:1px solid #e5e5e5;
border-left: none;
border-right: none;
text-transform: uppercase;
padding: 0;
}
.post-read > .post-content .post-gallery{
margin-top: 50px;
padding: 0;
display: block;
}
.side-bar .panel-search i.fa.fa-search{
display: inline-block;
position: absolute;
float: right;
right: 40px;
padding-top: 10px;
font-size: 15px;
}
.side-bar .panel-search input#search{
display: inline-block;
padding-right: 30px;
border-radius: 0;
}
.side-bar .panel{
border-radius: 0;
}
.side-bar .panel > .panel-heading{
padding: 5px;
margin:0;
background-color: #094dfa;
color: #fff;
}
.side-bar .panel h1,
.side-bar .panel h2,
.side-bar .panel h3,
.side-bar .panel h4{
padding: 0;
margin: 0;
}
.side-bar .panel ul{
text-decoration: none;
list-style: none;
margin: 0;
padding: 0;
line-height: 20px;
}
.side-bar .panel ul > li > a{
text-transform: uppercase;
text-decoration: none;
}
.side-bar .panel ul > li > a:hover{
color: #0000ff;
}
.side-bar .panel ul > li{
margin-bottom: 10px;
}
#gallery_img {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#gallery_img:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
footer{
padding: 30px 0;
background-color: #12387e;
color: #fff;
}
footer > .container > .footer-top{
}
footer > .container > .footer-top .menu-campuses-menu li{
text-decoration: none;
list-style: none;
font-size: 16px;
color: #fff;
}
footer > .container > .footer-top a:link,footer > .container > .footer-top a:active,footer > .container > .footer-top a:hover{
text-decoration: none;
list-style: none;
font-size: 16px;
color: #fff;
}
footer > .container > .footer-center{
}
footer > .container > .footer-center > .btn{
}
footer > .container > .footer-center > .btn:hover{
color: #555;
background-color: #fff;
}
footer > .container > .footer-bottom{
}
/* ------------------------------------- */
/**************start of carousel******************/
.skyblue-vw{
background-size:100% 100%;
background-repeat:no-repeat;
position:relative;display:block;
text-align:left;
background-color: rgba(254,254,254,0.8);
}
.skyblue-vh{
background-size:100% 100%;
background-repeat:no-repeat;
position:relative;
display:block;text-align:left;
background-color: rgba(254,254,254,0.8);
}
.skyblue-vw > img,
.skyblue-vh > img{
height: 100vh;
height: 500px !important;
width: 100%;
}
.carousel-indicators {
bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
display: none;
}
.carousel-control.left{
left: 0px;
font-size: 12px;
}
.carousel-control.right{
right: 0px;
font-size: 12px;
}
/*
#carousel:hover .carousel-control{
display: inline-block;
max-width: 50px;
background: rgba(0,0,0,.5);
}
*/
.carousel-caption{
width: 50%;
text-align: left;
margin-left: -100px;
padding: 10px;
top: 10px;
z-index: 999;
}
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.carousel-caption h4{
font-size: 20px;
}
.carousel-caption .caption-title-top{
font-size: 25px;
background: rgba(0,0,0,.8);
max-width:400px;
padding: 10px;
font-weight: bold;
}
.carousel-caption .caption-title-top > .campus{
font-size: 53px;
font-weight: bold;
}
.carousel-caption .caption-title-top:hover{
background: #222;
max-width:400px;
}
.carousel-caption p{
font-size: 14px;
width: 100%;
height: 100%;
max-height: 165px;
max-width: 50%;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px;
}
.carousel p:hover{
background: rgba(0,0,0,.5);
border-radius: 10px;
}
}
.carousel button:hover,
.carousel a:hover{
cursor: pointer;
}
/*
.carousel-caption h3,
.carousel .icon-container{
background-color: rgba(250,250,250,.5);
border-radius: 5px;
padding: 10px;
font-size: 20px;
color: green;
text-align: left;
}
.carousel-caption h3:hover,
.carousel-caption .icon-container:hover{
background-color: rgba(0,0,0,.7);
color: #fff;
}
*/
.carousel-caption button {
background-color: rgba(250,250,250,.5);
color: green;
border: none;
padding: 5px 10px;
font-size: 16px;
}
.carousel .icon-container{
background-color: rgba(254,254,254,.4);
}
.carousel .icon-container > img{
width: 100%;
min-width: 100px;
min-height: 175px;
max-height: 180px;
max-width: 150px;
}
.carousel .icon-container {
display: inline-block;
border-radius: 50%;
}
/*
Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
CSS from: http://codepen.io/transportedman/pen/NPWRGq
and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
Inspired from: http://codepen.io/Rowno/pen/Afykb
*/
/* Fade transition for carousel items */
.carousel .item {
left: 0 !important;
-webkit-transition: opacity .7s; /*adjust timing here */
-moz-transition: opacity .7s;
-o-transition: opacity .7s;
transition: opacity .7s;
}
.carousel-control {
background-image: none !important; /* remove background gradients on controls */
}
/* Fade controls with items */
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
}
/* end of carousel fade */
@media only screen and (max-width: 908px){
.side-bar .panel-search input#search{
}
.side-bar .panel-search i{
}
.post{
height: 500px;
background-color: #fff;
display: block;
margin-bottom: 50px;
overflow: hidden;
}
.post > .post-content > .post-content-desc{
max-height: 100px;
display: block;
overflow: hidden;
}
}
@media only screen and (max-width: 768px){
.navbar-container .navbar-header button .icon-bar{
background-color: #000;
}
.navbar #navbar{
width: 100%;
font-size: 14px;
color: #000;
float: left;
text-align: left;
padding-left: 40px;
background-color: #fff;
}
.navbar #navbar > ul li a{
font-size: 14px;
color: #000;
}
.navbar.navbar-fixed-top.fixed-theme #navbar{
width: 100%;
font-size: 14px;
color: #fff;
float: left;
text-align: left;
padding-left: 40px;
background-color: #000;
}
.navbar-brand {
padding-left: 40px;
}
.navbar-brand img{
max-width: 60px;
max-height: 60px;
z-index: 999999999;
}
.navbar-brand > .logo{
background-color: #094dfa;
padding: 5px;
padding-top: 15px;
border-radius: 0 0 45% 45%;
}
.navbar-brand.fixed-theme > .logo{
background-color: #0d42cb;
padding: 5px;
border-radius: 0 0 50% 50%;
}
.navbar-brand.fixed-theme img{
max-width: 60px;
max-height: 60px;
}
.side-bar .panel-search input#search{
}
.side-bar .panel-search i{
}
.post{
height: 500px;
background-color: #fff;
display: block;
margin-bottom: 50px;
overflow: hidden;
}
.post > .post-content > .post-content-desc{
max-height: 100px;
display: block;
overflow: hidden;
}
#carousel{display: none;}
.site > .site-body > .site-wrapper > .site-container > .post-index{
margin-top: 0;
}
} /* end of 768 */
@media only screen and (max-width: 365px){
.site > .site-body > .site-wrapper > .site-container{
margin-top: 50px;
}
}
@media only screen and (max-width: 468px){
}
|
Download
