Difference between revisions of "Template:SYSU-Software/CSS"

Revision as of 09:24, 31 July 2015

               /* since the background is dark, we change the color of the text and links so they are visible on "show preview" mode */
  #bodyContent p{
   margin:0;
   padding:0;
   border:0;
  }

  #top {
       background: url("");
       background-position: center;
       background-size: 100px 100px;
       width:100px;
        height:100px;
       border-radius:50%;
       position: fixed;
        bottom: 20px;
        right: 20px;
   }

   p, #content {
       color:#808284;
   }

   .firstHeading {
     display:none;
   }

   a, a:visited {
       color:#22BCB9;
   }

   ul {
   margin: 0;
   }

   /* PAGE LAYOUT */
   /* Set up a width, height and color of the body wrapper*/

  #content {
   width:100%;
   margin:0;
   padding:0;
   border:0;
  }

   body {
       font: x-small sans-serif;
       background-color: white !important;
   }

   /* Creates a container that will wrap all of the content inside your wiki pages. */
   #mainContainer {  
       width: 100%;
       overflow:hidden;
       float:left;
       margin-bottom: 10px;
       background-color: #fff; 
   }

   /* Creates the container for the menu */
   #menuContainer  { 
       font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
       font-size: 9pt;
       width: 100%;
       top:16px;
       position: fixed;
       float: left;
       margin: 0;
       text-align: center;
   }

   #menuContainer #oplayer {
       opacity: 0.5;
       position: fixed;
       width: 100%;
       height: 40px;
       background-color: #000;
   }

   /* Creates the container for the content */
   #contentContainer {
       padding-top:20px;
       padding-right:10px;
       margin:0 auto;
       margin-bottom: 20px;
       width: 800px;
       padding-left: 10px;
       font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
   }

   /*Set up height place holder for the banner*/
   #bannerContainer {
       width: 100%;
       margin:0;
       height: 650px;
       text-align:center;
       color: #24B694;
       
       background: url("");
       background-repeat: no-repeat;
       background-position: top center;
       background-size:100% auto;
   }

   #title {
     height: 700px;
     padding-top: 140px;
   }

   #title h2 {
       font-size: 50pt;
       color: black;
   }

   #flame {
       color: #399e80 !important;
       font-size: 30pt;
       margin: 0px;
   }

   #title p {
       margin-top: 200px;
       font-size: 12pt;
       font-family:"MV Boli";
   }

   /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */

   /*Change the styling of text for everything inside main container*/
   #mainContainer p { 
       color: #000000;
   }

   #contentContainer {
       font-family: Arial;
       font-size: 12pt;
       width: 930px;
   }

   /*This changes the color and font family */
   #contentContainer h1, h2, h3, h4, h5, h6 { 
       font-family:"MV Boli", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
       color: #399e80 ;
       padding: 3px;
       border-bottom: none;
   }

   #contentContainer h1 {
       font-size: 40pt;
   }

  #contentContainer h2 {
     font-size: 30pt;
  }

   /*Style of the links - links are different inside the menu */
   #contentContainer a { 
       font-weight: bold;
       color: #22BCB9;
   }

   /* Styling links on hover- links are different inside the menu */
   #contentContainer a:hover { 
       color: #14747D;
   }

   /*Change the styling of tables */
   #contentContainer table {
           margin: auto;
           margin-bottom: 15px;
           margin-top: 15px;
           margin-right: 10px;
           margin-left: 10px;
       }

   /*Change the styling of table cells*/
       #contentContainer  td {
           background-color: #fff;
           padding: 10px;
           vertical-align: text-top;
       }

   /*Change the styling of table headers */
       #contentContainer th {
           background-color: #F4F0D8;
           padding: 10px;
           vertical-align: text-top;
       }

   /*MENU STYLING */

   /*Styling for the links in the menu */

   #menuContainer a {
       color: #fff;
       text-decoration:none;
       font-weight: bold;
   }

   /* Sets the style for lists inside menuContainer  */
   #menuContainer ul { 
       list-style: none;
   }

   /*Styles the list items to become menu buttons */
   #menuContainer ul li { 
       height: 30px;
       padding-top: 10px;
       padding-left: 3px;
       padding-right: 3px;
       display: block;
       float: left;
       margin-left: 10px;
       position: relative;
       margin-bottom: 0;
   }

   /*For the menu buttons, changes the color when hovering*/
   #menuContainer li:hover {
       color:  #FFF;
       background-color: #14747D;
   }

   /*Submenus are not displayed as default*/
   #menuContainer li ul {
       display: none;
       padding-top:15px;
       margin-left: -19px;
   }

   /*Submenus are displayed when hovering the menu button */
   #menuContainer li:hover ul {
       /*display: inline-block; */
       display: block; 
       position: absolute; 
       float:none;
       margin-top: -2px;
       left: 9px;

   /*Style the submenu buttons*/
   #menuContainer li ul li{
       background-color: #22BCB9; 
       padding-left:20px;
       padding-right:20px;
       height: 35px;
       padding-top:10px;
       margin-top:-2px;
       color: #28221E;
       width: 175px;
       float: none;
       text-align: center;
       opacity: 1;
   }

   /*CLASSES */

   /*Clear class for all the pages, adds spacing too*/
   .clear{
       clear:both;
       height: 10px;
   }

   /* highlight box for special messages */
 .highlightBox {
       width:500px; 
       margin:auto; 
       background-color: #F4F0D8; 
       margin-bottom: 15px;
       margin-top: 15px;
       padding: 15px;
       padding-top: 5px;

}