/* THIS IS THE NEW BUILD WEBSITE */ html{ height:100%; overflow-y: scroll; } body{ /* The entire screen, used as the background area */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #F1F1F3; text-decoration: none; background-color: darkgreen; /* Setting the side borders to dark green */ margin:0; padding:0; height:100%; } #webpage{ /* The central webpage content area */ width: 1024px; margin: 0 auto; background-color: white; padding:0; min-height: 800px; /* Sets the minimum height for the webpage */ _height: 900px; border-radius:15px; /* Curves the top and bottom edge of the webpage central panel */ } /* Generic styling on the webpage */ table, td{ /* Use this to add borders to all table elements on the screen */ /*border:1px solid #000000*/ } td{ font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; line-height: normal; font-weight: strong; font-variant: normal; color:#000000; text-decoration:none; } h1{ /* Used for the webpage title */ font-family:"Lucida Calligraphy", Verdana, Arial, sans-serif; font-size:28px; color:#030; } h3{ /* Used for the individual page titles - Activities, Contact Us, Join */ font-family:"Lucida Calligraphy", Verdana, Arial, sans-serif; font-size:22px} h4{ /* Used for subheadings on a page */ font-family:Verdana; font-size:16px} a{ /* All links in the page */ color:blue; text-decoration:none; } a.bold_link{ font-weight:bold; font-size:14px; color:blue; text-decoration:none; } a#mm{ color:#000000; text-decoration:none; } a:hover{ /* All hovers in the page */ color:blue; text-decoration:underline; } /* THE WEBPAGE HEADER SECTION */ #header-table{ width:100%; height:100%; background: url(images/headers/rotator.php) no-repeat; /* Controls the rotating images in the header - using a php script run from the web server */ /* background-image: url("images/headers/fringe_myrtle_ed.jpg"); /* Used in testing locally by putting a static image in the header - no php running locally */ border-radius:15px 15px 0px 0px; /* Curves the top corners of the website - applied to the header-table to curve the background-image */ } /* THE IMAGE ROTATION SCRIPT The image rotation is controlled by the rotator.php script sitting in the /images/headers/ folder. It selects an image to display randomly from the available jpg files in this folder. Adding images adds them to the rotation. No script editing is required. This script will not run locally but runs from any web server with php installed (which is standard). The script is free on the Internet for use. The header table is 1024px x 245px. Header images should be cropped to 1024px x 250px to accommodate the table borders. */ #logo-cell-left{ width:200px; height:245px; /* Sets the HEIGHT of the HEADER section */ text-align:left; vertical-align:middle; } /*#logo{ /* This is the actual logo image width:150px; /* original 180 x 150 height:120px; padding:0px 0 0 5px; }*/ #title-cell{ text-align:center; vertical-align:bottom; } #club_motto { /* Styling the text in the title-cell space */ font-style:italic; color:white; font-size:16px; font-weight:bold; /* background:black; */ } #contact-us-cell{ width:200px; vertical-align:bottom; text-align:right; } /* THE NAVIGATION BAR SECTION */ nav { /* Centres the navigation bar in the webpage, instead of having to centre everything in the */ text-align: center; font-size: 14px; } /* Styling on the "current" screen link */ a.current{ /* Style applied to the current Menu selected */ color:gold; } a.current:hover { /* The CURRENT menu item hover actions */ color:gold; text-decoration:none; background:none; cursor:default; } /* Styling on the menu - on the ul elements */ nav ul { background: #040; /* A default background colour for the menu incase the gradient background doesn't work */ background: linear-gradient(to bottom, #0a0 0%, #040 80%); /* IE - hopefully all versions... */ background: -moz-linear-gradient(top, #0a0 0%, #040 100%); /* FIREFOX */ background: -webkit-linear-gradient(top, #0a0 0%, #040 100%); /* CHROME - This line sets the gradual colour on the TOP LEVEL menu */ /* box-shadow: 0px 0px 10px rgba(0,0,0,0.15); /* A shadow outside the top level menu */ padding:0px 0px 0px 30px; /* PADDING ON THE TOP LEVEL MENU BAR ITSELF */ border-radius: 10px; /* Curves the corners of the menu bar */ list-style: none; /* Remove the bullets */ position: relative; /* Allows the absolute position of the sub menus */ display: inline-table; /* Display on one line, condense the width of the menu */ } nav ul:after { /* Inserts the 'content' after every nav ul element. Not sure what that does as I can remove with no impact. */ content: ""; clear: both; display: block; } /* Styling the menu link boxes */ nav ul li { /* Aligns the li elements from the left side of the menu */ float: left; /* Floating to the left of each other */ } nav ul li a { display: block; padding: 12px 35px 12px 15px; /* Controls the (internal) dimensions of the menu links */ color: white; /* Colour of the TOP link text default */ text-decoration:none; /* No underlining on the link text */ text-shadow: 1px 1px 1px black, 2px 2px 2px black; /* A shadow on the navigation menu text */ } a.main_menu:hover { /* TOP LEVEL menu items */ color:gold; text-decoration:none; } #fb_icon{ border: 2px solid #fff; width: 90px; height: 14px; } #fb_icon:hover{ border: 2px solid gold; } /* Styling the sub menus */ #submenu ul{ margin: 0px; padding: 9px 0px; } #submenu li{ display: inline; /* Display on one line, condense the width of the menu */ margin: 0px; padding: 0px 8px 0px 0px; } #submenu a{ font-family:"Lucida Calligraphy", Verdana, Arial, sans-serif; font-size: 16px; color:#030; } #submenu a.current_sub{ /* Style applied to the current Menu selected */ font-size:21px; font-weight: bold; } #submenu a.current_sub:hover{ text-decoration:none; background:none; cursor:default; } /*#submenu_2{ /* This style is for the Club Activites and Contact Us headings */ /*font-family:"Lucida Calligraphy", Verdana, Arial, sans-serif; /*color:#030; /*font-size:20px; /*font-weight: bold; /*padding: 9px 8px 9px 0px; /*} /* Styling on specific panels in the central pane */ #home-page-content-panel{ /* This is the content panel for the Home page only as it is different */ width:100%; height:100%; padding:0 10px 0 10px; } #content-panel{ /* This is the content panel for all other pages */ width:100%; height:100%; padding:0 50px 0 10px; } #left-panel{ /* Styling of the left panel (for images) on every page */ width:150px; vertical-align:top; text-align:center; padding:7px 0 0 0; } #left-panel img{ /* Size styling of the images in the left hand panel of the main panel on each page */ width:140px; height:140px; } img#logo{ /* This is the actual logo image */ width:140px; /* original 180 x 150 = ratio of 0.833333 */ height:117px; padding:10px 0 5px 20px; } #panel{ /* The central panel of each screen - JUSTIFIED TEXT */ vertical-align:top; padding:0px 10px 10px 10px; margin:0; font-size:15px; line-height:1.3; text-align:justify; } #panel-non-justify{ /* The central panel of Calendar and Reports screens - REGULAR TEXT */ vertical-align:top; padding:0px 5px 10px 5px; margin:0; font-size:15px; line-height:1.3; } #coe-panel{ width:244px; vertical-align:top; padding:20px 2px 0px 0px; } #logo-panel{ width:230px; vertical-align:top; text-align:center; padding:0 2 0 0; } #coe-small{ /*Adjusting the height to fit the COE on the Home page*/ border:1px solid #734A12; padding:2px 3px 2px 4px; margin:7px 0 0 0; background-color:#ffffff; height:auto; /*height:623px; /*overflow:auto;*/ } .coe-small-heading{ text-align:center; font-weight:bold; font-size:18px; font-variant:small-caps; padding:3px 0 1px 0; /*border-bottom:1px solid brown*/ } .coe-small-month{ font-weight:bold; font-size:13px; color:#fff; letter-spacing:1; padding:3px 0 3px 3px; margin:5px 0; background-color: #06c; } .coe-small-event{ padding:2px; font-size: 12px; line-height:135%; background-color:#cee; border:1px solid blue; margin:2px 0px; } #coe-big{ /* The Calendar table */ border:1px solid darkblue; /* Putting a border around the entire Calendar */ } #coe-big td{ /* Individual cells in the Calendar */ width:300px; vertical-align:top; /* The set width of cells in the Calendar table */ border-right:1px solid lightblue; } .coe-big-month{ /* Formatting on the Month text */ font-weight: bold; font-size: 16px; letter-spacing:1; padding:0 0 3px 3px; background-color: lightblue; } .coe-big-event{ /* Formatting on the Event heading text */ font-size:14px; line-height:130%; } #prog-table td{ /* Setting the dimensions of the tables containing Programmes and Newsletters */ width:250px; height:20px; font-size:13px; text-align:left; } #report-table{ /* Setting the dimensions of the tables containing Members Reports */ height:30px; font-size:15px; padding:2px; border:1px solid black; } #history-panel{ width:820px; height:680px; overflow:auto; padding:0 5 0 0; margin:0 } #report-panel{ width:830px; height:660px; overflow:auto; padding:0px 5px 0px 0px; margin:0; text-align:left; } #archive-panel{ width:820px; height:600px; overflow:auto; padding:0 5 0 0; margin:0; } #AoC{ /* Styling of the Acknowledgement of Country in the footer */ text-align:center; padding:10px 50px 0 50px; font-size: 14px; line-height:1.5; } #footer{ /* Styling of the footer */ text-align:center; font-size:10px; padding:0 0 5px 0; }