(7 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | /* create a div with a | + | <html> |
− | . | + | <style type="text/css"> |
− | background-color: # | + | /* WIKI SETTINGS */ |
− | color: # | + | |
− | } | + | /* 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> |
Latest revision as of 08:32, 19 July 2017