/*------ This code sets the font style & colour for the site & gives it a margin of 2% with a background-colour of yellow which surrounds each page on the site ------*/ body {color: #424242; background-color: #faef79; font-family: "trebuchet ms","comic sans ms",verdana,arial,sans-serif; margin-top: -0.1em; margin-left: 2%; margin-right: 2%; margin-bottom: 2%; height: 100%;} /*------ This code centers the pages within the browser window ------*/ #container {position: relative; margin: auto; width: auto;} #contents {position: absolute; top: 0px; left: 0px; background-color: #ffffff; color: #424242; height: auto; padding-top: 0em; } /*------ This code provides a backgound-colour of yellow for the site banner & gives it a bottom border ------*/ #banner {background: #faef79; color: #424242; border-bottom: 1px solid #cbcbcb;} /*------ This code gives a left, right & bottom border to each page on the site & adds a small amount of padding at the bottom of each page ------*/ #maincontent {border-left: 1px solid #cbcbcb; padding-bottom: 0.5em; border-right: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb;} /*------ This code provides the style for various headings on the site ------*/ h2 {font-family: "trebuchet ms",verdana,sans-serif; font-style: italic; text-align: left; vertical-align: top; color: #bf0016; background-color: #ffffff; font-size: 120%; padding-left: 1em; margin-top: -0.1em;} h3 {font-family: "trebuchet ms",verdana,sans-serif; font-style: italic; font-size: 115%; text-align: left; vertical-align: top; color: #bf0016; background-color: #ffffff; padding-left: 0.7em;} h4 {color: #001199; background-color: #ffffff; font-size: 105%; vertical-align: top; text-align: left;} /*------ This code styles a horizontal line at the top & bottom of the site which separates the top & bottom navigation from the content of the site ------*/ hr {border: 1px solid #cbcbcb; margin-left: 2%; margin-right: 2%;} /*------ This code gives all images 0.6em padding ------*/ img {padding: 0.6em;} /*------ This code styles the numbered lists in the Getting Started & Word Processing pages ------*/ #list {float:right; text-align:left; padding-right:4em;} #list2 {padding-left:2em;} /*------ This div floats pictures to the left & gives them padding on the left ------*/ #pic1 {vertical-align:top; float:left; padding-left:1em;} #pic1 a:hover {border:1px solid #999999;} /*------ This div floats pictures to the right & gives them padding on the left ------*/ #pic2 {vertical-align:top; float: right; padding-left: 2em;} #pic2 a:hover {border:1px solid #999999;} /*------ This div styles the textbox which is the main content area of the site (excluding the navigation0 ------*/ #textbox {font-size: 100%; padding-left: 0.5em; padding-right: 1.5em; margin-left: 195px; letter-spacing: 0.02em; margin-top: -0.5em;} /*------ This code styles the tables used on the Contact & Hobbies pages ------*/ table {border: none; padding-top: 1em;} td {padding-top: 0.5em; padding-left: 0.5em; padding-bottom: 0.5em;} /*------ This code styles the links used within the body of the text ------*/ a {color: #bf0016; background-color: #ffffff; text-decoration: underline;} a:hover {color: #12049E; background: #ffffcc;} /*------ This code controls the navigation elements at the top of the page ------*/ #topnav {font-size: 80%; text-align: center; font-family: "trebuchet ms", arial, sans-serif; letter-spacing: 0.1em; margin-top: 1em;} #topnav a {color: #001199; font-weight: bold; background-color: #F7F7F7; border: 1px solid #cbcbcb; padding-left: 0.4em; padding-right:0.4em; padding-top: 0.1em; padding-bottom: 0.1em; text-decoration: none;} #topnav a:hover {color:#424242; background-color: #ffffcc;} #topnav strong {color: #bf0016; background-color: #ffffff;} /*------ This code controls the navigation elements on the left of the page ------*/ #navbar {font-family:"trebuchet ms",arial,sans-serif; font-size: 75%; text-align:left; padding-left: 1em; width: 170px; position: absolute; top: 300px; left: 0px; letter-spacing: 0.1em; } #navbar a {color: #001199; font-weight: bold; background: #F7F7F7; border: 1px solid #cbcbcb; padding-left: 0.4em; padding-right: 0.4em; padding-top: 0.1em; padding-bottom: 0.1em; text-decoration: none; display: block; margin-bottom: 0.4em;} #navbar a:hover {color: #424242; background: #ffffcc;} /*------ This code controls the navigation elements at the bottom of the page ------*/ #footnav {font-size:80%; text-align:center; font-family:"trebuchet ms",arial,sans-serif; letter-spacing:0.1em;} #footnav a {color:#001199; font-weight:bold; background:#F7F7F7; border:1px solid #cbcbcb; padding-left:0.4em; padding-right:0.4em; padding-top:0.1em; padding-bottom:0.1em; text-decoration:none;} #footnav a:hover {color:#424242; background:#ffffcc;} #footnav strong {color: #bf0016; background-color: #ffffff;} /*------ This code provides a left margin in the address box on the Contact Us page ------*/ .address {margin-left:27%;} /*------ This code makes some words coloured & emboldened ------*/ .blue {color:blue; background-color: #ffffff; font-weight:bold;} .red {color:red; background-color:#ffffff; font-weight:bold;} .purple {color: purple; background-color:#ffffff; font-weight:bold;} /*------ This code provides padding for a div at the bottom of the page ------*/ #pj {padding-bottom: 0.5em; font-size: 90%;} #pj p {color: #424242; background-color: #ffffff; } #pj a {color: #bf0016;#001199; background-color: #ffffff; text-decoration: none;} #pj a:hover {color: #001199; background-color: #F7F7F7; border-top: 1px solid #CBCBCB; border-bottom: 1px solid #CBCBCB;} /*------ This code provides a ?cursor on mouseover purple words which are emboldened ------*/ .explain {cursor: help; color: #990099; font-weight: bold; background-color: #ffffff;} /*------ All this code controls the "tips" in the left navbar on the home page ------*/ #tips {font-family: "comic sans ms", sans-serif; font-size: 100%; font-weight: normal; border-top: 2px solid #bf0016; border-bottom: 2px solid #bf0016; background-color: #F7F7F7; color: #424242; margin-top: 1.5em;} #tips p {text-align: center;} .quote {color: #bf0016; background-color: #F7F7F7; font-weight: bold; text-align: center;} .link1 {font-family: "trebuchet ms","comic sans ms",sans-serif; font-weight: bold; color: #bf0016; background-color: #f7f7f7; text-decoration: underline;} .link2 {font-family: "trebuchet ms","comic sans ms",sans-serif; font-weight: bold; color: #12049E; background-color: #ffffcc; text-decoration: underline;}