Difference between revisions of "Team:Central Calgary/Template:CentraliGEM/CSS"

 
(11 intermediate revisions by the same user not shown)
Line 29: Line 29:
 
font-family: "RobotoLight";
 
font-family: "RobotoLight";
 
font-size: 24px;
 
font-size: 24px;
 +
        color: #FFFFFF;
 
}
 
}
 
/*Remove all default margins of the browser*/
 
/*Remove all default margins of the browser*/
Line 117: Line 118:
 
#name {
 
#name {
 
position: fixed;
 
position: fixed;
−
    margin-left: 80px;
+
        margin-left: 80px;
−
margin-top: 32px;
+
        padding-top: 18px;
−
         margin-bottom: 16px;
+
         margin-bottom: 18px;
 
text-align:justify;
 
text-align:justify;
  
Line 255: Line 256:
 
display: block;
 
display: block;
 
width: 800px;
 
width: 800px;
−
margin-left: 500px;
+
margin-left: 400px;
 
text-align: justify;
 
text-align: justify;
 
}
 
}
Line 261: Line 262:
 
#homeoneline {
 
#homeoneline {
 
color: #FFFFFF;
 
color: #FFFFFF;
 +
width:800px;
 
margin-top: 4px;
 
margin-top: 4px;
 
margin-bottom: 8px;
 
margin-bottom: 8px;
Line 275: Line 277:
 
display: block;
 
display: block;
 
width: 800px;
 
width: 800px;
−
margin-left: 150px;
+
margin-left: 100px;
 
text-align: justify;
 
text-align: justify;
 
}
 
}
Line 281: Line 283:
 
#hometwoline {
 
#hometwoline {
 
color: #FFFFFF;
 
color: #FFFFFF;
 +
width:800px;
 
margin-top: 4px;
 
margin-top: 4px;
 
margin-bottom: 8px;
 
margin-bottom: 8px;
Line 289: Line 292:
 
position: absolute;
 
position: absolute;
 
margin-right: 80;
 
margin-right: 80;
−
margin-left: 67%;
+
margin-left: 69%;
 
}
 
}
  
Line 340: Line 343:
 
display: block;
 
display: block;
 
width: 800px;
 
width: 800px;
−
margin-left: 500px;
+
margin-left: 400px;
 
text-align: justify;
 
text-align: justify;
 
}
 
}
Line 346: Line 349:
 
#homethreeline {
 
#homethreeline {
 
color: #FFFFFF;
 
color: #FFFFFF;
 +
width:800px;
 
margin-top: 4px;
 
margin-top: 4px;
 
margin-bottom: 8px;
 
margin-bottom: 8px;

Latest revision as of 22:48, 27 August 2015

@charset "utf-8";


/*Make sure to update on launch*/

@font-face{ font-family: RobotoThin; src: url('https://static.igem.org/mediawiki/2015/3/3a/RobotoThin.ttf'); font-stretch: thin; }


@font-face{ font-family: RobotoRegular; src: url('https://static.igem.org/mediawiki/2015/1/1e/Roboto-Regular.ttf'); }

@font-face{ font-family: RobotoLight; src: url('https://static.igem.org/mediawiki/2015/f/f6/Roboto-Light.ttf'); }

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

}


h1 { font-family: "RobotoLight"; font-size: 24px; 

       color: #FFFFFF;

} /*Remove all default margins of the browser*/

  • {

margin: 0; padding: 0; }


html, body, content {


margin:0;

padding:0;


}


body { 

   background-color: #F2FAFF;
   background-size: 100%
   min-width: 1395px;

}

  1. top_menu_under{

display:none; }

/*Header that sticks to the top when scrolled*/ .headerSticky-scroll { 

       position: fixed;
       left: 0;
       top: 0;
       width: 100%;

height: 80px; 

       width: 100%;
       background: #333333 repeat;

z-index: 2; }

  1. center {
 width: 70%;
 background: #eee;
 margin: 10px auto;
 position: relative;
 text-align: center;

}

.parentMenu { position: fixed; width: 710px; top: 12px; margin-left: 25%; margin-right: 30%; font-weight: 300; 

   font-family: "RobotoLight";
   font-weight: 100;
   vertical-align: middle;

}


/* Parent container that holds the header text */

  1. menuText {

position: absolute; font-size: 30; top:18px; left: 4%; font-family: "RobotoLight"; color: #ffffff; margin-bottom: 20;

}

  1. homeText {

position: relative; font-family: "RobotoLight"; font-size: 36px;

vertical-align: central; display: table-cell; vertical-align: middle; }

  1. name {

position: fixed; 

       margin-left: 80px;
       padding-top: 18px;
       margin-bottom: 18px;

text-align:justify;

}


.nav { 

	  background-color: #1256DC

/*border: 1px solid #FFFFFF;*/ border-radius: 5px; box-shadow: 0 0px 8px 10px #888888); color: #FFFFFF; display: inline-block; margin: 2px 30px 8px 30px; overflow: hidden; width:100%; align: center; 

         z-index: 1;


}

.nav ul { color: #FFFFFF 

   margin: 0;
   padding: 0;

}

.nav ul li { 

     display: inline-block;
     list-style-type: none;
       -webkit-transition: all 0.2s;
       -moz-transition: all 0.2s;
       -ms-transition: all 0.2s;
       -o-transition: all 0.2s;
       transition: all 0.2s;

}

.nav > ul > li > a > .caret { 

       border-top: 4px solid #FFFFFF;
       border-right: 4px solid transparent;
       border-left: 4px solid transparent;
       content: "";
       display: inline-block;
       height: 0;
       width: 0;
       vertical-align: middle;
 
       -webkit-transition: color 0.1s linear;
         -moz-transition: color 0.1s linear;
       -o-transition: color 0.1s linear;
         transition: color 0.1s linear; 
     }

.nav > ul > li > a { 

       color: #FFFFFF;
       display: block;
       line-height: 56px;
       padding: 0 24px;
       text-decoration: none;
     }

.nav > ul > li:hover { 

         background-color:

}

.nav > ul > li:hover > a { 

         color: #FFFFFF;

}

.nav > ul > li:hover > a > .caret { 

         border-top-color: #FF9B19;

}

.nav > ul > li > div { 

       background-color: #FF9B19;
       border-top: 0;
       border-radius: 0 0 4px 4px;
       box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
       display: none;
       margin: 0;
       opacity: 0;
       position: absolute;
       width: 165px;
       visibility: hidden;
 
       -webkit-transiton: opacity 0.2s;
       -moz-transition: opacity 0.2s;
       -ms-transition: opacity 0.2s;
       -o-transition: opacity 0.2s;
       -transition: opacity 0.2s;

}

.nav > ul > li:hover > div { 

         display: block;
         opacity: 1;
         visibility: visible;

}

.nav > ul > li > div ul > li { 

           display: block;

}

.nav > ul > li > div ul > li > a { 

             color: #fff;
             display: block;
             padding: 12px 24px;
             text-decoration: none;

}

.nav > ul > li > div ul > li:hover > a { 

             background-color: rgba( 255, 255, 255, 0.1);

}


  1. socialParent {

position: fixed; display: inline-block; margin-left: 10%; }


/*Row 1 of the social icons*/

/*BODY SHAIZA--*/

  1. bodyContent {

position: relative; z-index: 1; }

  1. homeonetext {

position: absolute; display: block; width: 800px; margin-left: 400px; text-align: justify; }

  1. homeoneline {

color: #FFFFFF; width:800px; margin-top: 4px; margin-bottom: 8px;

}

  1. homeoneimage {

position: absolute;

}

  1. hometwotext {

position: absolute; display: block; width: 800px; margin-left: 100px; text-align: justify; }

  1. hometwoline {

color: #FFFFFF; width:800px; margin-top: 4px; margin-bottom: 8px;

}

  1. hometwoimage {

position: absolute; margin-right: 80; margin-left: 69%; }

  1. homeOne {

position: relative; display: block; padding-top:90px; padding-left: 20px; padding-right: 20px; width: 100%; height: 300px; background: #7F7F79; color: #ffffff; font-family: "RobotoLight";

}


  1. homeTwo {

position: relative; display: block; padding-top:90px; padding-left: 20px; padding-right: 20px; width: 100%; height: 300px; background: #4C4C49; color: #ffffff; font-family: "RobotoLight";

}

  1. homeThree {

position: relative; display: block; padding-top:90px; padding-left: 20px; padding-right: 20px; width: 100%; height: 300px; background: #8A7B65; color: #ffffff; font-family: "RobotoLight";

}


  1. homethreetext {

position: absolute; display: block; width: 800px; margin-left: 400px; text-align: justify; }

  1. homethreeline {

color: #FFFFFF; width:800px; margin-top: 4px; margin-bottom: 8px;

}

  1. homethreeimage {

position: absolute;

}

  1. homeFour {

position: relative; display: block; padding-top:90px; padding-left: 20px; padding-right: 20px; width: 100%; height: 300px; background: #687F7D; color: #ffffff; font-family: "RobotoLight";

}

/*footer--------------------------------------------------------*/

  1. footer {

position: absolute; display: block; width: 100%; background: #333333; height: 450px; font-weight: bold;

}

  1. map {

position: absolute; margin-top: 118px; margin-left: 30px; box-shadow: 8px 8px 50px #000000;

}

  1. footerWords {

position: relative; width: 805px; margin-left: 35%; margin-top: 150px; font-family: "RobotoThin"; text-align: justify; color: white; font-size: 20px; }

  1. footerLine {

width: 805px; color: #FFFFFF; margin-top: 4px; margin-bottom: 8px; }

  1. footerTop {

position: absolute; background: #333333; box-shadow: 0px 5px 10px #000000; width: 100%; margin-bottom: 1000px; z-index: 2;


}

  1. footerText {

font-family: "RobotoLight"; margin-top: 1%; text-align: center; color: white; }