|
|
| Line 93: |
Line 93: |
| | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ |
| | | | |
| − | /*Change the styling of text for everything inside main container*/
| |
| − | #mainContainer p {
| |
| − | font-size: 15px;
| |
| − | 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:0px;
| |
| − | }
| |
| − |
| |
| − | /*Style of the links - links are different inside the menu */
| |
| − | #contentContainer a {
| |
| − | font-weight: bold;
| |
| − | color: #000000;
| |
| − | font-size: 100%;
| |
| − | }
| |
| − |
| |
| − | /* Styling links on hover- links are different inside the menu */
| |
| − | /* #contentContainer a:hover {
| |
| − | color: #59BF92;
| |
| − | } */
| |
| | | | |
| | /*Change the styling of tables */ | | /*Change the styling of tables */ |
| Line 150: |
Line 124: |
| | } | | } |
| | | | |
| − |
| |
| − |
| |
| − | /*MENU STYLING */
| |
| − |
| |
| − | #menuContainer {
| |
| − | text-align: center;
| |
| − | padding-top: 10px;
| |
| − | padding-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | #menuContainer > ul a {
| |
| − | color: #FFF;
| |
| − | }
| |
| − |
| |
| − | #menuContainer > ul {
| |
| − | list-style: none;
| |
| − | margin-left: 0;
| |
| − | padding-top: 10px;
| |
| − | text-align: center;
| |
| − | width: 100%
| |
| − | }
| |
| − | #menuContainer > ul ul {
| |
| − | list-style: none;
| |
| − | margin-left: 0%;
| |
| − | padding-top: 0;
| |
| − | text-align: center;
| |
| − | width: 100%
| |
| − | }
| |
| − | #menuContainer > ul li {
| |
| − | position: relative;
| |
| − | text-align: center;
| |
| − | }
| |
| − | #menuContainer > ul a {
| |
| − | padding: 10px 8px;
| |
| − | display: block;
| |
| − | text-decoration: none;
| |
| − | font-family: "Helvetica Neue", Helvetica, sans-serif;
| |
| − | font-size: 155%;
| |
| − | }
| |
| − | #menuContainer > ul a:hover {
| |
| − | background: #000;
| |
| − | background-color: #3b3d63;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Level 1 Drop Down Menu */
| |
| − | #menuContainer > ul > li {
| |
| − | display: inline-block;
| |
| − | vertical-align: top;
| |
| − | margin-left: -4px; /* solve the 4 pixels spacing between list-items */
| |
| − |
| |
| − | }
| |
| − | #menuContainer > ul > li:first-child {
| |
| − | margin-left: 0;
| |
| − | }
| |
| − | #menuContainer > ul > li > a {}
| |
| − | #menuContainer > ul > li > a:hover {}
| |
| − |
| |
| − |
| |
| − | /* Level 2 */
| |
| − | #menuContainer > ul > li > ul {
| |
| − | text-align: left;
| |
| − | width: auto; /* change auto value with 200px if you want a bigger menu */
| |
| − | display: none;
| |
| − | background-color: #1b1c3a;
| |
| − | position: absolute;
| |
| − | top: 100%;
| |
| − | left: 0;
| |
| − | margin-top: 0px;
| |
| − | z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
| |
| − | }
| |
| − | #menuContainer > ul > li:hover > ul{
| |
| − | display: block;
| |
| − |
| |
| − | }
| |
| − | #menuContainer > ul ul li a {}
| |
| − | #menuContainer > ul ul li a:hover {}
| |
| − |
| |
| − | /* Level 3 */
| |
| − | #menuContainer > ul > li > ul > li > ul {
| |
| − | text-align: left;
| |
| − | display: none;
| |
| − | background: #1b1c3a;
| |
| − | position: absolute;
| |
| − | left: 100%;
| |
| − | top: -5px;
| |
| − | z-index: 9999999;
| |
| − | }
| |
| − | #menuContainer > ul > li > ul > li:hover > ul {
| |
| − | display: block;
| |
| − | }
| |
| − | #menuContainer > ul ul ul li {}
| |
| − | #menuContainer > ul ul ul li a {}
| |
| − | #menuContainer > ul ul ul li a:hover {}
| |
| − | #menuContainer.navItem {
| |
| − | pointer-events: auto;
| |
| − | }
| |
| − | #Directory {
| |
| − | width: 100%;
| |
| − | overflow:hidden;
| |
| − | float:left;
| |
| − | margin-left:20px;
| |
| − | margin-right: 20px;
| |
| − | margin-bottom: 0px;
| |
| − | background-color: #000000;
| |
| − | border-bottom: 0px solid #565656;
| |
| − | border-right: 0px solid #565656;
| |
| − | border-left: 0px solid #565656;
| |
| − | border-top: 0px solid #565656;
| |
| − | font-family: "Trebuchet MS", Helvetica, sans-serif;
| |
| − | }
| |
| − | /*Style the Directory*/
| |
| − | #Directory table {
| |
| − | Background-color: #000000;
| |
| − | color: #FFFFFF;
| |
| − | margin-left: 0px;
| |
| − | padding: 20px;
| |
| − | line-height: 10px;
| |
| − | height: 100px;
| |
| − | width:100%;
| |
| − | /*float:left;*/
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Style the Directory button*/
| |
| − | #Directory li a{
| |
| − | color: #000000;
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | img.button {
| |
| − | opacity: 1.0;
| |
| − | filter: alpha(opacity=100); /* For IE8 and earlier */
| |
| − | }
| |
| − |
| |
| − | img.button:hover {
| |
| − | opacity: 0.7;
| |
| − | filter: alpha(opacity=80); /* For IE8 and earlier */
| |
| − | }
| |
| | | | |
| | | | |
