Wiki/Team:SCUT-China B/Bottom/css/1.css
/* WIKI SETTINGS */
/* 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; }
