Difference between revisions of "Team:Oxford/Assets/Style.css"

Line 1: Line 1:
−
{{:Team:Oxford/Templates/Nav}}
+
/* wiki width fixing */
−
<html>
+
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 +
    display:none;
 +
}
 +
#top-section {
 +
    border: none;
 +
    height: 0px;
 +
}
  
−
        <div class="title container-fluid">
+
#content {
−
            <div class="row">
+
    width:100%;
−
                <div class="col-md-12">
+
}
−
                    <img src="https://static.igem.org/mediawiki/2015/2/2a/Ox_solution_jumbo.png"/>
+
−
                </div>
+
  
−
            </div>
+
 
−
        </div>
+
.row {
−
        <div class="container-fluid content-container">
+
    background-color: #fff;
−
            <div class="row">
+
}
−
                <div class="col-md-12">
+
.navbar {
−
                    <div id="project-byline">
+
    margin-top: 16px;
−
                        <h3>A targeted approach to antimicrobial resistance</h3>
+
    position: fixed;
−
                    </div>
+
    font-size: 13px;
−
                </div>
+
    background-color: #fff;
−
            </div>
+
    margin-bottom: 0;
−
            <div class="row" id="get">
+
}
−
                <div class="col-md-4">
+
 
−
                    <h3>Guidance</h3>
+
.navbar-right li {
−
                    <p>
+
    font-family: "Avenir",sans-serif;
−
                        Strengthening research and working towards a coordinated response
+
    color: #cccccc;
−
                    </p>
+
    font-weight: bolder;
−
                </div>
+
    padding-right: 0;
−
                <div class="col-md-4">
+
}
−
                    <h3>Education</h3>
+
 
−
                    <p>
+
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover {
−
                        Improving awareness and understanding of antimicrobial resistance
+
    background-color: #fff;
−
                    </p>
+
    color:#777;
−
                </div>
+
    border-bottom: 1px solid #fa2963;
−
                <div class="col-md-4">
+
}
−
                    <h3>Tools</h3>
+
 
−
                    <p>
+
.navbar-default .navbar-nav a{
−
                        Changing the way we think about treatment
+
    padding-left: 0;
−
                    </p>
+
    padding-right: 10px;
−
                </div>
+
    margin-left: 15px;
−
            </div>
+
    padding-bottom: 3px;
−
            <div class="row" id="davis-quote">
+
    border-bottom: 1px solid #cccccc;
−
                <div class="col-md-8 col-md-offset-1">
+
}
−
                    <h3><i class="fa fa-quote-left"></i> Antimicrobial resistance poses a catastrophic threat. If we don't act now, any one of us could go into hospital in 20 years for minor surgery and die because of an ordinary infection that can't be treated by antibiotics. <i class="fa fa-quote-right"></i></h3>
+
 
−
                </div>
+
.navbar-default .navbar-nav > .active {
−
            </div>
+
    background-color: #fff;
−
            <div class="row">
+
 
−
                <div class="col-md-6 col-md-offset-6">
+
}
−
                    <div class="quote-name-box">
+
 
−
                        <h3 id="sally">Professor Dame Sally Davies</h3><p>Chief Medical Officer, March 2013</p>
+
#main-container {
−
                    </div>
+
    top:0;
−
                    </p>
+
    left:0;
−
                </div>
+
    right:0;
−
            </div>
+
    margin:50px 0 0 0;
−
        </div>
+
    padding:0;
−
        <!-- main-container stays open, will be closed in the footer-->
+
    background-color:#fff;
−
</html>
+
    overflow:scroll;
−
{{:Team:Oxford/Templates/Footer}}
+
    position:absolute;
 +
}
 +
 
 +
 
 +
.title> .row {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/8/89/Ox_bluedots.jpg);
 +
    background-size: 3px 21px;
 +
    background-repeat: repeat;
 +
}
 +
 
 +
.title img {
 +
    width:80%;
 +
    margin-left: 10%;
 +
    padding-top: 5%;
 +
    padding-bottom: 10%;
 +
}
 +
 
 +
#project-byline {
 +
    margin-top: -45px;
 +
    background-color: #fff;
 +
    padding: 15px 30px;
 +
    border: 15px solid #fa2963;
 +
    border-top: none;
 +
    border-bottom: none;
 +
    text-align: center;
 +
}
 +
 
 +
h3 {
 +
    color: #2d2c35;
 +
    font-size: 60px;
 +
    font-family: "Merriweather",serif;
 +
    font-weight: bold;
 +
    padding-bottom: 5px;
 +
    padding-top: 5px;
 +
    margin-top: 0;
 +
}
 +
 
 +
#project-byline h3 {
 +
    border-bottom: 1px dotted #cccccc;
 +
}
 +
 
 +
#get {
 +
    border: 15px solid #fa2963;
 +
    border-top: none;
 +
    border-bottom: none;
 +
    margin: 0;
 +
 
 +
}
 +
 
 +
#get h3 {
 +
    font-size: 32px
 +
}
 +
 
 +
#davis-quote {
 +
    background-color: #fa2963;
 +
    color: #fff;
 +
    margin:0;
 +
}
 +
 
 +
#davis-quote h3 {
 +
    color: #fff;
 +
    font-size: 24px;
 +
    padding-left: 5%;
 +
    padding-right: 10%;
 +
    padding-top: 25px;
 +
    padding-bottom: 50px;
 +
    font-weight: normal;
 +
}
 +
 
 +
.quote-name-box {
 +
    border: 15px solid  #fa2963;
 +
    background-color: #fff;
 +
    margin-top: -60px;
 +
    color: #2d2c35;
 +
    margin-right: 15px;
 +
    margin-left: 15px;
 +
    text-align: center;
 +
}
 +
 
 +
.quote-name-box h3 {
 +
    font-size: 24px;
 +
    margin-bottom: 0px;
 +
}
 +
 
 +
#sally {
 +
    margin: 0 auto;
 +
}
 +
.sponsors {
 +
    background-color: #fff;
 +
}
 +
 
 +
.sponsors img {
 +
    max-width: 100px;
 +
    padding-bottom: 15px;
 +
    padding-top: 15px;
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
 
 +
#footer-links {
 +
    padding-left:0;
 +
    padding-right:0;
 +
    margin-left: -15px;
 +
    margin-right:-15px;
 +
    background-color: #fff;
 +
    font-family: "Avenir", sans-serif;
 +
    margin-bottom: 10px;
 +
    border-top: 1px dotted #cccccc;
 +
}
 +
 
 +
#footer-links a {
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    color: #000;
 +
}
 +
 
 +
#footer-links h2 {
 +
    margin-top:0;
 +
    border-bottom: 0;
 +
    font-weight: bold;
 +
}
 +
 
 +
#footer-links ul {
 +
    list-style-type: none;
 +
    list-style-image: none;
 +
    margin-left: 0;
 +
}
 +
 
 +
#footer-links li {
 +
    display: inline;
 +
    color:#000;
 +
    width:25%
 +
}
 +
 
 +
#footer-links a:hover{
 +
    text-decoration: none;
 +
    color: #000;
 +
    background-image: url(https://static.igem.org/mediawiki/2015/6/6a/Ox_pink_diag.png);
 +
    background-size: 4px;
 +
    background-repeat: repeat;
 +
}
 +
 
 +
#footer-links .footer-section-line {
 +
    height: 15px;
 +
    background-image: url(https://static.igem.org/mediawiki/2015/8/89/Ox_bluedots.jpg);
 +
    background-size: 3px 21px;
 +
    background-repeat: repeat;
 +
    margin-top: 5px;
 +
 
 +
}
 +
 
 +
#made-with-love {
 +
    margin-left: 0px;
 +
    margin-right: 0px;
 +
    padding-right: 30px;
 +
    background-color: #fa2963;
 +
    color: #fff;
 +
    text-align: center;
 +
    font-size: 10px;
 +
    vertical-align: middle;
 +
}
 +
 
 +
#made-with-love a , #made-with-love p {
 +
    color:#fff;
 +
    padding: auto 0;
 +
}

Revision as of 13:36, 23 July 2015

/* wiki width fixing */

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;

}

  1. top-section {
   border: none;
   height: 0px;

}

  1. content {
   width:100%;

}


.row { 

   background-color: #fff;

} .navbar { 

   margin-top: 16px;
   position: fixed;
   font-size: 13px;
   background-color: #fff;
   margin-bottom: 0;

}

.navbar-right li { 

   font-family: "Avenir",sans-serif;
   color: #cccccc;
   font-weight: bolder;
   padding-right: 0;

}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover { 

   background-color: #fff;
   color:#777;
   border-bottom: 1px solid #fa2963;

}

.navbar-default .navbar-nav a{ 

   padding-left: 0;
   padding-right: 10px;
   margin-left: 15px;
   padding-bottom: 3px;
   border-bottom: 1px solid #cccccc;

}

.navbar-default .navbar-nav > .active { 

   background-color: #fff;

}

  1. main-container {
   top:0;
   left:0;
   right:0;
   margin:50px 0 0 0;
   padding:0;
   background-color:#fff;
   overflow:scroll;
   position:absolute;

}


.title> .row { 

   background-image: url(Ox_bluedots.jpg);
   background-size: 3px 21px;
   background-repeat: repeat;

}

.title img { 

   width:80%;
   margin-left: 10%;
   padding-top: 5%;
   padding-bottom: 10%;

}

  1. project-byline {
   margin-top: -45px;
   background-color: #fff;
   padding: 15px 30px;
   border: 15px solid #fa2963;
   border-top: none;
   border-bottom: none;
   text-align: center;

}

h3 { 

   color: #2d2c35;
   font-size: 60px;
   font-family: "Merriweather",serif;
   font-weight: bold;
   padding-bottom: 5px;
   padding-top: 5px;
   margin-top: 0;

}

  1. project-byline h3 {
   border-bottom: 1px dotted #cccccc;

}

  1. get {
   border: 15px solid #fa2963;
   border-top: none;
   border-bottom: none;
   margin: 0;

}

  1. get h3 {
   font-size: 32px

}

  1. davis-quote {
   background-color: #fa2963;
   color: #fff;
   margin:0;

}

  1. davis-quote h3 {
   color: #fff;
   font-size: 24px;
   padding-left: 5%;
   padding-right: 10%;
   padding-top: 25px;
   padding-bottom: 50px;
   font-weight: normal;

}

.quote-name-box { 

   border: 15px solid  #fa2963;
   background-color: #fff;
   margin-top: -60px;
   color: #2d2c35;
   margin-right: 15px;
   margin-left: 15px;
   text-align: center;

}

.quote-name-box h3 { 

   font-size: 24px;
   margin-bottom: 0px;

}

  1. sally {
   margin: 0 auto;

} .sponsors { 

   background-color: #fff;

}

.sponsors img { 

   max-width: 100px;
   padding-bottom: 15px;
   padding-top: 15px;
   display: block;
   margin-left: auto;
   margin-right: auto;

}

  1. footer-links {
   padding-left:0;
   padding-right:0;
   margin-left: -15px;
   margin-right:-15px;
   background-color: #fff;
   font-family: "Avenir", sans-serif;
   margin-bottom: 10px;
   border-top: 1px dotted #cccccc;

}

  1. footer-links a {
   margin-left: auto;
   margin-right: auto;
   color: #000;

}

  1. footer-links h2 {
   margin-top:0;
   border-bottom: 0;
   font-weight: bold;

}

  1. footer-links ul {
   list-style-type: none;
   list-style-image: none;
   margin-left: 0;

}

  1. footer-links li {
   display: inline;
   color:#000;
   width:25%

}

  1. footer-links a:hover{
   text-decoration: none;
   color: #000;
   background-image: url(Ox_pink_diag.png);
   background-size: 4px;
   background-repeat: repeat;

}

  1. footer-links .footer-section-line {
   height: 15px;
   background-image: url(Ox_bluedots.jpg);
   background-size: 3px 21px;
   background-repeat: repeat;
   margin-top: 5px;

}

  1. made-with-love {
   margin-left: 0px;
   margin-right: 0px;
   padding-right: 30px;
   background-color: #fa2963;
   color: #fff;
   text-align: center;
   font-size: 10px;
   vertical-align: middle;

}

  1. made-with-love a , #made-with-love p {
   color:#fff;
   padding: auto 0;

}