Team:Calgary/StyleSheets/styling.css

1. sideMenu, #top_title {

display: none; }

html,div, #BottomFooter, body, img, a,ul, li, h1, h2{ margin: 0; padding: 0; text-decoration: none; }

@font-face {

   font-family: Yikes;
   src: url(https://static.igem.org/mediawiki/2017/9/91/Calgary2017_YikesMedium.ttf);

}

html{ font-size: 14px; }

body{ width: 75%; margin:9rem auto; padding: 2rem; color: #444; font-family: helvetica, arial, sans-serif;

 	background-color: #faece5;
 

background-image: url("http://static.simpledesktops.com/uploads/desktops/2015/06/15/ramadan-2015-wallpaper1.png"); `

 /* everything shrinks to an extent */
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-attachment: fixed;
 	background-size: cover;

background-position: 100px 9rem;

 /* make sure the background doesnt move when you scroll */
 background-attachment: fixed;

}

.pointer {

 max-width: 40px;
 vertical-align: middle;
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);
 margin-right: 10px;
 margin-top: 5px;

}

a:link, a:visited{ font-family: Yikes; color:#faece5; font-weight: 900; } a:hover, a:active{ color: #fcaa77; }

/* Thirds */ div.thirds {

 padding-bottom: 50px;

}

div.one-third {

 width: 30%;
 float: left;
 margin-right: 5%;

}

div.one-third-last {

 margin: 0;

}

/*styling content*/

1. BodyContent{

background-color:rgba(251, 242, 238, 1); padding: 2rem; line-height: 2.2rem; box-shadow: 5px 5px 15px #DDDDDD; width: 75%; } div>p{ text-indent: 2.6rem; }

1. BottomFooter{

   background: #e65c00; 
   color: #fbfbfb;  
   text-align: center; 
   padding: 2em 0;
   box-shadow: 5px 5px 15px #DDDDDD;

}

h1{ font-family: Yikes; color: #538cc6; font-size:18px; }

img {

 max-width: 100%;
 height: auto;
 margin: 0 0 10px 0;

}

/*styling the header part*/ .toggle-menu{ display: none; }

.toggle-drop{ display: none; }

1. TopBar{

padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 40rem; padding-left: 40rem;

   position: fixed; /* Set the navbar to fixed position */
   top: 0; /* Position the navbar at the top of the page */
   width: 75%; /* Full width */
   align-items: middle;
   text-align: center;

margin: 0; margin-left: -40rem; background-color: #e65c00;

   list-style: none;

}

1. TopBar li {

   list-style: none;

}

.logo img{ max-width: 100px; display: inline-block; vertical-align: middle; }

.nav-list{ display: flex; flex-flow: row; justify-content: space-between; align-items: center; white-space: nowrap; } .nav-list > li { position: relative; list-style-type: none; }

.nav-list>li:not(.has-logo)>a{ text-transform: uppercase; display: block; padding:1rem; }

.nav-list ul{ position: absolute; z-index: 1010; background-color: #e65c00; line-height: 2rem; left: -9999px; box-shadow: 5px 5px 15px #DDDDDD; }

.nav-list li:hover{

   background-color:#000;

}

.nav-list ul a{ font-weight: normal; display: block; padding: .5rem 1rem; }

.nav-list > li:hover a + ul{ left: 0; top:100%; }

.mobile-display{ display: none; }

1. drop{

display:none; }

@media only screen and (max-width: 58.75rem){ html{ font-size: 13px; } body{ margin:8rem auto; width: 75%; } .logo{ display:none; } .has-logo{ display: none; } .mobile-display{ display: block; margin:2rem auto; text-align: center } .nav-bar{ padding-top: 30px; padding-bottom: 30px; } }

@media only screen and (max-width: 44.68rem){ .nav-bar{ width: 100%; position: static; } .logo{ display:block; } .toggle-menu{ display: block; max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; margin: 1rem auto; background-color: #e65c00; text-align: center; color: #fff !important; padding: 1rem; border-radius: .25em; }

.toggle-menu:hover{

   background-color: #fcaa77;
 	}	

 	.toggle-drop{

display: block; }

 	.nav-list ul{

background-color: #f76e13; }

.nav-list{ display: block; width: 100%; position: static; line-height: 1rem; z-index: 1012; left: 0; top:0; text-align: left; max-height: 0; overflow: hidden; }

.active{ max-height: 100%; overflow: auto; }

.logo img{ max-width: 200px !important; } .nav-list ul{ position: static; text-indent: 2rem; z-index: 1013; box-shadow: none; } }

.images {

   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px
   width: 2rem;

}