Difference between revisions of "Template:Stanford-Brown/CSS"

(CSS)
(CSS)
Line 1: Line 1:
<html lang="en">
 
<head>
 
<style type="text/css">
 
 
/* COLORS
 
/* COLORS
 
light blue: #c1d9ff
 
light blue: #c1d9ff
Line 288: Line 285:
 
font-style: italic;
 
font-style: italic;
 
}
 
}
 
</style>
 
</head>
 
</html>
 

Revision as of 19:43, 29 August 2016

/* COLORS light blue: #c1d9ff very light blue: #dceaff mars red: #dd502f navy: #1a2342 highlight navy: #36416e dark navy: #101423 very light blue-grey: #eaf1f9

  • /

/* --------NAVBAR BEGIN--------- */ .navbar-header{ /* how to set characteristics of the navbar as a whole*/ background-color: #101423; /*dark navy*/ box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.7); /*border-bottom: 1px solid #e0f5fc;*/ width: 100%; border-radius:0; }

  1. BioballoonLabel { /*Bioballoon "home" button*/

color: #dd502f;/*mars red*/ font-size: 1.5em; } .nav.navbar-nav li a { /*individual navbar items*/

   color: #c1d9ff; /*light blue*/

font-size: 14.4px; } .nav.navbar-nav .active a{ /*active navbar item*/ color: #dceaff; /*very ligh† blue*/ background-color: #1a2342; /*navy*/ border-left: 1px solid #dceaff; /*very light blue*/ border-right: 1px solid #dceaff; /*very light blue*/ } .nav.navbar-nav .dropdown .dropdown-toggle.active{ /*active navbar item if dropdown*/ color: #dceaff; /*very ligh† blue*/ background-color: #1a2342;/*navy*/ border-left: 1px solid #dceaff; /*very light blue*/ border-right: 1px solid #dceaff; /*very light blue*/ } .nav.navbar-nav .active a:hover{ /*active navbar item when hovered*/ color: #dceaff; /*very light blue*/ background-color: #36416e; } .nav.navbar-nav li a:hover { /*individual navbar items when hovered*/

   color: #dceaff; /*very light blue*/

background-color: #36416e; } .nav.navbar-nav .dropdown .dropdown-menu li a{ /*dropdown menu navbar items */ color: #191e33; /*navy*/ } .nav.navbar-nav .dropdown .dropdown-menu li a:hover{ /*dropdown menu navbar items */ color: #191e33; /*navy*/ background-color: #c1d9ff; /*light blue*/ } .nav.navbar-nav .dropdown .dropdown-menu .dropdown-header{ /*dropdown menu subheadings*/ color: #dd502f; /*mars red*/ } /* start of navbar wrap prevention*/ @media (max-width: 1230px) { /*this number sets when collapse will occur*/

   .navbar-header {
       float: none;
   }
   .navbar-toggle {
       display: block;
   }
   .navbar-collapse {
       border-top: 1px solid transparent;
       box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
   }
   .navbar-collapse.collapse {
       display: none!important;
   }
   .navbar-nav {
       float: none!important;
       margin: 7.5px -15px;
   }
   .navbar-nav>li {
       float: none;
   }
   .navbar-nav>li>a {
       padding-top: 10px;
       padding-bottom: 10px;
   }
   .navbar-text {
       float: none;
       margin: 15px 0;
   }
   .navbar-collapse.collapse.in {
       display: block!important;
   }
   .collapsing {
       overflow: hidden!important;
   }

} /* end of navbar wrap prevention*/ /* ----------NAVBAR END----------- */

/* ------HEADER IMAGE BEGIN------- */

  1. bbwebheader{

max-width: 100%; margin-top: 50px; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.6); margin-bottom: 20px; z-index: 0; }

/* -------HEADER IMAGE END-------- */

body { font-family: avenir, "century gothic", sans-serif; background-color: #050918; /*dark navy*/ font-weight: lighter; }

/*image grid setup: index*/ .row.row1{ margin-top:0px; border-left: 3px solid #4f6ac5; border-right: 3px solid #4f6ac5; padding-top:20px; padding-bottom: 20px; } .row.row2{ margin-top:0px; border-left: 3px solid #4f6ac5; border-right: 3px solid #4f6ac5; padding-top:20px; padding-bottom: 20px; } .homeimage{ width:80%; margin-left: 10%; /*margin-left + (-)margin-right + max-width = 100% */ margin-right: -10%; /*if margin-left = margin-right, will be centered*/ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); border-radius:250px; border:1px solid #dceaff; } .homeimage:active{ width:80%; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8); }

/*col containing page title: index */ .col-PT{ border-left: 3px solid #4f6ac5; border-right: 3px solid #4f6ac5; }

/*index*/ .pageTitle { max-width:100%; color:#4f6ac5; /*dark blue*/ text-align:center; font-weight: lighter; font-size: 5.3em; }

/*index, collab*/ .pagetext{ max-width: 100%; text-align:justify; border-left: 3px solid #4f6ac5; border-right: 3px solid #4f6ac5; font-size: 18px; padding-bottom: 20px; padding-left: 50px; padding-right: 50px; color: #dceaff; } /*collab*/ .pagetext-L{ max-width: 100%; text-align:justify; border-left: 3px solid #4f6ac5; border-right: none; font-size: 18px; padding-left: 50px; padding-right: 50px; } /*collab*/ .pagetext-R{ max-width: 100%; text-align:justify; border-right: 3px solid #4f6ac5; border-left: none; font-size: 18px; padding-left: 50px; padding-right: 50px; } /*collab*/ .text{ padding-bottom: 23px; } /*collab*/ .imgcol-R{ border-right: 3px solid #4f6ac5; padding-right: 50px; padding-left: 0px; } /*collab*/ .imgcol-L{ border-left: 3px solid #4f6ac5; padding-right: 0px; padding-left: 50px; } /*collab*/ .img-R{ max-width: 100%; margin-bottom: 35px; } /*collab*/ .img-L{ max-width: 100%; margin-bottom: 35px; }

/*collab*/ .sectionTitle-L { max-width:100%; color:#4f6ac5; /*dark blue*/ text-align:left; font-weight: lighter; font-size: 3.5em; }

/*collab*/ .sectionTitle-R { max-width:100%; color:#4f6ac5; /*dark blue*/ text-align:right; font-weight: lighter; font-size: 3.5em; }

/*collab, index*/ .last{ margin-bottom: 20px; }

.teamimg{ margin-top:0px; border-left: 3px solid #4f6ac5; border-right: 3px solid #4f6ac5; padding-top:10px; padding-bottom: 5px; } .gridtext{ padding-top: 0px; text-align: justify; padding-left: 7%; padding-right: 7%; font-size: 16px; }

.teamimage{ width:80%; margin-left: 10%; /*margin-left + (-)margin-right + max-width = 100% */ margin-right: -10%; /*if margin-left = margin-right, will be centered*/ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); border-radius:250px; border: 1px solid #dceaff; }

.name { max-width:100%; color:#4f6ac5; /*dark blue*/ text-align:left; font-weight: lighter; padding-left: 7%; padding-right: 7%; font-size: 20px; margin-top:0px; padding-top:0px; }

.advisor { max-width:100%; color:#4f6ac5; /*dark blue*/ text-align:left; font-weight: lighter; padding-left: 7%; padding-right: 7%; font-size: 16px; margin-top:0px; padding-top:0px; font-style: italic; }