/* =============================================================================================== Default Styles - remove any stupid browser defaults - include any universal defaults such as centered pages =============================================================================================== */ body { margin: 0px; padding: 0px; border: 0px solid blue; text-align: left; /* Hack for IE5/Win */ font-weight: normal; } #Centered-Page { margin: 0px auto; /* auto-margins will center the page in modern browsers */ text-align: left; /* Counteract to IE5/Win Hack */ margin-top: 15px; /* CBT design requires small gap at top */ } a { text-decoration: none; } p { margin:0px; padding-left: 0px; } /* Remove all header default attributes that make headers look like headers! */ h1 { font-weight:normal; padding-top: 0px; margin-bottom: 0px; letter-spacing: 0; } h2 { font-weight:normal; padding-top: 0px; margin-bottom: 0px; letter-spacing: 0; } h3 { font-weight:normal; padding-top: 0px; margin-bottom: 0px; letter-spacing: 0; } ul { padding-left: 0px; margin-bottom: 0px; margin-left: 0px; list-style-type: none; } li { padding-left: 0px; margin-left: 0px; } /* =============================================================================================== Specific Page Components - these are class styles that identify specific page components - only very generic attributes are set, the skin takes care of appearance =============================================================================================== */ /* some default classes that shortcut to styles */ .float-right { float: right; } .float-left { float: left; } .clear { clear: both; } .clear-left { clear: left; } /* a band is always just a band - the appearance is defined in the skin! */ .band { clear: both; } .bar { clear: both; } /* =============================================================================================== CBT Skin - the look-and-feel styles! - by changing these classes, we can transform the appearance of the site - we try to group similar skin attributes to better view the hierarchy =============================================================================================== */ /* colours */ .cbt-skin { background-color: #E4D3CA; color: #AA536C;} /* rich pink */ .cbt-skin a { color: #38281B; } .cbt-skin a:hover { color: #67585A; } .cbt-skin h1 { color: #FFFFFF; } .cbt-skin h3 { color: #FFFFFF; } .cbt-skin .band { background-color: #666600; } .cbt-skin #Mainmenu { background-color: none; color: #FFFFFF;} .cbt-skin #Mainmenu a { color: #9BADC3; } /* pale blue */ .cbt-skin #Mainmenu a:hover { color: #DDDDDD; } .cbt-skin #Masthead { background-color: #38281B; } /* chocolate */ .cbt-skin #Content a { color: #38281B; } .cbt-skin #Content a:hover { color: #8F9796; } .cbt-skin #Submenu a { color: #67585A; } /* Mocha */ .cbt-skin .actionbox { background-color: #515155; } .cbt-skin .bar { background-color: #3A5474; } .cbt-skin #Footer { background-color: #38281B; color: #FFFFFF; } .cbt-skin #Footer a { color: #FFFFFF; } .cbt-skin #Col3 a:hover { color: #444444; } .cbt-skin #Footer a:hover { color: #CCCCCC; } .cbt-skin #Content .content-link a { color: #67585A; } /* Mocha */ .cbt-skin #Content .content-link a:hover { color: #AA536C; } /* rich pink */ /* For testing #Col1 { background-color: black; padding-left: 0px; margin-left: 0px; margin-top: 0px;} #Col2 { background-color: blue; } #Col3 { background-color: red; } #Content { background-color: yellow; } #Content { padding-left: 0px; padding-top: 0px; margin-top: 0px; } */ /* borders */ #Content { border: 1px solid #AAAAAA; border-bottom: 0; border-top: 0; } #Masthead { border: 1px solid #AAAAAA; border-bottom: 0; } #Col1 { border: 0px solid red; } #Col2 { border: 0px solid green; } #Col3 { border: 0px solid blue; } .coltext { border: 0px solid red; } .cbt-skin #FloatBody { border: 0px solid green; } #Footer { border: 1px solid #AAAAAA; border-top: 0px; } #Footer-Right { border: 0px solid red; } .bar { border-left: 1px solid #AAAAAA; border-right: 1px solid #AAAAAA; } #Submenu { border: 0px solid red; } #Floater { border: 0px solid green; } .slogan { border: 0px solid yellow; } #Thumbnails { border: 0px solid red; } #Thumbnails img { border: 1px solid #AAAAAA; } /* background images */ .cbt-skin { background-image: url(images-main/bkg.gif); } .cbt-skin #Content2 { background-image: url(../images-main/homepage.gif); background-repeat: no-repeat; background-color: #DDDDDD} .cbt-skin #Content { background-image: url(../images-main/homepage.jpg); background-repeat: no-repeat; background-color: #DDDDDD} .cbt-galsplash #Content { background-image: url(../images-main/gatsby-detail.jpg); background-repeat: no-repeat; background-position:bottom left; background-color: #FFFFFF } .cbt-special_page #Content { background-image: url(../images-main/gatsby-detail.jpg); height:inherit; background-repeat: no-repeat; background-position:bottom left; background-color: #FFFFFF } .cbt-gallery #Content { background-image: none; background-color: #FFFFFF } .cbt-inside #Content { background-image: url(../images-main/gatsby-detail.jpg); background-repeat: no-repeat; background-position:bottom left; background-color: #FFFFFF } /*Page images */ .cbt-skin #Thumbnails img { margin-right: 5px; margin-bottom: 5px; width: 65px; height: 65px; } .cbt-gallery #Thumbnails .flourish { margin:0px; margin-bottom: 5px; width: 30px; height: 20px; border: 0px; } .cbt-galsplash .slogan img { width: 400px; height: 82px; } .cbt-gallery .slogan img { width: 400px; height: 82px; } .cbt-galsplash .flourish { width: 30px; height: 20px; } .cbt-skin #Logo { width: 120px; height: 120px; } /* text effects */ .cbt-skin { font-family: "lucida grande", tahoma, verdana, arial,helvetica,sans-serif; } .cbt-skin h1 { text-transform: uppercase; } .cbt-skin h2 { text-transform: uppercase; } .cbt-skin h3 { text-transform: uppercase; } .cbt-skin #Mainmenu { text-transform: uppercase; text-align: right; } .cbt-skin #Submenu { text-transform: uppercase; text-align:right; } .cbt-skin #Col3 { text-align:justify; } .cbt-skin .content-link { text-transform: uppercase; } /* =============================================================================================== On Page Components - the placement and sizing of components on the page Including - font sizes - padding - alignment - width - height - line height - margins =============================================================================================== */ .cbt-skin .cbt-pagewidth { width: 800px; } .cbt-skin #Centered-Page { margin-top: 15px; } /* CBT design requires small gap at top */ .cbt-skin { font-size: 12px; } .cbt-skin h1 { font-size: 12px; } .cbt-skin h2 { font-size: 12px; } .cbt-skin h3 { font-size: 12px; } .cbt-skin p { font-size: 11px; margin-top: 10px; line-height: 18px; } .cbt-skin table { font-size:10px; margin-top: 20px; } .cbt-skin table .tablecolumn1 { width: 100px; } .cbt-skin .band { height: 10px; } .cbt-skin #Logo { padding: 10px 10px 10px 10px; float: left;} .cbt-skin #Content { float: left; width: 100%; } /* Hack required to display background image */ .cbt-skin #Content li { line-height:16px; } .cbt-skin #Footer { height: 25px; width: 800px; } .cbt-skin #Footer-Left { float: left; font-size:9px; width: 400px; padding-left: 5px; padding-top: 5px; } .cbt-skin #Footer-Right { float: right; font-size: 9px; text-align: right; line-height: 12px; padding-right: 5px; padding-top: 5px; } .cbt-skin .bar { height: 5px; width: 800px; } .cbt-skin #Masthead { height: 25px; width: 800px; } .cbt-skin #Mainmenu { font-size: 11px; padding: 5px; height: 15px; } .cbt-skin #Submenu { font-size: 11px; padding-top: 10px; padding-right: 5px; height: 15px; margin-right:223px; } .cbt-galsplash #Submenu { font-size: 11px; padding-top: 10px; padding-right: 5px; height: 15px; margin-right: 223px; padding-bottom: 25px; } /* margin-right was 175 */ .cbt-gallery #Submenu { font-size: 11px; padding-top: 10px; padding-right: 5px; height: 15px; margin-right: 223px; padding-bottom: 25px; } /* margin-right was 175 */ .cbt-skin #Content .coltext { margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; } .cbt-galsplash #Content .coltext { margin-right: 0px; margin-left: 25px; margin-top: 0px; margin-bottom: 10px; width: 325px; } .cbt-gallery .coltext { margin-top: 15px; } .cbt-skin #Floater { margin-top: 100px; } .cbt-gallery .gallery-image { float: right; width: 400px; height: 400px; border: 1px solid black; } .cbt-galsplash #Floater { margin-top: 0px; width: 400px;} .cbt-skin #Floater p { padding-top: 0px; } .cbt-skin .slogan { padding-left: 50px; } .cbt-galsplash .slogan { padding-left: 0px; } .cbt-inside .slogan { padding-left: 0px; margin-left:-50px; margin-right:-100px; position: relative; } .cbt-gallery .slogan { margin-bottom: 0px; margin-top: 0px; padding-left: 0px; margin-left: -5px; } .cbt-skin .content-link { margin-top: 25px; } .cbt-gallery .content-link { margin-top: 0px; margin-right: 10px; } /* SRC changes for IE6 */ #About .slogan { margin-left: 0px; padding-top: 100px; } #About #Col1 { margin-top: 0px; } #About #Col2 { margin-top: 0px; } /* Content columns */ .cbt-skin #Col1 { float: left; width: 195px; } .cbt-gallery #Col1 { margin-top: 10px; } .cbt-inside #Col1 { margin-top: 50px; margin-left: 100px; width: 500px; } .cbt-skin #Col2 { float: left; width: 195px; } .cbt-gallery #Col2 { margin-top: 10px; } .cbt-inside #Col2 { margin-top: 25px; margin-left: 100px; width: 500px; } .cbt-skin #Col3 { float: right; width: 400px; padding: 0px; margin: 0px; } .cbt-gallery #Col3 { margin-top: -90px; } .cbt-gallery #Col3 .coltext { margin: 0px; margin-top: 15px; padding: 0px;} .cbt-skin #Floater { float: left; width: 250px; } .cbt-galsplash #Floater { margin-top: -80px; } .cbt-skin #Thumbnails { float: left; width: 365px; height: 150px; margin-right: 25px; margin-left: 5px; } .cbt-galsplash #Thumbnails { margin-top: 0px; } .cbt-gallery #Thumbnails { margin-top: 0px; margin-left: 5px; height: 200px; padding-right: 0px; } /* =============================================================================================== Page Specific Classes - configure each page - there should be next-to-nothing here if pages all have the same look-and-feel =============================================================================================== */