Team:IvyTech SouthBend IN/css/stylesheet/standard

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
@charset "UTF-8";
 +
 +
body,
 +
#globalWrapper {
 +
  font-size: 18px;
 +
  font-family: "Lato", Helvetica, sans-serif;
 +
  overflow: visible;
 +
  min-height: 100%
 +
}
 +
 +
p{
 +
  text-align: justify;
 +
  font-size: 18px;
 +
  line-height: 20px;
 +
}
 +
 +
.clear {
 +
  clear: both;
 +
}
 +
 +
a,
 +
a:link,
 +
a:visited {
 +
  color: #373737;
 +
  text-decoration: none;
 +
}
 +
 +
a:hover,
 +
a:focus {
 +
  color: #4c4c4c;
 +
}
 +
 +
/* ---------------- WikiMedia Elements / Page Structure ---------------- */
/* ---------------- WikiMedia Elements / Page Structure ---------------- */
Line 100: Line 133:
     margin-right: 0px;
     margin-right: 0px;
 +
}
 +
 +
 +
/* CHANGING WHITE BACKGROUND */
 +
 +
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: none;
 +
background-color: #777777;
 +
margin: 0px auto;
 +
padding: 0px;
 +
}
 +
 +
body {
 +
background-color: #777777;
 +
width: 100%;
 +
height: auto;
 +
}
 +
 +
html, .wrapper { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
min-height: 100%;
 +
height: 100%;
 +
background-color: #777777;
 +
position: relative;
 +
}
 +
 +
 +
/* HIDING FOOTER BOX */
 +
 +
#footer-box{display:none;}
 +
#catlinks{display:none;}
 +
 +
 +
/* -------------------------- NavBar -------------------------- */
 +
 +
#igem-logo {
 +
    position: fixed;
 +
display: block;
 +
bottom: 7px;
 +
left: 100px;
 +
z-index: 5000;
 +
margin: 0px auto;
 +
clear: both;
 +
overflow: visibile;
 +
}
 +
#ui-igem-logo {
 +
    position: fixed;
 +
display: block;
 +
bottom: 7px;
 +
left: 160px;
 +
z-index: 5001;
 +
margin: 0px auto;
 +
clear: both;
 +
overflow: visibile;
 +
}
 +
 +
/* -------------------------- Heading -------------------------- */
 +
 +
h1,h2,h3,h4 {
 +
    font-weight: normal;
 +
    letter-spacing: 0 px;
 +
    border-bottom:none;
 +
}
 +
h2 {
 +
    color: #000000;
 +
font-family: "Walter Turncoat", Arial, Helvetica, sans serif;
 +
    font-size: 30px;
 +
    line-height: 25px;
 +
    border-bottom: 1px solid;
 +
    font-weight: bold;
 +
    margin-top: 10px;
 +
}
 +
h3,h4 {
 +
    font-size: 25px;
 +
    line-height: 21px;
 +
    font-weight: bold;
 +
}
 +
h4 {
 +
    font-size: 20px;
 +
    line-height: 19px;
 +
    font-weight: bold;
 +
}
 +
 +
/* --------------------- Main Content ----------------------- */
 +
 +
#main-content {
 +
background-color: white;
 +
width: 1140px;
 +
position: absolute;
 +
left: 100px;
 +
height: auto;
 +
margin: 0px auto;
 +
}
 +
#page {
 +
    width: 1100px;
 +
    margin: 0px auto;
 +
    text-align: justify;
 +
    margin-top: 20px;
 +
    font-size: 17px;
 +
}
 +
 +
/* --------------------- Images ----------------------- */
 +
 +
#header {
 +
position: absolute;
 +
width: 1100px;
 +
height: auto;
 +
top: 70px;
 +
left: 100px;
 +
display: block;
 +
}
 +
img.alignleft {
 +
    margin: 5px 20px 20px 0;
 +
    float: left;
 +
}
 +
img.aligntop {
 +
    margin: 5px 0 20px 0;
 +
}
 +
img.pic {
 +
    padding: 5px;
 +
    border: solid 1px #D4D4D4;
 +
}
 +
 +
 +
/* --------------------- Paragraphs ----------------------- */
 +
 +
#page p, #page .leftparagraph p, #page .rightparagraph p {
 +
    margin-bottom: 2px;
 +
    font-size:14px;
 +
}
 +
 +
/* --------------------- Lists ----------------------- */
 +
 +
#page ul, #page p ul, #page .leftparagraph p ul, #page .rightparagraph p ul {
 +
    margin:0;
 +
    padding:0;
 +
    font-size:17px;
 +
    list-style:none;
 +
}
 +
#page ul li, #page p ul li, #page .leftparagraph p ul li, #page .rightparagraph p ul li {
 +
    padding:0;
 +
    margin:0;
 +
    margin-top:6px;
 +
}
 +
#page ul li:before, #page p ul li:before, #page .leftparagraph p ul li:before, #page .rightparagraph p ul li:before {
 +
    content: " • ";
 +
    padding: 2px;
 +
    color: rgb(30,39,43);
 +
}
 +
 +
/* --------------------- Dividing Page ----------------------- */
 +
 +
.leftparagraph {
 +
    float:left;
 +
    margin:10px 0px;
 +
    margin-right:20px;
 +
    width:530px;
 +
}
 +
.rightparagraph {
 +
    float:left;
 +
    width:530px;
 +
    margin:10px 0px;
 +
    margin-left:20px;
 +
}
 +
.pagecnt {
 +
    float:left;
 +
    width:52%;
 +
    height:auto;
 +
}
 +
.pageimgs {
 +
    float:left;
 +
    width:45%;
 +
    margin-left:3%;
 +
    height:1000px;
 +
    height:auto;
 +
 +
}
 +
 +
/* --------------------- Top Page ----------------------- */
 +
 +
.projtile {
 +
    float: left;
 +
    width: 355px;
 +
    height: 200px;   
 +
    color: rgb(30,39,43);
 +
    background: rgb(252,250,229);
 +
    overflow: hidden;
 +
}
 +
.projtile h2 {
 +
    text-align:center;
 +
    width:90%;
 +
    font-size:25px;
 +
    margin-left:5%;
 +
    margin-bottom:5px;
 +
    height:1.05em;
 +
    font-weight:bold;
 +
    border-bottom: 1px solid;
 +
    font-family: 'Archivo Narrow', sans-serif;
 +
}
 +
.projtile p {
 +
    margin-left:5%;
 +
    width:90%;
 +
    font-size:17px;
 +
}
 +
.abstractile p {
 +
    width:95%;
 +
    margin-left:2.5%;
}
}

Revision as of 16:54, 8 October 2014

@charset "UTF-8";

body,

  1. globalWrapper { 
  font-size: 18px;
  font-family: "Lato", Helvetica, sans-serif;
  overflow: visible;
  min-height: 100%

}

p{ 

 text-align: justify;
 font-size: 18px;
 line-height: 20px;

}

.clear { 

 clear: both;

}

a, a:link, a:visited { 

 color: #373737;
 text-decoration: none;

}

a:hover, a:focus { 

 color: #4c4c4c;

}


/* ---------------- WikiMedia Elements / Page Structure ---------------- */

/* HIDE SEARCH CONTROLS AND PAGE TITLE */

  1. p-logo,
  2. search-controls,

.firstHeading { 

   display: none;

}

h1, h2, h3, h4, h5, h6 { color: #373737; }

/* REMOVE DEFAULT TOP HEADER */

  1. top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/

background-color: #f8f8f8; border: 0 none; height: 10px; top: 0; position: fixed; width: 100%; left: 50%; z-index: 1900; margin-left: -487px; -webkit-transition: all 500ms ease; 

  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
   transition: all 500ms ease;

}

  1. top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/

background-color: #f8f8f8; height: 10px; display: block; z-index: 10; position: fixed; width: 100%; top: 0; } /*

  1. top-section { 
   background: #f8f8f8;
   position: fixed;
   top: -10px;
   border: none;
   width: 100%;
   height: auto;
   z-index: -1000;
   margin: 0px auto;

}

  • /

/* EDIT AND USER MENU */

  1. menubar { 
   font-family: "Lato", Helvetica, sans-serif;
   top: 0 !important;
   font-size: 0.45em;

}

  1. menubar li,
  2. menubar li a:link { 
   text-transform: uppercase;

}

/* Highlight with background colour on hover */

  1. top-section:hover #menubar li a { 
   color: #777777;

}

  1. menubar li a:link,
  2. menubar li a:visited { 
   color: #777777;
   background-color: #f8f8f8;;

}

  1. menubar li a:hover,
  2. menubar li a:focus { 
   color: #777777;
   text-decoration: underline;

}


/* EDIT */

  1. menubar.left-menu { 
    position: fixed;

background: #f8f8f8; 

    margin-left: 0px;

}

  1. menubar.left-menu:hover { 
   background-color: #f8f8f8;;

}

/* USER */

  1. menubar.right-menu {

background: #f8f8f8; 

   position: fixed;
   margin-right: 0px;

}


/* CHANGING WHITE BACKGROUND */

  1. globalWrapper, #content { /*-- changes default wiki settings --*/

width: 100%; height: 100%; border: none; background-color: #777777; margin: 0px auto; padding: 0px; }

body { background-color: #777777; width: 100%; height: auto; }

html, .wrapper { /*-- changes default wiki settings --*/ width: 100%; min-height: 100%; height: 100%; background-color: #777777; position: relative; }


/* HIDING FOOTER BOX */

  1. footer-box{display:none;}
  2. catlinks{display:none;}


/* -------------------------- NavBar -------------------------- */

  1. igem-logo { 
   position: fixed;

display: block; bottom: 7px; left: 100px; z-index: 5000; margin: 0px auto; clear: both; overflow: visibile; }

  1. ui-igem-logo { 
   position: fixed;

display: block; bottom: 7px; left: 160px; z-index: 5001; margin: 0px auto; clear: both; overflow: visibile; }

/* -------------------------- Heading -------------------------- */

h1,h2,h3,h4 { 

   font-weight: normal;
   letter-spacing: 0 px;
   border-bottom:none;

} h2 { 

   color: #000000;

font-family: "Walter Turncoat", Arial, Helvetica, sans serif; 

   font-size: 30px;
   line-height: 25px;
   border-bottom: 1px solid;
   font-weight: bold;
   margin-top: 10px;

} h3,h4 { 

   font-size: 25px;
   line-height: 21px;
   font-weight: bold;

} h4 { 

   font-size: 20px;
   line-height: 19px;
   font-weight: bold;

}

/* --------------------- Main Content ----------------------- */

  1. main-content {

background-color: white; width: 1140px; position: absolute; left: 100px; height: auto; margin: 0px auto; }

  1. page { 
   width: 1100px;
   margin: 0px auto;
   text-align: justify;
   margin-top: 20px;
   font-size: 17px;

}

/* --------------------- Images ----------------------- */

  1. header {

position: absolute; width: 1100px; height: auto; top: 70px; left: 100px; display: block; } img.alignleft { 

   margin: 5px 20px 20px 0;
   float: left;

} img.aligntop { 

   margin: 5px 0 20px 0;

} img.pic { 

   padding: 5px;
   border: solid 1px #D4D4D4;

}


/* --------------------- Paragraphs ----------------------- */

  1. page p, #page .leftparagraph p, #page .rightparagraph p { 
   margin-bottom: 2px;
   font-size:14px;

}

/* --------------------- Lists ----------------------- */

  1. page ul, #page p ul, #page .leftparagraph p ul, #page .rightparagraph p ul { 
   margin:0;
   padding:0;
   font-size:17px;
   list-style:none;

}

  1. page ul li, #page p ul li, #page .leftparagraph p ul li, #page .rightparagraph p ul li { 
   padding:0;
   margin:0;
   margin-top:6px;

}

  1. page ul li:before, #page p ul li:before, #page .leftparagraph p ul li:before, #page .rightparagraph p ul li:before { 
   content: " • ";
   padding: 2px;
   color: rgb(30,39,43);

}

/* --------------------- Dividing Page ----------------------- */

.leftparagraph { 

   float:left;
   margin:10px 0px;
   margin-right:20px;
   width:530px;

} .rightparagraph { 

   float:left;
   width:530px;
   margin:10px 0px;
   margin-left:20px;

} .pagecnt { 

   float:left;
   width:52%;
   height:auto;

} .pageimgs { 

   float:left;
   width:45%;
   margin-left:3%;
   height:1000px;
   height:auto;

}

/* --------------------- Top Page ----------------------- */

.projtile { 

   float: left;
   width: 355px;
   height: 200px;     
   color: rgb(30,39,43);
   background: rgb(252,250,229); 
   overflow: hidden;

} .projtile h2 { 

   text-align:center;
   width:90%;
   font-size:25px;
   margin-left:5%;
   margin-bottom:5px;
   height:1.05em;
   font-weight:bold;
   border-bottom: 1px solid;
   font-family: 'Archivo Narrow', sans-serif;

} .projtile p { 

   margin-left:5%;
   width:90%;
   font-size:17px;

} .abstractile p { 

   width:95%;
   margin-left:2.5%;

}

/* CSS Document */ body{padding:0px; margin:0px; background:url(http://i.imgur.com/xQWilAi.gif) 0 0 repeat-x #fff; color:#5F7A77; font:13px/19px Arial, Helvetica, sans-serif;} div, p, ul, h2, h3, h4, h5, img{padding:0px; margin:0px;} ul{list-style-type:none}

/*----MAIN PANEL----*/

  1. mainPan{width:778px; position:relative; margin:0 auto;}

/*----TOP PANEL----*/

  1. topPan{width:778px; height:65px; background:url(http://i.imgur.com/4aF9HEy.jpg) 0 0 no-repeat #fff; color:#828282; position:relative; margin:0 auto;}
  2. topPan img.logo{width:136px; height:31px; position:absolute; top:12px; left:235px;}
  3. topPan p.caption{width:300px; background:#fff; color:#828282; position:absolute; top:43px; left:235px;}

/*----/TOP PANEL----*/

/*----HEADER PANEL----*/

  1. headerPan{width:686px; height:153px; background:url(http://i.imgur.com/MT7liXq.jpg) 0 0 no-repeat; position:relative; margin:0 auto; padding:11px 0 0 92px;}
  1. headerPan ul.leftmenu{width:87px;}
  2. headerPan ul.leftmenu li{width:87px; height:22px; border-bottom:1px dashed #AECCCA;}
  3. headerPan ul.leftmenu li a{width:72px; height:22px; display:block; background:url(http://i.imgur.com/6wX1Dsg.gif) 0 7px no-repeat #fff; color:#305E5C; line-height:22px; text-decoration:none; padding:0 0 0 15px;}
  4. headerPan ul.leftmenu li a:hover{background:url(http://i.imgur.com/MpGFdkC.gif) 0 7px no-repeat #fff; color:#305E5C; line-height:22px; text-decoration:none; padding:0 0 0 15px;}
  5. headerPan ul.leftmenu li.clients{width:87px; height:22px; border-bottom:none;}
  1. headerPan ul.botton{width:150px; height:45px; position:absolute; top:-50px; left:80px;}
  2. headerPan ul.botton li{float:left; height:45px;}
  3. headerPan ul.botton li.igem a{width:96px; height:45px; display:block; background:url(http://i.imgur.com/895tLRO.png) 0 0 no-repeat; text-indent:-200000px; margin:0 12px 0 0;}

/*----/HEADER PANEL----*/

/*----BODY PANEL----*/

  1. bodyPan{width:686px; background:url(http://i.imgur.com/IBGbG8h.gif) 0 0 no-repeat; position:relative; margin:0 auto; padding:22px 0 0 92px;}

/*----Body Left Panel----*/

  1. leftPan{width:114px; float:left;}
  1. leftPan h2{width:114px; height:34px; background:#fff; color:#5F7A77; font-size:18px; line-height:34px;}
  1. leftPan ul{width:114px;}
  2. leftPan ul li{width:114px; height:24px;}
  3. leftPan ul li a{width:102px; height:24px; display:block; background:url(http://i.imgur.com/SZtsOew.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:24px; padding:0 0 0 12px;}
  4. leftPan ul li a:hover{background:url(http://i.imgur.com/tIXhvKO.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none;}
  5. leftPan ul li span{text-decoration:underline;}

/*----/Body Left Panel----*/ /*----Body Right Panel----*/

  1. rightPan{width:511px; float:left; border-left:1px solid #C8E8E2; margin:28px 0 0; padding:0 30px;}
  2. rightPan p{padding:0 0 10px 0;}
  3. rightPan p.more{width:502px; height:25px; float:left; background:url(http://i.imgur.com/8RdSX9T.gif) 0 10px repeat-x; padding:0 0 20px 0;}
  4. rightPan p.more a{width:92px; height:21px; display:block; background:url(http://i.imgur.com/F2sNfoa.jpg) 0 0 no-repeat #fff; color:#958201; line-height:21px; text-transform:uppercase; text-decoration:none; margin:0 0 0 328px; padding:4px 0 0 50px;}
  5. rightPan p.more a:hover{background:url(http://i.imgur.com/F2sNfoa.jpg) 0 0 no-repeat #fff; color:#645804; text-decoration:none;}
  1. rightPan h2{width:96px; height:77px; float:left; display:block; background:url(http://i.imgur.com/LzstqMp.jpg) 8px 38px no-repeat #B1DED5; color:#fff; font-size:16px; font-weight:bold; line-height:18px; text-transform:uppercase; padding:46px 0 0 75px; margin:0 0 5px 0;}
  1. rightPan ul.parts{width:137px; height:114px; float:left; border:1px solid #B1DED5; background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
  1. rightPan ul.parts li.captionone{background:#fff; color:#AC9601; font-size:12px; font-weight:bold; text-decoration:underline;}
  1. rightPan ul.parts li{width:137px; height:20px;}
  2. rightPan ul.parts li a{width:125px; height:20px; display:block; background:url(http://i.imgur.com/SZtsOew.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:20px; padding:0 0 0 12px;}
  3. rightPan ul.parts li a:hover{background:url(http://i.imgur.com/tIXhvKO.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none;}
  1. rightPan ul.partstwo{width:137px; height:114px; float:left; border-bottom:1px solid #B1DED5; border-top:1px solid #B1DED5; border-right:1px solid #B1DED5;background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
  1. rightPan ul.partstwo li.captiontwo{background:#fff; color:#AC9601; font-size:12px; font-weight:bold; text-decoration:underline;}
  1. rightPan ul.partstwo li{width:137px; height:20px;}
  2. rightPan ul.partstwo li a{width:125px; height:20px; display:block; background:url(http://i.imgur.com/SZtsOew.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:20px; padding:0 0 0 12px;}
  3. rightPan ul.partstwo li a:hover{background:url(http://i.imgur.com/tIXhvKO.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none;}
  1. rightPan h4{width:96px; height:77px; float:left; display:block; background:url(images/ivy_icon4.jpg) 8px 38px no-repeat #DFD79C; color:#fff; font-size:16px; font-weight:bold; line-height:18px; text-transform:uppercase; padding:46px 0 0 75px; margin:0 0 5px 0;}
  1. rightPan ul.team{width:305px; height:114px; float:left; border:1px solid #B1DED5; background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
  1. rightPan ul.team li.captionthree{background:#fff; color:#AC9601; font-size:12px; font-weight:bold; text-decoration:none;}
  1. rightPan ul.team li{width:305px; height:20px;}
  2. rightPan ul.team li a{width:293px; height:20px; display:block; background:url(http://i.imgur.com/SZtsOew.gif) 0 7px no-repeat #fff; color:#959595; text-decoration:underline; line-height:20px; padding:0 0 0 12px;}
  3. rightPan ul.team li a:hover{background:url(http://i.imgur.com/tIXhvKO.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:underline;}

/*----/Body Right Panel----*/ /*----/BODY PANEL----*/ /*----/MAIN PANEL----*/

/*----FOOTER PANEL----*/

  1. footermainPan{height:103px; background:url(http://i.imgur.com/ouOAZhT.gif) 0 0 repeat-x #D3F0F0; color:#2F5958; font:13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; position:relative; margin:0 auto; clear:both; padding:36px 0 0;}
  2. footerPan{width:778px; position:relative; margin:0 auto;}
  1. footerPan ul{width:608px; height:20px; position:relative; margin:0 auto;}
  2. footerPan li{float:left; }
  3. footerPan ul li a{padding:0 10px 0; color:#2F5958; background:#EBF8F7; text-decoration:none; font-size:13px;}
  4. footerPan ul li a:hover{text-decoration:underline;}
  1. footerPan p.copyright{width:250px; margin:10px 0 0 92px;}
  1. footerPan ul.templateworld{width:250px; background:#D3F0F0; color:#007163; display:block; font-size:10px; position:absolute; top:49px; left:92px;}
  2. footerPan ul.templateworld li{height:20px;}
  3. footerPan ul.templateworld li a{background:#D3F0F0; display:block; color:#007163; text-decoration:none; padding:0px; font-size:10px;}
  4. footerPan ul.templateworld li a:hover{text-decoration:underline;}

/*----/FOOTER PANEL----*/

Retrieved from "http://2014.igem.org/Team:IvyTech_SouthBend_IN/css/stylesheet/standard"