@charset "utf-8"; /* --- Body, fonts, and header styles starts here --- */ body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #CCC; /* --- font colour --- */ background-color: #C00; /* --- backgroud colour --- */ } a { color:#fff; } a:hover { color:#ffff00; } h1 { margin-bottom: 5px; margin-top: 25px; font-size:30px; color: #666; } h2 { margin-bottom: 5px; margin-top: 20px; font-size:24px; color: #999; } h3 { margin-bottom: 5px; margin-top: 15px; font-size:18px; color: #666; } h4 { margin-bottom: 5px; margin-top: 10px; font-size:14px; color: #CCC; } h5{ margin-bottom: 5px; margin-top: 15px; font-size:14px; color: #999; } h6 { margin-bottom: 5px; margin-top: 15px; font-size:12px; color: #fff; } /* --- Body, fonts, and header styles ends here --- */ /* --- Page Layout starts here --- */ #container { background-image: url(images/content.jpg); background-repeat: repeat-y; width: 960px; margin-right: auto; margin-left: auto; } #header { background-image: url(images/header.jpg); background-repeat: no-repeat; clear: both; height: 167px; /* --- Header height --- */ width: 960px; } #header-menu { background-image: url(images/header-menu.jpg); background-repeat: no-repeat; clear: both; height: 113px; /* --- Header-menu height --- */ width: 960px; } #content { background-image: url(images/content.jpg); background-repeat: repeat-y; clear: both; height: 142px; /* --- Content height --- */ width: 860px; min-height: 100px; padding-left:50px; padding-right:50px } #footer-menu { background-image: url(images/footer-menu.jpg); background-repeat: no-repeat; clear: both; height: 114px; /* --- Footer-menu height --- */ width: 960px; } #footer { background-image: url(images/footer.jpg); background-repeat: no-repeat; clear: both; height: 184px; /* --- Footer height --- */ width: 960px; } #footer-notes-spacer { clear: both; height: 100px; /* --- Content height --- */ width: 560px; margin-right: auto; margin-left: auto; } #footer-notes { clear: both; height: 30px; /* --- Content height --- */ width: 560px; margin-right: auto; margin-left: auto; } #push-next-layout-container { float: left; width: 860px; } /* --- Page Layout ends here --- */ /* --- Navigation buttons - horizontal starts here--- */ #navbar { width:560px; margin-right: auto; margin-left: auto; } #navbar #holder { height:38px; border-bottom:2px solid #000; width:560px; padding-left:25px; } #navbar #holder ul { list-style:none; margin:0; padding:0; } #navbar #holder ul li a { text-decoration:none; float:left; margin-right:5px; line-height:15px; font-family:"Arial Black", Gadget, sans-serif; color:#000; border:2px solid #000; border-bottom:none; padding:10px; width:75px; text-align:center; display:block; background: #C00; /* --- tab backgroud colour --- */ -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:15px; } #navbar #holder ul li a:hover { background:#F90; color:#FFF; text-shadow:1px 1px 1px #000; } #holder ul li a#onlink { background:#FFF; color:#000; border-bottom:1px solid #FFF; } #holder ul li a#onlink:hover { background:#FFF; color:#C00; /* --- text hover colour --- */ text-shadow:1px 1px 1px #000; } /* --- Navigation buttons - horizontal ends here--- */ /* --- gallery 5 colums Start --- */ .grid { width: 810px; margin-right: auto; margin-left: auto; } .start { float: left; width: 0px; height: 1px; } .thumbnail { float: left; width: 138px; } .spacer { float: left; width: 25px; height: 1px; } /* --- gallery 5 colums End --- */ /* --- Float images to the left or right of page start here--- */ /* --- Float Single framed image to the right horizontal --- */ .floatright-framed { float: right; width: 103px; margin: 20px 0 20px 20px; background-color: #C00; padding: 10px; border-top: 2px solid black; border-right: 4px solid black; border-bottom: 4px solid black; border-left: 2px solid black; } div.floatright-framed img { border-top: 2px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 2px solid black; } /* --- Float Single framed image to the left horizontal --- */ .floatleft-framed { float: left; width: 103px; margin:20px 20px 20px 0; background-color: #C00; padding: 10px; border-top: 2px solid black; border-right: 4px solid black; border-bottom: 4px solid black; border-left: 2px solid black; } div.floatleft-framed img { border-top: 2px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 2px solid black; } /* --- Float Single image about 100 to the right horizontal --- */ .floatright { float: right; width: 103px; margin: 20px 0 20px 20px; padding: 10px; } /* --- Float Single image to the left horizontal --- */ .floatleft { float: left; width: 103px; margin:20px 20px 20px 0; } p { margin-top: 0; } /* --- Float Single image to the right vertical --- */ .floatright-clear { float: right; margin: 20px 0 20px 20px; clear: right; } /* --- Float Single image to the left vertical --- */ .floatleft-clear { float: left; margin:20px 20px 20px 0; clear: left; } .containingbox p { margin-top: 0;} /* --- Float images to the left or right of page codes ends here--- */ /* --- Basic object alignment with no size restrictions --- */ .align-right { float:right; margin: 0 0 15px 15px; } .align-left { float:left; margin: 5px 30px 15px 0; } .frame { padding: 5px; border: 3px solid black; } .center img { display:block; margin-left:auto; margin-right:auto; } .text_line /* --- Move object to next line down to the left, reset both left and right--- */ { clear:both; margin-bottom:2px; margin-top:25px } .text_line-r /* --- Move object to next line down to the left, reset left only --- */ { clear:left; margin-bottom:2px; margin-top:25px } .text_line-l /* --- Move object to next line down to the left, reset right only --- */ { clear:right; margin-bottom:2px; margin-top:25px }