Team:StanfordBrownSpelman/stylesheet
From 2014.igem.org
/* ====== CSS Added ====== */
- selection {
background: #cccccc; /* WebKit/Blink Browsers */
}
- -moz-selection {
background: #cccccc; /* Gecko Browsers */
}
/*
- roof, #bottom, #left, #right {
position: fixed; } #left, #right { z-index: 3000; top: 0; bottom: 0; width: 10px; } #left { left: 0; background: #000000 } #right { right: 0; background: #000000 }
#roof, #bottom {
z-index: 3000;
left: 0; right: 0; height: 10px; } #roof { top: 0; background: #000000 } #bottom { bottom: 0; background: #000000 }
- /
.circle {
box-shadow: inset 0px 0px 60px #ffffff;
background-color: #f9f4f2; z-index: -100; border-radius: 50%; width: 480px; height: 480px; position: relative;
left: 50%; top: 50%;
/* * Where the magic happens * Centering method from CSS Tricks * http://css-tricks.com/centering-percentage-widthheight-elements/ */ transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
}
.title { width:100%; text-align:center; margin:auto; position:absolute; top:18px; z-index:2000; } .wiki { position:fixed; top:18px; right:25px; z-index:5000; border-bottom:0px solid; } .projects { position:fixed; top:18px; left:25px; z-index:5000; border-bottom:0px solid; } .team { position:fixed; bottom:10px; right:25px; z-index:5000; border-bottom:0px solid; } .contact { position:fixed; bottom:10px; right:25px; z-index:5000; border-bottom:0px solid; }
/* ====== SPLASH ====== */
- globalWrapper {
background-size: cover; background-position: center;
background-repeat: no-repeat;
}
- landing {
width: 100%; height: 700px; background-image: url(""); background-size: cover; background-position: center;
background-repeat: no-repeat;
z-index: 6000; position: relative; overflow: hidden; text-align: center; }
- title{
font-size: 64pt; line-height: 70pt; color: black; font-family: 'Montserrat', Futura, Arial, sans-serif; text-shadow: 6px 6px 12px rgba(0,0,0, .25); opacity:0.95; }
- name {
position: absolute; left: 50%; top: 50%;
/* * Where the magic happens * Centering method from CSS Tricks * http://css-tricks.com/centering-percentage-widthheight-elements/ */ transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
}
/* ====== Remainder ====== */
nav { position: fixed; left: 0; right: 0; top: 0; z-index: 10000; font-size: 12pt;
height: 45px; }
nav .links { float: left; padding: 10px; } nav .links:hover{ opacity: .6; }
nav .links:active{ background-color: transparent; }
- about{
margin-top: 30px; margin-bottom: 30px; }
- about img{
width: 50px; height: 50px; top: -8px; position: absolute; left: 50px; }
- about .sub{
padding-left: 110px; margin-bottom: 15px; position: relative;
}
- bioBrick{
margin-top: 10px; margin-bottom: 10px;
}
- bioBrick img{
width: 50px; height: 50px; top: -8px; position: absolute; left: 25px; }
- bioBrick .sub{
padding-left: 85px; margin-bottom: 15px; position: relative;
}
- bioBrickFinal{
margin-top: 10px; margin-bottom: 30px;
}
- bioBrickFinal img{
width: 50px; height: 50px; top: -8px; position: absolute; left: 25px; }
- bioBrickFinal .sub{
padding-left: 85px; margin-bottom: 15px; position: relative;
}
.projecticon-bio-bricks{ width:100%; max-width:800px; height:150px; background-position: center; background-repeat: no-repeat; background-size:150px; margin-top: 30px; }
- work{
margin-top: 30px; }
- work img{
width: 115px; height: 115px; position: absolute; left: 0px; top:-6px; }
- work .sub2{
left: 90px;
padding-left: 140px; position: relative; margin-bottom: 30px;
}
- work .sub3{
left: 0px; padding-left: 140px;
position: relative; margin-bottom: 30px;
}
- thanks{
margin-top: 30px; margin-bottom: 30px; }
- connect{
margin-top: 30px; margin-bottom: 30px; }
- connect img{
width: 70px; height: 70px; position: relative; left: 0px; top: 0px; }
- mobile1{
margin-top: 10px; margin-bottom: 8px; }
- mobile2{
margin-top: 20px; margin-bottom: 20px; }
- mobile2 img{
width: 40px; height: 40px; position: relative; left: 0px; top: 0px; }
div#closing a.external
{ background:none !important; padding: 0px !important;
}
- closing h6{
margin-top: 30px; margin-bottom: 0px; padding-bottom: 20px; font-size: 8pt; color: #cccccc; } /*
- work h2{
font-size: 16pt; line-height: 24pt; letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 2px; }
- work h4{
font-size: 12pt; line-height: 17pt; letter-spacing: 0px; font-weight: normal; text-transform: inherit; }
- /
- teamNoodle {
}
.placeholder{ width:100%; max-width:800px; height:20px; background-image: white); background-position: center; background-repeat: no-repeat; background-size: 20px; }
.placeholder2{
width:100%;
max-width:800px; height:30px; background-image: white); background-position: center; background-repeat: no-repeat; background-size: 20px; }
.cells{ width:100%; max-width:800px; height:80px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size: 80px; }
.cells2{ width:100%; max-width:800px; height:80px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size: 80px; }
.cells3{ width:100%; max-width:800px; height:80px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size: 80px; }
.cells4{ width:100%; max-width:800px; height:80px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size: 80px; }
.cells5{ width:100%; max-width:800px; height:80px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size: 80px; }
.cells6{ width:100%; max-width:800px; height:80px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size: 80px; }
.cells7{ width:100%; max-width:800px; height:80px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size: 80px; }
.cells8{ width:100%; max-width:800px; height:80px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size: 80px; }
/* ====== CSS for Sub-Pages ====== */
.projecticon-cellulose-acetate{ width:100%; max-width:800px; height:150px;
display:block;
background-position: center; background-repeat: no-repeat; background-size:150px; margin-top: 30px; }
.projecticon-cellulose-acetate img{
display: block; margin-left: auto; margin-right: auto;
width: 162px; height: 162px;
float: top;
}
.projecticon-hell-cell{ width:100%; max-width:800px; height:150px; background-position: center; background-repeat: no-repeat; background-size:150px; margin-top: 30px; }
.projecticon-waterproofing{ width:100%; max-width:800px; height:150px; background-position: center; background-repeat: no-repeat; background-size:150px; margin-top: 30px; }
.projecticon-biodegradation{ width:100%; max-width:800px; height:150px; background-position: center; background-repeat: no-repeat; background-size:150px; margin-top: 30px; }
.projecticon-human-practices{ width:100%; max-width:800px; height:150px; background-position: center; background-repeat: no-repeat; background-size:150px; margin-top: 30px; }
.projecticon-drone{ width:100%; max-width:800px; height:150px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size:150px; margin-top: 30px; }
.projecticon-meet-team{ width:130%; max-width:1100px; height:500px; background-image:url(""); background-position: center; background-repeat: no-repeat; background-size:800px; margin-top: 30px;
margin-bottom: 30px;
}
- header{
margin-top: 10px; margin-bottom: 30px; }
- photo{
margin-top: 30px; margin-bottom: 30px; }
- subheader{
margin-top: 30px; margin-bottom: 30px; }
- subheader .sub4{
padding-left: 130px; margin-bottom: 10px; margin-top: 10px; position: relative;
}
- subheader .subindent{
padding-left: 50px; margin-bottom: 10px; margin-top: 10px; position: relative;
}
- subheader img{
width: 70px; height: 70px; top: -2px; position: absolute; left: 50px; }
- subheader .sub5{
padding-left: 55px; margin-bottom: 10px; margin-top: 10px; position: relative;
}
- subheader .sub6{
padding-left: 55px; margin-bottom: 10px; margin-top: 10px; position: relative; font-family:'Inconsolata', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 8px;
}
- images{
}
- results{
}
- process{
}
- references{
}
/* ====== CSS Added Over ====== */
meta.foundation-version {
font-family: "/5.3.1/"; }
meta.foundation-mq-small {
font-family: "/only screen/"; width: 0em; }
meta.foundation-mq-medium {
font-family: "/only screen and (min-width:40.063em)/"; width: 40.063em; }
meta.foundation-mq-large {
font-family: "/only screen and (min-width:64.063em)/"; width: 64.063em; }
meta.foundation-mq-xlarge {
font-family: "/only screen and (min-width:90.063em)/"; width: 90.063em; }
meta.foundation-mq-xxlarge {
font-family: "/only screen and (min-width:120.063em)/"; width: 120.063em; }
meta.foundation-data-attribute-namespace {
font-family: false; }
html, body {
height: 100%;
}
- ,
- before,
- after {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body {
font-size: 100%; }
body {
background: #ffffff; color: #00000; padding: 0; margin: 0; font-family: "Montserrat", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; line-height: 1; position: relative; /* cursor: url('../images/drone_cursor.png'), default; */ cursor: default; }
img {
max-width: 100%; height: auto; margin-bottom: 4px; }
/* IMAGE BOTTOM MARGIN MAY CAUSE PROBLEMS */
img {
-ms-interpolation-mode: bicubic; }
- map_canvas img,
- map_canvas embed,
- map_canvas object,
.map_canvas img, .map_canvas embed, .map_canvas object {
max-width: none !important; }
.left {
float: left !important; }
.right {
float: right !important; }
.clearfix:before, .clearfix:after {
content: " "; display: table; }
.clearfix:after {
clear: both; }
.hide {
display: none; }
.antialiased {
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img {
display: inline-block; vertical-align: middle; }
textarea {
height: auto; min-height: 50px; }
select {
width: 100%; }
.row {
width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .row.collapse > .column, .row.collapse > .columns { padding-left: 0; padding-right: 0; } .row.collapse .row { margin-left: 0; margin-right: 0; } .row .row { width: auto; margin-left: -0.9375em; margin-right: -0.9375em; margin-top: 0; margin-bottom: 0; max-width: none; } .row .row:before, .row .row:after { content: " "; display: table; } .row .row:after { clear: both; } .row .row.collapse { width: auto; margin: 0; max-width: none; } .row .row.collapse:before, .row .row.collapse:after { content: " "; display: table; } .row .row.collapse:after { clear: both; }
.column, .columns {
padding-left: 0.9375em; padding-right: 0.9375em; width: 100%; float: left; }
[class*="column"] + [class*="column"]:last-child {
float: right; }
[class*="column"] + [class*="column"].end {
float: left; }
@media only screen {
.small-push-0 { position: relative; left: 0%; right: auto; }
.small-pull-0 { position: relative; right: 0%; left: auto; }
.small-push-1 { position: relative; left: 8.33333%; right: auto; }
.small-pull-1 { position: relative; right: 8.33333%; left: auto; }
.small-push-2 { position: relative; left: 16.66667%; right: auto; }
.small-pull-2 { position: relative; right: 16.66667%; left: auto; }
.small-push-3 { position: relative; left: 25%; right: auto; }
.small-pull-3 { position: relative; right: 25%; left: auto; }
.small-push-4 { position: relative; left: 33.33333%; right: auto; }
.small-pull-4 { position: relative; right: 33.33333%; left: auto; }
.small-push-5 { position: relative; left: 41.66667%; right: auto; }
.small-pull-5 { position: relative; right: 41.66667%; left: auto; }
.small-push-6 { position: relative; left: 50%; right: auto; }
.small-pull-6 { position: relative; right: 50%; left: auto; }
.small-push-7 { position: relative; left: 58.33333%; right: auto; }
.small-pull-7 { position: relative; right: 58.33333%; left: auto; }
.small-push-8 { position: relative; left: 66.66667%; right: auto; }
.small-pull-8 { position: relative; right: 66.66667%; left: auto; }
.small-push-9 { position: relative; left: 75%; right: auto; }
.small-pull-9 { position: relative; right: 75%; left: auto; }
.small-push-10 { position: relative; left: 83.33333%; right: auto; }
.small-pull-10 { position: relative; right: 83.33333%; left: auto; }
.small-push-11 { position: relative; left: 91.66667%; right: auto; }
.small-pull-11 { position: relative; right: 91.66667%; left: auto; }
.column, .columns { position: relative; padding-left: 0.9375em; padding-right: 0.9375em; float: left; }
.small-1 { width: 8.33333%; }
.small-2 { width: 16.66667%; }
.small-3 { width: 25%; }
.small-4 { width: 33.33333%; }
.small-5 { width: 41.66667%; }
.small-6 { width: 50%; }
.small-7 { width: 58.33333%; }
.small-8 { width: 66.66667%; }
.small-9 { width: 75%; }
.small-10 { width: 83.33333%; }
.small-11 { width: 91.66667%; }
.small-12 { width: 100%; }
.small-offset-0 { margin-left: 0% !important; }
.small-offset-1 { margin-left: 8.33333% !important; }
.small-offset-2 { margin-left: 16.66667% !important; }
.small-offset-3 { margin-left: 25% !important; }
.small-offset-4 { margin-left: 33.33333% !important; }
.small-offset-5 { margin-left: 41.66667% !important; }
.small-offset-6 { margin-left: 50% !important; }
.small-offset-7 { margin-left: 58.33333% !important; }
.small-offset-8 { margin-left: 66.66667% !important; }
.small-offset-9 { margin-left: 75% !important; }
.small-offset-10 { margin-left: 83.33333% !important; }
.small-offset-11 { margin-left: 91.66667% !important; }
.small-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; }
.column.small-centered, .columns.small-centered { margin-left: auto; margin-right: auto; float: none; }
.column.small-uncentered, .columns.small-uncentered { margin-left: 0; margin-right: 0; float: left; }
.column.small-centered:last-child, .columns.small-centered:last-child { float: none; }
.column.small-uncentered:last-child, .columns.small-uncentered:last-child { float: left; }
.column.small-uncentered.opposite, .columns.small-uncentered.opposite { float: right; } }
@media only screen and (min-width: 40.063em) {
.medium-push-0 { position: relative; left: 0%; right: auto; }
.medium-pull-0 { position: relative; right: 0%; left: auto; }
.medium-push-1 { position: relative; left: 8.33333%; right: auto; }
.medium-pull-1 { position: relative; right: 8.33333%; left: auto; }
.medium-push-2 { position: relative; left: 16.66667%; right: auto; }
.medium-pull-2 { position: relative; right: 16.66667%; left: auto; }
.medium-push-3 { position: relative; left: 25%; right: auto; }
.medium-pull-3 { position: relative; right: 25%; left: auto; }
.medium-push-4 { position: relative; left: 33.33333%; right: auto; }
.medium-pull-4 { position: relative; right: 33.33333%; left: auto; }
.medium-push-5 { position: relative; left: 41.66667%; right: auto; }
.medium-pull-5 { position: relative; right: 41.66667%; left: auto; }
.medium-push-6 { position: relative; left: 50%; right: auto; }
.medium-pull-6 { position: relative; right: 50%; left: auto; }
.medium-push-7 { position: relative; left: 58.33333%; right: auto; }
.medium-pull-7 { position: relative; right: 58.33333%; left: auto; }
.medium-push-8 { position: relative; left: 66.66667%; right: auto; }
.medium-pull-8 { position: relative; right: 66.66667%; left: auto; }
.medium-push-9 { position: relative; left: 75%; right: auto; }
.medium-pull-9 { position: relative; right: 75%; left: auto; }
.medium-push-10 { position: relative; left: 83.33333%; right: auto; }
.medium-pull-10 { position: relative; right: 83.33333%; left: auto; }
.medium-push-11 { position: relative; left: 91.66667%; right: auto; }
.medium-pull-11 { position: relative; right: 91.66667%; left: auto; }
.column, .columns { position: relative; padding-left: 0.9375em; padding-right: 0.9375em; float: left; }
.medium-1 { width: 8.33333%; }
.medium-2 { width: 16.66667%; }
.medium-3 { width: 25%; }
.medium-4 { width: 33.33333%; }
.medium-5 { width: 41.66667%; }
.medium-6 { width: 50%; }
.medium-7 { width: 58.33333%; }
.medium-8 { width: 66.66667%; }
.medium-9 { width: 75%; }
.medium-10 { width: 83.33333%; }
.medium-11 { width: 91.66667%; }
.medium-12 { width: 100%; }
.medium-offset-0 { margin-left: 0% !important; }
.medium-offset-1 { margin-left: 8.33333% !important; }
.medium-offset-2 { margin-left: 16.66667% !important; }
.medium-offset-3 { margin-left: 25% !important; }
.medium-offset-4 { margin-left: 33.33333% !important; }
.medium-offset-5 { margin-left: 41.66667% !important; }
.medium-offset-6 { margin-left: 50% !important; }
.medium-offset-7 { margin-left: 58.33333% !important; }
.medium-offset-8 { margin-left: 66.66667% !important; }
.medium-offset-9 { margin-left: 75% !important; }
.medium-offset-10 { margin-left: 83.33333% !important; }
.medium-offset-11 { margin-left: 91.66667% !important; }
.medium-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; }
.column.medium-centered, .columns.medium-centered { margin-left: auto; margin-right: auto; float: none; }
.column.medium-uncentered, .columns.medium-uncentered { margin-left: 0; margin-right: 0; float: left; }
.column.medium-centered:last-child, .columns.medium-centered:last-child { float: none; }
.column.medium-uncentered:last-child, .columns.medium-uncentered:last-child { float: left; }
.column.medium-uncentered.opposite, .columns.medium-uncentered.opposite { float: right; }
.push-0 { position: relative; left: 0%; right: auto; }
.pull-0 { position: relative; right: 0%; left: auto; }
.push-1 { position: relative; left: 8.33333%; right: auto; }
.pull-1 { position: relative; right: 8.33333%; left: auto; }
.push-2 { position: relative; left: 16.66667%; right: auto; }
.pull-2 { position: relative; right: 16.66667%; left: auto; }
.push-3 { position: relative; left: 25%; right: auto; }
.pull-3 { position: relative; right: 25%; left: auto; }
.push-4 { position: relative; left: 33.33333%; right: auto; }
.pull-4 { position: relative; right: 33.33333%; left: auto; }
.push-5 { position: relative; left: 41.66667%; right: auto; }
.pull-5 { position: relative; right: 41.66667%; left: auto; }
.push-6 { position: relative; left: 50%; right: auto; }
.pull-6 { position: relative; right: 50%; left: auto; }
.push-7 { position: relative; left: 58.33333%; right: auto; }
.pull-7 { position: relative; right: 58.33333%; left: auto; }
.push-8 { position: relative; left: 66.66667%; right: auto; }
.pull-8 { position: relative; right: 66.66667%; left: auto; }
.push-9 { position: relative; left: 75%; right: auto; }
.pull-9 { position: relative; right: 75%; left: auto; }
.push-10 { position: relative; left: 83.33333%; right: auto; }
.pull-10 { position: relative; right: 83.33333%; left: auto; }
.push-11 { position: relative; left: 91.66667%; right: auto; }
.pull-11 { position: relative; right: 91.66667%; left: auto; } }
@media only screen and (min-width: 64.063em) {
.large-push-0 { position: relative; left: 0%; right: auto; }
.large-pull-0 { position: relative; right: 0%; left: auto; }
.large-push-1 { position: relative; left: 8.33333%; right: auto; }
.large-pull-1 { position: relative; right: 8.33333%; left: auto; }
.large-push-2 { position: relative; left: 16.66667%; right: auto; }
.large-pull-2 { position: relative; right: 16.66667%; left: auto; }
.large-push-3 { position: relative; left: 25%; right: auto; }
.large-pull-3 { position: relative; right: 25%; left: auto; }
.large-push-4 { position: relative; left: 33.33333%; right: auto; }
.large-pull-4 { position: relative; right: 33.33333%; left: auto; }
.large-push-5 { position: relative; left: 41.66667%; right: auto; }
.large-pull-5 { position: relative; right: 41.66667%; left: auto; }
.large-push-6 { position: relative; left: 50%; right: auto; }
.large-pull-6 { position: relative; right: 50%; left: auto; }
.large-push-7 { position: relative; left: 58.33333%; right: auto; }
.large-pull-7 { position: relative; right: 58.33333%; left: auto; }
.large-push-8 { position: relative; left: 66.66667%; right: auto; }
.large-pull-8 { position: relative; right: 66.66667%; left: auto; }
.large-push-9 { position: relative; left: 75%; right: auto; }
.large-pull-9 { position: relative; right: 75%; left: auto; }
.large-push-10 { position: relative; left: 83.33333%; right: auto; }
.large-pull-10 { position: relative; right: 83.33333%; left: auto; }
.large-push-11 { position: relative; left: 91.66667%; right: auto; }
.large-pull-11 { position: relative; right: 91.66667%; left: auto; }
.column, .columns { position: relative; padding-left: 0.9375em; padding-right: 0.9375em; float: left; }
.large-1 { width: 8.33333%; }
.large-2 { width: 16.66667%; }
.large-3 { width: 25%; }
.large-4 { width: 33.33333%; }
.large-5 { width: 41.66667%; }
.large-6 { width: 50%; }
.large-7 { width: 58.33333%; }
.large-8 { width: 66.66667%; }
.large-9 { width: 75%; }
.large-10 { width: 83.33333%; }
.large-11 { width: 91.66667%; }
.large-12 { width: 100%; }
.large-offset-0 { margin-left: 0% !important; }
.large-offset-1 { margin-left: 8.33333% !important; }
.large-offset-2 { margin-left: 16.66667% !important; }
.large-offset-3 { margin-left: 25% !important; }
.large-offset-4 { margin-left: 33.33333% !important; }
.large-offset-5 { margin-left: 41.66667% !important; }
.large-offset-6 { margin-left: 50% !important; }
.large-offset-7 { margin-left: 58.33333% !important; }
.large-offset-8 { margin-left: 66.66667% !important; }
.large-offset-9 { margin-left: 75% !important; }
.large-offset-10 { margin-left: 83.33333% !important; }
.large-offset-11 { margin-left: 91.66667% !important; }
.large-reset-order { margin-left: 0; margin-right: 0; left: auto; right: auto; float: left; }
.column.large-centered, .columns.large-centered { margin-left: auto; margin-right: auto; float: none; }
.column.large-uncentered, .columns.large-uncentered { margin-left: 0; margin-right: 0; float: left; }
.column.large-centered:last-child, .columns.large-centered:last-child { float: none; }
.column.large-uncentered:last-child, .columns.large-uncentered:last-child { float: left; }
.column.large-uncentered.opposite, .columns.large-uncentered.opposite { float: right; }
.push-0 { position: relative; left: 0%; right: auto; }
.pull-0 { position: relative; right: 0%; left: auto; }
.push-1 { position: relative; left: 8.33333%; right: auto; }
.pull-1 { position: relative; right: 8.33333%; left: auto; }
.push-2 { position: relative; left: 16.66667%; right: auto; }
.pull-2 { position: relative; right: 16.66667%; left: auto; }
.push-3 { position: relative; left: 25%; right: auto; }
.pull-3 { position: relative; right: 25%; left: auto; }
.push-4 { position: relative; left: 33.33333%; right: auto; }
.pull-4 { position: relative; right: 33.33333%; left: auto; }
.push-5 { position: relative; left: 41.66667%; right: auto; }
.pull-5 { position: relative; right: 41.66667%; left: auto; }
.push-6 { position: relative; left: 50%; right: auto; }
.pull-6 { position: relative; right: 50%; left: auto; }
.push-7 { position: relative; left: 58.33333%; right: auto; }
.pull-7 { position: relative; right: 58.33333%; left: auto; }
.push-8 { position: relative; left: 66.66667%; right: auto; }
.pull-8 { position: relative; right: 66.66667%; left: auto; }
.push-9 { position: relative; left: 75%; right: auto; }
.pull-9 { position: relative; right: 75%; left: auto; }
.push-10 { position: relative; left: 83.33333%; right: auto; }
.pull-10 { position: relative; right: 83.33333%; left: auto; }
.push-11 { position: relative; left: 91.66667%; right: auto; }
.pull-11 { position: relative; right: 91.66667%; left: auto; } }
.text-left {
text-align: left !important; }
.text-right {
text-align: right !important; }
.text-center {
text-align: center !important; }
.text-justify {
text-align: justify !important; }
@media only screen and (max-width: 40em) {
.small-only-text-left { text-align: left !important; }
.small-only-text-right { text-align: right !important; }
.small-only-text-center { text-align: center !important; }
.small-only-text-justify { text-align: justify !important; } }
@media only screen {
.small-text-left { text-align: left !important; }
.small-text-right { text-align: right !important; }
.small-text-center { text-align: center !important; }
.small-text-justify { text-align: justify !important; } }
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
.medium-only-text-left { text-align: left !important; }
.medium-only-text-right { text-align: right !important; }
.medium-only-text-center { text-align: center !important; }
.medium-only-text-justify { text-align: justify !important; } }
@media only screen and (min-width: 40.063em) {
.medium-text-left { text-align: left !important; }
.medium-text-right { text-align: right !important; }
.medium-text-center { text-align: center !important; }
.medium-text-justify { text-align: justify !important; } }
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
.large-only-text-left { text-align: left !important; }
.large-only-text-right { text-align: right !important; }
.large-only-text-center { text-align: center !important; }
.large-only-text-justify { text-align: justify !important; } }
@media only screen and (min-width: 64.063em) {
.large-text-left { text-align: left !important; }
.large-text-right { text-align: right !important; }
.large-text-center { text-align: center !important; }
.large-text-justify { text-align: justify !important; } }
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
.xlarge-only-text-left { text-align: left !important; }
.xlarge-only-text-right { text-align: right !important; }
.xlarge-only-text-center { text-align: center !important; }
.xlarge-only-text-justify { text-align: justify !important; } }
@media only screen and (min-width: 90.063em) {
.xlarge-text-left { text-align: left !important; }
.xlarge-text-right { text-align: right !important; }
.xlarge-text-center { text-align: center !important; }
.xlarge-text-justify { text-align: justify !important; } }
@media only screen and (min-width: 120.063em) and (max-width: 99999999em) {
.xxlarge-only-text-left { text-align: left !important; }
.xxlarge-only-text-right { text-align: right !important; }
.xxlarge-only-text-center { text-align: center !important; }
.xxlarge-only-text-justify { text-align: justify !important; } }
@media only screen and (min-width: 120.063em) {
.xxlarge-text-left { text-align: left !important; }
.xxlarge-text-right { text-align: right !important; }
.xxlarge-text-center { text-align: center !important; }
.xxlarge-text-justify { text-align: justify !important; } }
/* Typography resets */ div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
margin: 0; padding: 0; }
/* Default Link Styles */ a {
color: #000000; text-decoration: none; line-height: inherit; }
a.one:hover { color: #eaea13; } a.two:hover { color: #fbb03b; } a.three:hover { color: #dbef20; } a.four:hover { color: #a2d650; } a.five:hover { color: #4fcc36; } a.six:hover { color: #22b573; } a.seven:hover { color: #39b54a; } a.eight:hover { color: #00a99d; } a.nine:hover { color: #18d3a2; } a.ten:hover { color: #b2ae22; }
a img { border: none; }
/* Default paragraph styles */ p {
font-family: inherit; font-weight: normal; font-size: 1rem; line-height: 1.6; margin-bottom: 1.25rem; text-rendering: optimizeLegibility; } p.lead { font-size: 1.21875rem; line-height: 1.6; } p aside { font-size: 0.875rem; line-height: 1.35; font-style: italic; }
/* Default header styles */ h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; color: #000000; text-rendering: optimizeLegibility; margin-top: 0.2rem; margin-bottom: 0.5rem; line-height: 1.4; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; }
h1 {
font-size: 2.125rem; }
h2 {
/* font-size: 1.6875rem; */ font-size: 1.0rem; line-height: 24pt; letter-spacing: 0px; font-weight: 400; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 20px;
}
h3 {
font-size: 1.375rem; letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 2px; }
h4 {
font-size: 1.125rem; letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 2px; }
h5 {
font-size: 1.125rem; letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 10px; }
h6 {
font-size: .8rem; letter-spacing: 0px; font-weight: normal; text-transform: inherit; text-align: left; }
.boxedmenu {
border: 1px solid green
}
h7 {
/* font-size: 1.6875rem; */ font-size: 1.3rem; line-height: 24pt; letter-spacing: 0px; font-weight: 400; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 20px; }
/*
- work h2{
font-size: 16pt; line-height: 24pt; letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 2px; }
- work h4{
font-size: 12pt; line-height: 17pt; letter-spacing: 0px; font-weight: normal; text-transform: inherit; }
- /
.subheader {
line-height: 1.4; color: #6f6f6f; font-weight: normal; margin-top: 0.2rem; margin-bottom: 0.5rem; }
hr {
border: solid #dddddd; border-width: 1px 0 0; clear: both; margin: 1.25rem 0 1.1875rem; height: 0; }
/* Helpful Typography Defaults */ em, i {
font-style: italic; line-height: inherit; }
strong, b {
font-weight: bold; line-height: inherit; }
small {
font-size: 60%; line-height: inherit; }
code {
font-family: Consolas, "Liberation Mono", Courier, monospace; font-weight: bold; color: #910b0e; }
/* Lists */ ul, ol, dl {
font-size: 1rem; line-height: 1.6; margin-bottom: 1.25rem; list-style-position: outside; font-family: inherit; }
ul {
margin-left: 1.1rem; } ul.no-bullet { margin-left: 0; } ul.no-bullet li ul, ul.no-bullet li ol { margin-left: 1.25rem; margin-bottom: 0; list-style: none; }
/* Unordered Lists */ ul li ul, ul li ol {
margin-left: 1.25rem; margin-bottom: 0; }
ul.square li ul, ul.circle li ul, ul.disc li ul {
list-style: inherit; }
ul.square {
list-style-type: square; margin-left: 1.1rem; }
ul.circle {
list-style-type: circle; margin-left: 1.1rem; }
ul.disc {
list-style-type: disc; margin-left: 1.1rem; }
ul.no-bullet {
list-style: none; }
/* Ordered Lists */ ol {
margin-left: 1.4rem; } ol li ul, ol li ol { margin-left: 1.25rem; margin-bottom: 0; }
/* Definition Lists */ dl dt {
margin-bottom: 0.3rem; font-weight: bold; }
dl dd {
margin-bottom: 0.75rem; }
/* Abbreviations */ abbr, acronym {
text-transform: uppercase; font-size: 90%; color: #000000; border-bottom: 1px dotted #dddddd; cursor: help; }
abbr {
text-transform: none; }
/* Blockquotes */ blockquote {
margin: 0 0 1.25rem; padding: 0.5625rem 1.25rem 0 1.1875rem; border-left: 1px solid #dddddd; } blockquote cite { display: block; font-size: 0.8125rem; color: #555555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #555555; }
blockquote, blockquote p {
line-height: 1.6; color: #6f6f6f; }
/* Microformats */ .vcard {
display: inline-block; margin: 0 0 1.25rem 0; border: 1px solid #dddddd; padding: 0.625rem 0.75rem; } .vcard li { margin: 0; display: block; } .vcard .fn { font-weight: bold; font-size: 0.9375rem; }
.vevent .summary {
font-weight: bold; }
.vevent abbr {
cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 0.0625rem; }
@media only screen and (min-width: 40.063em) {
h1, h2, h3, h4, h5, h6 { line-height: 1.4; }
h1 { font-size: 2.75rem; }
h2 { /* font-size: 2.3125rem; */ font-size: 1.3rem; line-height: 24pt;
letter-spacing: 0px; font-weight: 400; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 20px;
}
h3 { font-size: 1.6875rem; line-height: 24pt;
letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 2px; }
h4 { font-size: 1.4375rem; line-height: 24pt;
letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 2px; }
h5 { font-size: 1.4375rem; line-height: 24pt;
letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 10px; }
h6 { font-size: 1rem; line-height: 17pt;
letter-spacing: 0px; font-weight: normal; text-transform: inherit;
text-align: left; }
h7 { /* font-size: 2.3125rem; */ font-size: 1.0rem; line-height: 24pt;
letter-spacing: 0px; font-weight: 400; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 20px;
}
}
/* ====== CSS Added ======
img{ width: 80px; height: 80px; position: absolute; left: 0px; top:-6px; }
====== CSS Added End ====== */
/*
- work h2{
font-size: 16pt; line-height: 24pt; letter-spacing: 0px; font-weight: 700; font-family: Montserrat, Helvetica, Arial, sans-serif; margin-bottom: 2px; }
- work h4{
font-size: 12pt; line-height: 17pt; letter-spacing: 0px; font-weight: normal; text-transform: inherit; }
- /
/*
* Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
- /
.print-only {
display: none !important; }
@media print {
* { background: transparent !important; color: black !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999999; page-break-inside: avoid; }
thead { display: table-header-group; /* h5bp.com/t */ }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; } }
.reveal-modal-bg {
position: fixed; height: 100%; width: 100%; background: black; background: rgba(0, 0, 0, 0.45); z-index: 99; display: none; top: 0; left: 0; }
dialog, .reveal-modal {
visibility: hidden; display: none; position: absolute; z-index: 100; width: 100vw; top: 0; left: 0; background-color: white; padding: 1.25rem; border: solid 1px #666666; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } @media only screen and (max-width: 40em) { dialog, .reveal-modal { min-height: 100vh; } } @media only screen and (min-width: 40.063em) { dialog, .reveal-modal { left: 50%; } } dialog .column, dialog .columns, .reveal-modal .column, .reveal-modal .columns { min-width: 0; } dialog > :first-child, .reveal-modal > :first-child { margin-top: 0; } dialog > :last-child, .reveal-modal > :last-child { margin-bottom: 0; } @media only screen and (min-width: 40.063em) { dialog, .reveal-modal { margin-left: -40%; width: 80%; } } @media only screen and (min-width: 40.063em) { dialog, .reveal-modal { top: 6.25rem; } } dialog .close-reveal-modal, .reveal-modal .close-reveal-modal { font-size: 2.5rem; line-height: 1; position: absolute; top: 0.5rem; right: 0.6875rem; color: #aaaaaa; font-weight: bold; cursor: pointer; }
dialog[open] {
display: block; visibility: visible; }
@media only screen and (min-width: 40.063em) {
dialog, .reveal-modal { padding: 1.875rem; } dialog.radius, .reveal-modal.radius { border-radius: 3px; } dialog.round, .reveal-modal.round { border-radius: 1000px; } dialog.collapse, .reveal-modal.collapse { padding: 0; } dialog.full, .reveal-modal.full { top: 0; left: 0; height: 100vh; min-height: 100vh; margin-left: 0 !important; } } @media only screen and (min-width: 40.063em) and (min-width: 40.063em) { dialog.tiny, .reveal-modal.tiny { margin-left: -15%; width: 30%; } } @media only screen and (min-width: 40.063em) and (min-width: 40.063em) { dialog.small, .reveal-modal.small { margin-left: -20%; width: 40%; } } @media only screen and (min-width: 40.063em) and (min-width: 40.063em) { dialog.medium, .reveal-modal.medium { margin-left: -30%; width: 60%; } } @media only screen and (min-width: 40.063em) and (min-width: 40.063em) { dialog.large, .reveal-modal.large { margin-left: -35%; width: 70%; } } @media only screen and (min-width: 40.063em) and (min-width: 40.063em) { dialog.xlarge, .reveal-modal.xlarge { margin-left: -47.5%; width: 95%; } }
@media only screen and (min-width: 40.063em) and (min-width: 40.063em) { dialog.full, .reveal-modal.full { margin-left: -50vw; width: 100vw; } }
@media print {
dialog, .reveal-modal { background: white !important; } }
button, .button {
border-style: solid; border-width: 0px; cursor: pointer; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; line-height: normal; margin: 0 0 1.25rem; position: relative; text-decoration: none; text-align: center; -webkit-appearance: none; -webkit-border-radius: 0; display: inline-block; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1.0625rem; padding-left: 2rem; font-size: 1rem; background-color: #2ba6cb; border-color: #2285a2; color: white; transition: background-color 300ms ease-out; } button:hover, button:focus, .button:hover, .button:focus { background-color: #2285a2; } button:hover, button:focus, .button:hover, .button:focus { color: white; } button.secondary, .button.secondary { background-color: #e9e9e9; border-color: #2285a2; color: #333333; } button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus { background-color: #2285a2; } button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus { color: #333333; } button.success, .button.success { background-color: #5da423; border-color: #2285a2; color: white; } button.success:hover, button.success:focus, .button.success:hover, .button.success:focus { background-color: #2285a2; } button.success:hover, button.success:focus, .button.success:hover, .button.success:focus { color: white; } button.alert, .button.alert { background-color: #c60f13; border-color: #2285a2; color: white; } button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus { background-color: #2285a2; } button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus { color: white; } button.large, .button.large { padding-top: 1.125rem; padding-right: 2.25rem; padding-bottom: 1.1875rem; padding-left: 2.25rem; font-size: 1.25rem; } button.small, .button.small { padding-top: 0.875rem; padding-right: 1.75rem; padding-bottom: 0.9375rem; padding-left: 1.75rem; font-size: 0.8125rem; } button.tiny, .button.tiny { padding-top: 0.625rem; padding-right: 1.25rem; padding-bottom: 0.6875rem; padding-left: 1.25rem; font-size: 0.6875rem; } button.expand, .button.expand { padding-right: 0; padding-left: 0; width: 100%; } button.left-align, .button.left-align { text-align: left; text-indent: 0.75rem; } button.right-align, .button.right-align { text-align: right; padding-right: 0.75rem; } button.radius, .button.radius { border-radius: 3px; } button.round, .button.round { border-radius: 1000px; } button.disabled, button[disabled], .button.disabled, .button[disabled] { background-color: #2ba6cb; border-color: #2285a2; color: white; cursor: default; opacity: 0.7; box-shadow: none; } button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus { background-color: #2285a2; } button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus { color: white; } button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus { background-color: #2ba6cb; } button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary { background-color: #e9e9e9; border-color: #2285a2; color: #333333; cursor: default; opacity: 0.7; box-shadow: none; } button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #2285a2; } button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { color: #333333; } button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #e9e9e9; } button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success { background-color: #5da423; border-color: #2285a2; color: white; cursor: default; opacity: 0.7; box-shadow: none; } button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { background-color: #2285a2; } button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { color: white; } button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { background-color: #5da423; } button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert { background-color: #c60f13; border-color: #2285a2; color: white; cursor: default; opacity: 0.7; box-shadow: none; } button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { background-color: #2285a2; } button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { color: white; } button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { background-color: #c60f13; }
button::-moz-focus-inner {
border: 0; padding: 0; }
@media only screen and (min-width: 40.063em) {
button, .button { display: inline-block; } }
/* ====== Remove MediaWiki Look ====== */
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;}
- top-section {
border: none; height: 0px;}
- content {
border: none;}
/* Redesigning the topmenu */ /***************************/ body {
margin: 10px 0 0 0; padding: 0;}
- top-section {
width: 965px; height: 0; margin: 0 auto; padding: 0; border: none; z-index: 1000;}
- menubar {
color: #000000; font-family: "Montserrat", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; line-height: 1; top: 9px; z-index: 2000;}
.left-menu:hover {
background-color: transparent;}
- menubar li a {
background-color: transparent;}
- menubar:hover {
color: white;}
- menubar li a {
color: #cccccc;}
- menubar:hover li a {
color: #cccccc;}
.left-menu .noprint ul li .new a { text-decoration: none; } a:hover, a:visited, a:link, a:active {
text-decoration: none;
} a:visited { color: black; }