Template: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; }