Difference between revisions of "Template:GenetiX Tec CCM"

Line 57: Line 57:
 
   }
 
   }
 
   </style>
 
   </style>
 +
 +
<p>
 +
 +
    <!-- Start of CSS-->
 +
        <style type="text/css">
 +
 +
        /* PAGE LAYOUT */
 +
 +
        /* Change Background color*/
 +
            body {
 +
                background-color: #fff;
 +
            }
 +
 +
        /* Creates a container that will wrap all of the content inside your wiki pages. */
 +
            #mainContainer { 
 +
                width: 80%;
 +
                overflow:hidden;
 +
                margin-left: auto;
 +
                margin-right: auto;
 +
                margin-bottom: 10px;
 +
                background-color: #fff;
 +
                border-bottom: 14px solid #565656;
 +
                border-right: 2px solid #565656;
 +
                border-left: 2px solid #565656;
 +
                border-top: 2px solid #565656;
 +
                font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
            }
 +
 +
        /* Creates the container for the menu */
 +
            #menuContainer  {
 +
                float:top;
 +
                width: 100%;
 +
                border-top: 14px solid #565656;
 +
            }
 +
 +
        /* Creates the container for the content */
 +
            #contentContainer {
 +
                padding-top:20px;
 +
                padding-right:20px;
 +
                padding-left: 20px;
 +
                margin-bottom: 20px;
 +
                width: 100%;
 +
                float: left;
 +
                background-color: #fff;
 +
                border-top: 14px solid #565656;
 +
                font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
            }
 +
 +
        /*Set up height place holder for the banner*/
 +
            #bannerContainer {
 +
                height:200px;
 +
                margin:auto;
 +
                text-align:center;
 +
                color: #24B694;
 +
            }
 +
 +
        /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 +
 +
        /*Change the styling of text for everything inside main container*/
 +
            #mainContainer p {
 +
                font-size: 13px;
 +
                color: #000000;
 +
            }
 +
           
 +
        /*This changes the color and font family */
 +
            #contentContainer h1, h2, h3, h4, h5, h6 {
 +
                color: #565656;
 +
                border-bottom: none;
 +
                font-weight: bold;
 +
                font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
                margin-top:10px;
 +
            }
 +
 +
        /*Style of the links - links are different inside the menu */
 +
            #contentContainer a {
 +
                font-weight: bold;
 +
                color: #23b593;
 +
            }
 +
 +
          /* Styling links on hover- links are different inside the menu */
 +
            #contentContainer a:hover {
 +
                color: #59bf92;
 +
            }
 +
 +
        /*Change the styling of tables */
 +
                    #contentContainer table {
 +
                    border: 1px solid #565656;
 +
                    border-collapse: collapse;
 +
                    width: 90%
 +
                    margin: auto;
 +
                    margin-bottom: 15px;
 +
                    margin-top: 15px;
 +
                    margin-right: 10px;
 +
                    margin-left: 10px;
 +
                }
 +
 +
        /*Change the styling of table cells*/
 +
                #contentContainer  td {
 +
                    padding: 10px;
 +
                    border: 1px solid #565656;
 +
                    border-collapse: collapse;
 +
                    vertical-align: text-top;
 +
                }
 +
 +
        /*Change the styling of table headers */
 +
                #contentContainer th {
 +
                    background-color: #E8E8E9;
 +
                    padding: 10px;
 +
                    border: 1px solid #565656;
 +
                    border-collapse: collapse;
 +
                    vertical-align: text-top;
 +
                }
 +
 +
 +
 +
        /*MENU STYLING */
 +
 +
        /*Styling for the links in the menu */
 +
            #menuContainer a {
 +
                color: #565656;
 +
                text-decoration:none;
 +
                font-weight: bold;
 +
            }
 +
 +
        /* Sets the style for lists inside menuContainer  */
 +
            #menuContainer ul {
 +
                list-style: none;
 +
                margin-left:0px;
 +
            }
 +
 +
        /*Styles the list items to become menu buttons */
 +
            #menuContainer ul li {
 +
                text-align: center;
 +
                display: block;
 +
                width: 100%;
 +
                height:30px;
 +
                padding-top:10px;
 +
            }
 +
 +
        /*For the menu buttons, changes the color when hovering*/
 +
            #menuContainer li:hover {
 +
                color:  #FFF;
 +
                background-color: #24B694;
 +
            }
 +
 +
        /*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:right;
 +
                margin-left: 134px;
 +
                margin-top:-42px;
 +
            }
 +
 +
        /*Style the submenu buttons*/
 +
            #menuContainer li ul li{
 +
                background-color: #59BF92;
 +
                padding-left:20px;
 +
                padding-right:20px;
 +
                height:30px;
 +
                padding-top:10px;
 +
                margin-top:-2px;
 +
                color: #565656;
 +
                width: 150px;
 +
            }
 +
 +
    /*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: #E8E8E9;
 +
                margin-bottom: 15px;
 +
                margin-top: 15px;
 +
                padding: 15px;
 +
                padding-top: 5px;
 +
                }
 +
 +
 +
        </style>
 +
    <!-- End of CSS -->
 
</html>
 
</html>

Revision as of 18:20, 12 June 2015