Difference between revisions of "Template:SCUT-China B/Bottom/css/1.css"

(IGEM_WiKi\Bottom\css\1.css)
 
(Replaced content with "→‎create a div with a yellow background: .igem_2017_content_wrapper .yellow_message { background-color: #fdeb39; color: #333333; }")
Line 1: Line 1:
−
/* WIKI SETTINGS */
+
/* create a div with a yellow background*/  
−
+
.igem_2017_content_wrapper .yellow_message {  
−
/* Remove footer, catlinks and logos */
+
background-color: #fdeb39;
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
+
color: #333333;
−
display: none;
+
}
−
}
+
−
+
−
 
+
−
/* set up a white background #58585b*/
+
−
body {
+
−
width: 100%;
+
−
height: 100%;
+
−
  background-color: #464646;
+
−
}
+
−
 
+
−
/*-- Make page full width and remove borders */
+
−
#globalWrapper, #content {
+
−
width: 100%;
+
−
height: 100%;
+
−
border: 0px;
+
−
background-color: transparent;
+
−
margin: 0px;
+
−
padding: 0px;
+
−
}
+
−
+
−
/*Clear wiki default settings for the top part and create mock "black navigation bar" */
+
−
#top-section {
+
−
background-color: #000000;
+
−
border: 0 none;
+
−
height: 14px;
+
−
z-index: 100;
+
−
top: 0;
+
−
position: fixed;
+
−
width: 100%;
+
−
margin:auto;
+
−
}
+
−
 
+
−
#top_menu_inside {
+
−
margin-left: 20px;
+
−
}
+
−
 
+
−
.forum_footer_div {
+
−
display:none;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* STYLING AND LAYOUT */
+
−
 
+
−
/* General wrap for the pages*/
+
−
    #contentWrap{
+
−
    min-height: 300px;
+
−
width: 980px;
+
−
height: auto;
+
−
float:left;
+
−
margin-left: 20px;
+
−
margin-top: 10px;
+
−
background-color: #fff;
+
−
overflow:hidden;
+
−
    }
+
−
 
+
−
 
+
−
/* STYLING AND LAYOUT - MAIN PAGE */
+
−
 
+
−
/*General Layout */
+
−
/*Main page right column, the on page menu will be placed here */
+
−
#menu_MainPage{
+
−
width: 155px;
+
−
float: left;
+
−
background-color: #f2f2f2;
+
−
height: 1780px;
+
−
}
+
−
 
+
−
 
+
−
/*Main page left column, content will be placed here */
+
−
#content_MainPage {
+
−
width: 825px;
+
−
float: left;
+
−
background-color: #fff;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*Left Container (menu) elements */
+
−
 
+
−
/*Style the h4 headings in the menu container */
+
−
#menu_MainPage h4{
+
−
margin-left: -11px;
+
−
color: #6D6E70;
+
−
background-color: #d3d3d3;
+
−
padding-top:10px;
+
−
padding-bottom:10px;
+
−
margin-bottom: -4px;
+
−
}
+
−
 
+
−
/*Styling for the lists */
+
−
#menu_MainPage ul{
+
−
width: 100%;
+
−
margin-left:-20px;
+
−
margin-bottom: 40px;
+
−
}
+
−
 
+
−
/*Styling for the the list item */
+
−
#menu_MainPage ul li{
+
−
 
+
−
padding-left: 8px;
+
−
padding-top:10px;
+
−
margin-bottom: -1px;
+
−
 
+
−
border: 1px solid #ccc;
+
−
border-right: 0px solid white;
+
−
border-left: 0px solid white;
+
−
 
+
−
height:28px;
+
−
font-weight: bold;
+
−
color: #565656;
+
−
list-style: none;
+
−
cursor:pointer;
+
−
 
+
−
/*animate transition */
+
−
-webkit-transition: background 0.2s linear;
+
−
-moz-transition: background 0.2s linear;
+
−
-ms-transition: background 0.2s linear;
+
−
-o-transition: background 0.2s linear;
+
−
transition: background 0.2s linear;
+
−
}
+
−
 
+
−
/*For the list item, changes the color on hover.*/
+
−
#menu_MainPage ul li:hover{
+
−
background-color: #5da88a;
+
−
color: white;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*Right Container (content) elements */
+
−
/*Class for creating a block 1/2 of the size of the content_MainPage*/
+
−
.twoColumns_MainPage {
+
−
width: 50%;
+
−
float:left;
+
−
padding:0px;
+
−
}
+
−
 
+
−
/*Class for creating a block 1/3 of the size of the content_MainPage*/
+
−
.highlights_MainPage{
+
−
float: left;
+
−
width: 33.333333%;
+
−
}
+
−
 
+
−
/*Styling for the images in twoColumns and highlights*/
+
−
.highlights_MainPage img, .twoColumns_MainPage img {
+
−
margin-left: 20px;
+
−
margin-bottom:10px;
+
−
}
+
−
 
+
−
/*Class for creating announcements in the main page */
+
−
.announcementsMainPage {
+
−
width:775px;
+
−
margin:auto;
+
−
padding-left:10px;
+
−
margin-left:20px;
+
−
background-color:#f2f2f2;
+
−
padding-top:5px;
+
−
padding-bottom:5px;
+
−
border-radius:5px;
+
−
margin-top:10px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* STYLING AND LAYOUT - WIKI/CONTENT PAGES */
+
−
/*Container for the image part of the top banner*/
+
−
#topBanner{
+
−
float:left;
+
−
margin-left:20px;
+
−
margin-bottom:-11px;
+
−
}
+
−
 
+
−
/*Container for the text side of the top banner */
+
−
#topBannerText {
+
−
float:left;
+
−
width:700px;
+
−
margin-left:30px;
+
−
margin-top:35px;
+
−
margin-bottom:-11px;
+
−
}
+
−
 
+
−
/*Styling for the text in topBannerText */
+
−
.topBanner_synbio{
+
−
font-size:38px;
+
−
}
+
−
.topBanner_parts{
+
−
font-size:22px;
+
−
}
+
−
 
+
−
 
+
−
/*CLASSES*/
+
−
/*Classes for creating a block 1/2 of the size of the page */
+
−
.twoColumnA, .twoColumnB {
+
−
float: left;
+
−
width: 490px;
+
−
}
+
−
 
+
−
/*Classes for creating a block 1/4 of the size of the page */
+
−
.smallBlock {
+
−
    float: left;
+
−
    width:225px;
+
−
    margin:10px;
+
−
}
+
−
 
+
−
/*Class for creating a right page submenu  */
+
−
.rightColumn_Submenu{
+
−
width: 220px;
+
−
float: left;
+
−
}
+
−
 
+
−
/*Styling the right page submenu list*/
+
−
.rightColumn_Submenu ul li{
+
−
margin-left: -15px;
+
−
padding-left: 5px;
+
−
}
+
−
 
+
−
/*For the right page submenu, change background hover  */
+
−
.rightColumn_Submenu ul li:hover {
+
−
background-color: #5da88a;
+
−
width: 180px;
+
−
border-radius: 5px;
+
−
color:white;
+
−
}
+
−
 
+
−
/*Creates a class to accompany the right submenu  */
+
−
.leftColumn_Text{
+
−
width: 760px;
+
−
float: left;
+
−
}
+
−
 
+
−
/*Container that centers images inside - declare as a div */
+
−
.centerImages {
+
−
text-align:center;
+
−
margin:auto;
+
−
}
+
−
 
+
−
/*For the centerImages div, adds padding to the images*/
+
−
.centerImages img {
+
−
padding: 15px;
+
−
}
+
−
 
+
−
/*Container that centers videos - declare as a div */
+
−
.centeredVideo {
+
−
margin:auto;
+
−
width:940px;
+
−
text-align:center;
+
−
}
+
−
 
+
−
 
+
−
/*Clear class for all the pages, adds spacing too*/
+
−
    .clear {
+
−
        clear: both;
+
−
        height:30px;
+
−
    }
+
−
 
+
−
 
+
−
/*Clear class for all the pages, no  spacing */
+
−
.clearNoHeight {clear:both;}
+
−
 
+
−
 
+
−
/*Alert message for important messages */
+
−
.alertMessage{
+
−
background-color: #f2f2f2;
+
−
padding: 10px 0px;
+
−
width: 980px;
+
−
margin:auto;
+
−
text-align:center;
+
−
margin-bottom: 20px;
+
−
margin-top:10px;
+
−
}
+
−
 
+
−
/* highlight box for special messages, light green background*/
+
−
.highlightBoxA {
+
−
background-color: #eef0c6;
+
−
padding: 10px 0px;
+
−
width: 460px;
+
−
margin:auto;
+
−
}
+
−
 
+
−
/* highlight box for special messages, gray background*/
+
−
.highlightBoxB {
+
−
background-color: #e9e8e7;
+
−
padding: 10px 0px;
+
−
width: 440px;
+
−
margin:auto;
+
−
}
+
−
 
+
−
/*Buttons for all of the pages */
+
−
    .button {
+
−
        width: 130px;
+
−
    border: 2px solid #f58631;
+
−
    background-color: #FFF;
+
−
    height: 30px;
+
−
    text-align: center;
+
−
        border-radius: 5px;
+
−
        padding: 10px 5px 0px 5px;
+
−
        margin: auto;
+
−
/*animate transition */
+
−
-webkit-transition: background 0.2s linear;
+
−
-moz-transition: background 0.2s linear;
+
−
-ms-transition: background 0.2s linear;
+
−
-o-transition: background 0.2s linear;
+
−
transition: background 0.2s linear;
+
−
    }       
+
−
 
+
−
/*For the button class, change background on hover */
+
−
    .button:hover {
+
−
    background-color: #f58631;
+
−
    color: #fff;
+
−
    }
+
−
 
+
−
 
+
−
    /* Class for making images with links react on hover */
+
−
    img.imageHover:hover {
+
−
    opacity: 0.4;
+
−
    filter: alpha(opacity=40); /* For IE8 and earlier */
+
−
    }
+
−
 
+
−
 
+
−
      /* Class for button quotes - About page */
+
−
.quoteBlocks {
+
−
width: 43px;
+
−
height: 30px;
+
−
padding-top:15px;
+
−
float:left;
+
−
 
+
−
border: 2px solid #f58631;
+
−
+
−
 
+
−
font-weight:bold;
+
−
text-align:center;
+
−
margin-left:20px;
+
−
 
+
−
/*animate transition */
+
−
-webkit-transition: background 0.2s linear;
+
−
-moz-transition: background 0.2s linear;
+
−
-ms-transition: background 0.2s linear;
+
−
-o-transition: background 0.2s linear;
+
−
transition: background 0.2s linear;
+
−
}
+
−
 
+
−
 
+
−
      /* hover state for button quotes - About page */
+
−
.quoteBlocks:hover{
+
−
background-color:#f58631;
+
−
border: 2px solid #f58631;
+
−
cursor:pointer;
+
−
}
+
−
 
+
−
      /* style for  quotes - About page */
+
−
.Font_quote {
+
−
font-weight:bold;
+
−
color: #4d5f6d;
+
−
margin-top: -10px;
+
−
}
+
−
 
+
−
      /* div with 1/3 width of the page - features important information */
+
−
.featureBlockC {
+
−
width: 33.33%;
+
−
float:left;
+
−
padding-top:10px;
+
−
}
+
−
 
+
−
      /* div with 1/3 width of the page - features important information */
+
−
.featureBlock {
+
−
width: 33.33%;
+
−
float:left;
+
−
padding-top:10px;
+
−
/*animate transition */
+
−
-webkit-transition: background 0.2s linear;
+
−
-moz-transition: background 0.2s linear;
+
−
-ms-transition: background 0.2s linear;
+
−
-o-transition: background 0.2s linear;
+
−
transition: background 0.2s linear;
+
−
}
+
−
 
+
−
      /* hover state for div with 1/3 width of the page - features important information */
+
−
.featureBlock:hover {
+
−
background-color:#ebeea9;
+
−
cursor:pointer;
+
−
}
+
−
 
+
−
      /* div with 1/4 width of the page - features important information */
+
−
.featureBlock_B{
+
−
width: 25%;
+
−
float:left;
+
−
padding-top:10px;
+
−
/*animate transition */
+
−
-webkit-transition: background 0.2s linear;
+
−
-moz-transition: background 0.2s linear;
+
−
-ms-transition: background 0.2s linear;
+
−
-o-transition: background 0.2s linear;
+
−
transition: background 0.2s linear;
+
−
}
+
−
 
+
−
      /* hover state for div with 1/4 width of the page - features important information */
+
−
.featureBlock_B:hover {
+
−
background-color:#ebeea9;
+
−
cursor:pointer;
+
−
}
+
−
 
+
−
 
+
−
      /* class that defines the font style for div with 1/3 width of the page - features important information */
+
−
.Font_featureBlock {
+
−
font-weight:normal;
+
−
color:black;
+
−
font-size:11px;
+
−
}
+
−
 
+
−
      /* class for icon divs - competition page */
+
−
.iconBlocks {
+
−
width: 80px;
+
−
float:left;
+
−
cursor:pointer;
+
−
}
+
−
 
+
−
      /* hover state for icon divs - competition page */
+
−
.iconBlocks img:hover, .iconBlocks_program:hover {opacity: 0.4;
+
−
filter: alpha(opacity=40); /* For IE8 and earlier */}
+
−
 
+
−
 
+
−
      /* class for change month button - competition page */
+
−
.changeMonthButton {
+
−
float:left;
+
−
width:28px;
+
−
color:#f58631;
+
−
border: 2px solid white;
+
−
height: 21px;
+
−
font-size:large;
+
−
font-weight:bold;
+
−
padding-top:5px;
+
−
cursor:pointer;
+
−
text-align:center;
+
−
/*animate transition */
+
−
-webkit-transition: background 0.2s linear;
+
−
-moz-transition: background 0.2s linear;
+
−
-ms-transition: background 0.2s linear;
+
−
-o-transition: background 0.2s linear;
+
−
transition: background 0.2s linear;
+
−
}
+
−
 
+
−
      /* hover state for change month button - competition page */
+
−
.changeMonthButton:hover{
+
−
background-color: #f58631;
+
−
border: 2px solid #f58631;
+
−
color: white;
+
−
}
+
−
+
−
      /* class for month name display - competition page */
+
−
.monthBlock{
+
−
float:left;
+
−
width:208px;
+
−
background-color:#ebeea9;
+
−
height:30px;
+
−
 
+
−
}
+
−
      /* font style for class for month name display - competition page */
+
−
.calendarName{
+
−
text-align:right;
+
−
margin-top: 3px;
+
−
font-weight:bold;
+
−
}
+
−
 
+
−
      /* class for  displaying monthly activities - competition page */
+
−
.calendarContent {
+
−
margin-left: 32px;
+
−
width: 204px;
+
−
border: 2px solid #ccc;
+
−
height: 120px;
+
−
}
+
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
−
 
+
−
/*Styling the links - links are different in menus*/
+
−
#contentWrap a {
+
−
color:#f58631;
+
−
font-weight: bold;
+
−
text-decoration: none;
+
−
}
+
−
 
+
−
/* Styling links on hover- links are different in menus */
+
−
#contentWrap a:hover {
+
−
color: #fbceac;
+
−
    }
+
−
 
+
−
 
+
−
/* styling for all the headers in all the pages */
+
−
#contentWrap h1, h2, h3, h4, h5, h6 {
+
−
font-family: "Arial", Gadget, sans-serif; border-bottom:none;
+
−
font-weight: bold;
+
−
padding: 0px 20px 0px 20px;
+
−
}
+
−
 
+
−
/*Define color for h1 h2 h3 titles */
+
−
#contentWrap h1, h2, h3 {
+
−
color: #5da88a;
+
−
}
+
−
 
+
−
/*Define color for h4 titles */
+
−
#contentWrap  h4 {
+
−
color: #4d5f6d;
+
−
}
+
−
 
+
−
/*Define color for h5 h6 titles */
+
−
#contentWrap h5, h6 {
+
−
color: #000000;
+
−
}
+
−
 
+
−
 
+
−
/*Styling for all the tables */
+
−
      #contentWrap table {
+
−
border: 1px solid #ccc;
+
−
border-collapse: collapse;
+
−
width: 90%
+
−
margin: auto;
+
−
margin-bottom: 15px;
+
−
margin-top: 15px;
+
−
margin-right: 10px;
+
−
margin-left: 10px;
+
−
}
+
−
 
+
−
/*Styling cells inside all of the tables */
+
−
#contentWrap td {
+
−
padding:5px 10px;
+
−
border: 1px solid #ccc;
+
−
border-collapse: collapse;
+
−
vertical-align: text-top;
+
−
}
+
−
 
+
−
/*Styling table headers for all the tables */
+
−
#contentWrap th{
+
−
padding: 5px 10px;
+
−
border: 1px solid #ccc;
+
−
border-collapse: collapse;
+
−
vertical-align: text-top;
+
−
background-color: #e9ebc4;
+
−
}
+
−
 
+
−
 
+
−
/* Establish font size and family for all text */
+
−
#contentWrap p {
+
−
font-family: "Arial", Helvetica, sans-serif;
+
−
font-size: 13px;
+
−
padding: 5px 20px 10px 20px;
+
−
text-align: justify;
+
−
text-justify: inter-word;
+
−
}
+
−
+
−
/*Styles the lists */
+
−
#contentWrap ul {
+
−
padding: 0px 20px;
+
−
list-style:circle;
+
−
}
+
−
 
+
−
/*Styles the h1 that contains the first heading */
+
−
.firstHeading {
+
−
font-size: 25px;
+
−
margin-left: -20px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/*css: footer styling */
+
−
#footerWrap {
+
−
background-color: #f2f2f2;
+
−
width: 980px;
+
−
height: 220px;
+
−
margin:auto;
+
−
}
+
−
 
+
−
 
+
−
#footerWrap a {
+
−
color: black;
+
−
}
+
−
 
+
−
 
+
−
#footerWrap ul {
+
−
list-style:none;
+
−
margin-left: 0px;
+
−
}
+
−
 
+
−
.insideFooter {
+
−
float:left;
+
−
width: 153px;
+
−
padding: 10px;
+
−
padding-left: 10px;
+
−
padding-right:0px;
+
−
margin: auto;
+
−
background-color: #f2f2f2;
+
−
}
+
−
 
+
−
 
+
−
.footerWrap ul li{
+
−
font-family: "Arial", Helvetica, sans-serif;
+
−
font-size: 11px;
+
−
list-style:none;
+
−
}
+
−
 
+
−
 
+
−
.insideFooter img{
+
−
margin: auto;
+
−
text-align:center;
+
−
display:block;
+
−
}
+
−
 
+
−
.insideFooter h5{
+
−
color: #959485;
+
−
}
+
−
 
+
−
.footerWrap ul li a{
+
−
font-weight: bold;
+
−
color: #434343;
+
−
text-decoration:none;
+
−
}
+
−
 
+
−
.footerWrap ul li a:hover{
+
−
color:#3aa76c;
+
−
text-decoration:none;
+
−
}
+
−
+
−
.upperFooter {
+
−
background-color: #656459;
+
−
padding-left: 10px;
+
−
padding-top: 10px;
+
−
height:60px;
+
−
margin-top: -30px;
+
−
}
+

Revision as of 15:27, 24 June 2017

/* create a div with a yellow background*/ .igem_2017_content_wrapper .yellow_message { background-color: #fdeb39; color: #333333; }