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

(SCUT-China B/Bottom/css/1.css)
Line 1: Line 1:
 
<html>
 
<html>
−
/* create a div with a yellow background*/  
+
<style type="text/css">
−
.yellow_message {  
+
/* WIKI SETTINGS */
−
background-color: #fdeb39;
+
−
color: #333333;
+
/* Remove footer, catlinks and logos */
−
}
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
 +
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;
 +
}
 +
</style>
 
</html>
 
</html>

Revision as of 16:02, 24 June 2017