/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. */ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;} body { line-height: 1.4;} ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} /* Start baseline */ body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:90% font-style: normal; color: #ffff99; background-color: #1c3643; } /*General layout styles */ h1 { font-weight:bold;font-size:2.0em; margin:0 10px 10px 0; } h2 { font-weight:bold;font-size:1.5em; padding-top:0.5em; } h3 { font-weight:bold;font-size:1.2em; padding-top:0.5em; font-family: "Times New Roman", Times, serif;font-style:italic; } p { font-size:1.0em; } tr, td, th { vertical-align:top; } a:link { color:#ffff99; } a:visited { color:#999999; } a:hover { color:#ffff99; } a:active { color:#ffff99; } em, i { font-style:italic } b, strong { font-weight:bold } sup { vertical-align:super; font-size:66%; } /* extra styles which can be applied while formatting pages */ .FloatLeft { float:left;margin:10px 15px 10px 0; } .Floatright { float:right;margin:10px 0 10px 15px; } .TextLeft { text-align:left; } .TextRight { text-align:right; } .TextCenter { text-align:center; } .TextJustify { text-align:justify; } .bold_red { font-weight: bold;color: #ff0000; } .caption { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style:italic; padding-bottom:15px;} .emphasis { color: #FF0; } .genericbutton { border-style:solid; border-width:1px; border-color:#366A83 #000 #000 #366A83; border-radius:3px; padding:3px 5px 3px 5px; font-weight: bold; text-decoration:none; } .genericbutton:hover { border-color:#000 #366A83 #366A83 #000; background-color:#264b5e;} .superscript { vertical-align:super; font-size:66%; } .textbox1 { padding:10px; margin:auto;width:75%;border-style:solid;border-width:2px;border-left-color:#ffffff;border-top-color:#ffffff;} /*======================================================================================================*/ /* table styles */ table { border-collapse: collapse;border-spacing:0; margin:0px;padding:0 } table th { padding: 3px 10px 3px 0px; } table td { padding: 3px 10px 3px 0px; } table.gridtable { color:#555555; border-width: 1px; border-color: #555555; border-collapse: collapse; } table.gridtable th {border-width: 1px; padding: 3px 5px 3px 5px; border-style: solid; border-color: #555555; background-color: #555555; color:#cccccc; font-weight: bold; font-style: italic; line-height:1.0; } table.gridtable td {border-width: 1px; padding: 3px 5px 3px 5px; border-style: solid; border-color: #666666; background-color: transparant; } table.gridtable tr:nth-child(even) {background: #dddddd} /*======================================================================================================*/ /*Start of definition of the specific boxes in the layout of the site */ .searchbox {height:0;margin:5px;position:relative;top:-30px;left:800px; } /* There's a separate style for the searchbox on the homepage */ /* Box for social media buttons */ #socialmedia { width:120px; height:0px; position:relative;top:180px;left:0px; } #socialmediabox { padding:5px;border-style:solid; border-width:1px; border-color:#366A83 #000 #000 #366A83; border-radius:5px; box-shadow: 5px 5px 5px #222; background-color:#264b5e } #socialmediabox p { margin:6px 0px;} /* #main contains all contents of the page and defines the outline, it also centers the content of the page in the browser window */ body {text-align:center;} /* believe it or not: this line is to outsmart IE. By setting text-align to center and then return to left, it will obey the centering of #main box */ #main { height:60px;margin-left :auto; margin-right:auto; width:1250px; text-align:left; } #wrapper { float:right; width:1120px;background-color:#264b5e;border-radius:10px;margin-bottom:20px; } .caps { width:1120px; float:left; padding:0; background-color:#FFF;} /* I have no idea why this style exists, it is a remnant of a stylesheet I used for a start and it works, it's indispensible and I don't know why */ /* The header of the page */ #header { height:110px;width:100%; border-bottom:#ffff99 solid 1px;background:#1c3643; background-image:url('../site assets/sitewide images/garratt background.jpg'); background-repeat:no-repeat; background-position:left bottom; } #header p { font-size:2.0em;margin-top:50px; } .headerlogo { width:600px;height:110px;text-align:center;float:left;background:transparent; } .headerlogo p { color:#ffff99; } .headerimage { width:400px;float:right;text-align:right;background:transparent; } /* Defition of the horizontal menu ==========================================================================*/ #h-navigation { width:100%;height:36px;background-color:transparent;padding:30px 0 0 0;margin:0 0 40px 0; background-color:#1c3643; } #h-navigation ul { } #h-navigation li { display:inline; } #h-navigation a { font:italic 1.3em "Palatino Linotype", "Book Antiqua", serif; font-weight:bold; cursor: pointer; color:#ffff99; text-decoration:none; text-shadow: 3px 3px 2px #000; font-variant: small-caps; } .hormenu { width:100%; float:left;margin:0;padding:0;} /* so far for the menu itself. Now let's turn them into nicely modelled tabs. */ .hortab { padding:8px 0 2px 0;width:158px;height:25px; border-style:solid; border-width:1px 1px 1px 1px;border-top-left-radius:50px 15px;border-top-right-radius:10px 5px; text-align:center;overflow:hidden;font-size:0.8em;line-height:1.3em;float:left; border-color:#366A83 #000 #366A83 #366A83;background-color:#264B5E; } .hortab:hover { border-color:#366A83 #000 #366A83 #366A83; background-color:#345678;border} .chosentab { border-width:1px 1px 0px 1px;border-color:#366A83 #000 #000 #366A83; background-color:#345678; } /* End of the horizontal menu ==========================================================================*/ /* The subject or title area describes in a few words the content of the page */ #subject { float:right; background:transparent;width:100%; color:#ffff99; } #subject p { float:left;font-size:1.6em;font-style:italic;margin:18px 0 0 10px; } #subject h1 { float:right; width:847px; border-bottom:#ffff99 solid 1px; border-top:#ffff99 solid 1px;padding:0; margin:0 10px 10px 0; } /* Defition of the vertical menu */ #v-navigation { font-style:italic; font-size:1.0em;width:240px;background-color:transparent;} #v-navigation ul { list-style-type:none; } #v-navigation li { text-align:left ; } #v-navigation a.nav { border:solid transparent 1px; /* strictly the above statement is not necessary. The border will be invisible but by providing this border in advance it will take up 1 px of space each, and this will prevent the menu from moving when the boxed lines appear when hovering.*/ cursor:pointer;display:block;width:100%; /*height:20px; */ color:#ffff99;text-decoration:none; margin: 1px 0px 1px 10px; padding: 3px 5px 3px 5px; line-height: 90%; text-shadow: 2px 2px 2px #000; } #v-navigation a.nav:visited { color:#999999; } #v-navigation a.nav:hover { color:#ffff99; border-style:solid; border-width:1px 1px 1px 1px;border-radius:3px; border-color:#000 #366A83 #366A83 #000;background-color:transparent; } #v-navigation a.selected { /* this class signals the selected menu item in the vertical menus the so called persistent page indicator. It is not present in the base code of the templates or pages but is set by a script to replace the "nav"class */ cursor:pointer;display:block;width:100%; color:#ffff99; text-decoration:none; text-shadow: 2px 2px 2px #000; border-style:solid; border-width:1px 1px 1px 1px;border-radius:3px; border-color:#366A83 #000 #000 #366A83; background-color:#264B5E; background-image: url("../site assets/sitewide images/PersistentPageIndicator.png"); background-repeat: no-repeat; margin: 1px 0px 1px 10px; padding: 3px 5px 3px 5px; ; line-height: 90%; } .vertmenu { width:100%; float:left;background:transparent;} .vertmenu p { margin:15px 0 0 0;} .vertmenu p:first-child { margin:0 0 0 0;} .vertmenu div { padding:10px;} /* 03-10-2018 shows and hides a floating image besides menu items */ .hover_img a { position:relative; } .hover_img a span { position:absolute; left:230px; top: -25px; display:none; z-index:99; border-style:none; border-width:0px;border-radius:3px; box-shadow: 3px 3px 5px #222;} .hover_img a span img { border-radius:3px; } .hover_img a:hover span { display:block; } /* end */ /* Center contains the main content of the page */ .center { width:830px; float:right;background-color:#cccccc;margin:0; border-radius:3px; color:#555555; padding: 10px; margin-right:8px; font-family: "Trebuchet MS", "Lucida Sans Unicode", "Arial", sans-serif; font-size:90%; } .center table { color:#555555; } /* strictly speaking not necessary, this is only there to force Dreamweaver to display the text in tables in the correct colour during editing */ .center p, .center td { line-height: 1.4; } .center img { border-radius:3px; box-shadow: 3px 3px 5px #222; margin:5px; text-align: center; } .center table img { border-radius:3px; box-shadow: 3px 3px 5px #222; margin:5px 5px 5px 0px ; text-align: center; } .center ol { list-style-type: decimal; padding:0px; margin-left:15px } .center ul { list-style-type:none; padding:0; margin:0; } .center ul li { background-image: url("../Templates CSS/ul-bullet.png");background-repeat: no-repeat; background-position: 0px 5px;padding-left: 20px; } .center a:link { color:#6699ff; } .center a:hover { color:#6699ff; } /* Definition of the bottom end of every page */ #footer { background:transparent;border-top:1px solid #999999 ;margin-top:5px; } #footeraddress { text-align:left;height:22px;font-size:0.75em;font-family: "Times New Roman", Times, serif; color:#999999; font-variant: small-caps;text-align:center;letter-spacing:1px;padding: 10px 0 0 0; } #footerline1, #footerline2 { font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#999999;margin-top:0px;margin-bottom:0px; } #footerline1 { width:790px; float:left; border-top:#999999 1px solid; text-align:left; } #footerline2 { width:330px; float:right; border-top:#999999 1px solid; text-align:right; } #backtotop { position:relative;top:-11px;left:-75px;width:0px;float:left;} #backtotop img { border-style:solid; border-width:1px; border-color:#366A83 #000 #000 #366A83;border; border-radius:3px; } #backtotop:hover { border-color:#000 #366A83 #366A83 #000; background-color:#264b5e;}