/* ©2010 Bam Creative Title : style.css Author : NAME | Bam Creative Description : Main Stylesheet */ /* GLOBAL SETTINGS------------------------------------- GLOBAL SETTINGS */ html { } body { font-family: "museo-sans", Arial; font-size: 1em; /* MASTER font-size controller */ color: #403e37; /* MASTER text colour controller */ } body #footer.section{ height:345px; } body.sub-s #footer.section{ height:200px; } #subForm span.small{ font-size:0.9em; color:#ccc; } body.sub-s { color:#eceded; background:url(../../art/body-bg.png) repeat; } body.sub-s #content { font-size:0.9em; } /*-- this controls the tinymce area --*/ .mceContentBody { background-image: none; background-color: #fff; font-size:0.9em; } .sub-s .inner-wrap { padding-bottom:10px; } strong { color:#fff; } .mceContentBody strong { color:#000; } /* LINKS -------------------------------------------------------- LINKS */ a { color:#999; text-decoration:none; } a:hover { color:#808080; text-decoration:none; } /* HEADINGS -------------------------------------------------- HEADINGS */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; } h2, h3, h4, h5, h6 { padding-top:0.7em; } .sub-s h1 { font-size: 2.1em; color:#969696; text-transform:uppercase; font-weight:500; letter-spacing:-1px; text-shadow: 1px 1px #222; padding-top:35px; } h2 { font-size: 1.70em; } h3 { font-size: 1.4em; font-weight: 600; } h4 { font-size: 1.3em; line-height: 1.2em; font-weight: bold; } h5 { font-size: 1.2em; font-weight: bold; padding-bottom: 0.2em; } h6 { font-size: 1em; font-weight: bold; padding-bottom: 0.2em; } /* PARAGRAPHS ---------------------------------------------- PARAGRAPHS */ p { font-size: 100%; line-height: 1.4em; padding:0.3em 0 0.75em 0; } .sub-s .inner-wrap p { padding-bottom:0px; margin-bottom:20px; } ::selection { background:#ec8335; /* Safari */ color:#fff; } ::-moz-selection { background:#ec8335; /* Firefox */ color:#fff; } .underlines { background:url(../../art/hr.gif) repeat-x; height:2px; width:980px; display:block; clear:both; } span.small{ font-size:0.9em; } /* LISTS -------------------------------------------------------- LISTS */ ul, ol { padding:0 0 1.25em 2.5em; } body#tinymce li { font-size: 100%; line-height: 1.6em; list-style:circle; } #content ul li { font-size: 100%; line-height: 1.5em; list-style:disc; } #content ol li { font-size: 100%; line-height: 1.6em; } /*-- nested lists --*/ #content ul ul, body#tinymce ul ul { padding: 0 0 0 1.5em; } #content ol ol, body#tinymce ol ol { padding: 0 0 0 1.5em; } /* HOME LAYOUT ------------------------------------------------------ LAYOUT */ .gmap{ width:500px; height:570px; } #navigation-container { background: none repeat scroll 0 0 #FFFFFF; /*padding-top: 65px;*/ text-align: center; width: 100%; height:120px; } .inner-wrap { margin:0 auto; width:980px; position:relative; } #section-one { padding: 0px; background: url(/art/home-slides/trcb-intro.jpg) top center no-repeat; position: relative; z-index: 6; height:801px; overflow: visible !important; } .grey-rep { width: 100%; height:230px; background:url(../../art/footer-bg.png) repeat-x; /*margin-top:470px;*/ position:absolute; top:616px; } .grey-rep p { color:#fff; text-shadow: 1px 1px #222; margin:20px auto 0 auto; width:500px; } .arrow { background:url(../../art/arrow.png) no-repeat center top; margin:0 auto; display:block; height:32px; width:65px; position:absolute; top:586px; z-index:9; left:456px; } .hello { margin:0 auto; width:140px; padding-top:512px; } .hello p { background:url(../../art/hello.png) repeat-x; padding:8px 0px; text-align:center; line-height:normal; width:140px; font-weight:300; font-size:2.5em; } p.what span { vertical-align:sub; padding-left:5px; } p.what a { text-align:center; font-size:1.2em; font-weight:300; color:#808080; font-style:italic; margin-top:0px; text-decoration:none; } p.what a:hover { color:#999; } .rss { float:right; margin-top:19px; } .col-three h2 { float:left; } .map { float:right; margin-top:100px; } .map a.link { color:#969696; margin-top:5px; display:block; text-decoration:none; } .map a.link:hover { color:#fff; } .section { overflow: hidden; height: 900px; } /* SECTION 2 ------------------------------------------------------ SECTION 2 */ #section-two { padding: 0px; background: #000 url(/art/home-slides/slide-two-big.jpg) top center no-repeat; position: relative; z-index: 5; } #section-two h1 { text-align:left; background:#e9e8e8; color:#403e37; font-weight:300; text-transform:uppercase; padding:12px 20px 10px 20px; margin-bottom:30px; width:250px; float:left; margin-top:70px; } .content-two { position:absolute; top:265px; width:828px; left:0px; } #section-two p { text-align:left; font-weight:500; color:#020400; width:600px; float:left; } .content-two a.orange { float:left; } /* SECTION 3 ------------------------------------------------------ SECTION 3 */ #section-three { padding: 0px; background: #000 url(/art/home-slides/CurtinUniversityLibraryWeb.jpg) top center no-repeat; position: relative; z-index: 4; } #section-three h1 { text-align:left; background:#e9e8e8; color:#403e37; font-weight:300; text-transform:uppercase; padding:12px 20px 10px 20px; margin-bottom:30px; width:210px; float:left; top:584px; position:absolute; } .content-three { position:absolute; top:765px; top:680px; width:828px; left:0px; } #section-three p { text-align:left; font-weight:300; color:#fff; width:620px; float:left; padding-bottom:0px; text-shadow: 1px 1px #000; } .content-three a.orange { margin-top:50px; } /* SECTION 4 ------------------------------------------------------ SECTION 4 */ #section-four { padding: 0px; background: #000 url(/art/home-slides/retail-resized.jpg) top center no-repeat; position: relative; z-index: 3; } .content-four h1 { text-align:left; background:#e9e8e8; color:#403e37; font-weight:300; text-transform:uppercase; padding:12px 20px 10px 20px; margin-bottom:30px; width:122px; float:left; } .content-four { position:absolute; top:540px; width:608px; left:0px; } #section-four p { text-align:left; font-weight:300; color:#fff; width:570px; float:left; padding-bottom:0px; text-shadow: 1px 1px #000; } .gbg { background:rgba(0,0,0,0.6); display:inline-block; padding:20px 22px; overflow:auto; } .gbg p { color:#fff !important; } /* SECTION 5 ------------------------------------------------------ SECTION 5 */ #section-five { padding: 0px; background: #000 url(/art/home-slides/schools-resized3.jpg) bottom center no-repeat; position: relative; z-index: 2; } .content-five h1 { text-align:right; background:#e9e8e8; color:#403e37; font-weight:300; text-transform:uppercase; padding:12px 20px 10px 0px; margin-bottom:17px; width:196px; float:right; } .content-five { position:absolute; top:60px; width:608px; width:651px; right:0px; } #section-five p { text-align:right; font-weight:300; color:#fff; width:608px; float:right; text-shadow: 1px 1px #000; } /* SECTION 6 ------------------------------------------------------ SECTION 6 */ #section-six { padding: 0px; background: #252525 url(/art/home-slides/hospitality-resized.jpg) top center no-repeat; position: relative; z-index: 1; color:#fff; } #section-two, #section-three, #section-four, #section-five, #section-six { font-size:1.1em; } #section-six p { text-align:right; font-weight:300; width:250px; float:right; } .content-six { position:absolute; top:200px; width:268px; width:287px; right:0px; } .content-six h1 { text-align:right; background:#e9e8e8; color:#403e37; font-weight:300; text-transform:uppercase; padding:12px 20px 10px 0px; margin-bottom:17px; } .fleft { float:left; } .fright { float:right; } a.orange { padding:6px 16px; background:#ec8335; color:#fff; display:block; width:auto; text-decoration:none; } a.orange:hover { background:#2d2d2d; } a.greybtn { padding:6px 16px; background:#2b2b2b; color:#fff; display:block; width:auto; text-decoration:none; } a.greybtn:hover { background:#ec8335; } /* SECTION 7 ------------------------------------------------------ SECTION 7 */ #section-seven { float:left; margin:10px 0 10px 0; } #section-eight { float:right; margin:10px 0 10px 0; } /* NEWS ------------------------------------------------------ NEWS STYLES */ .article-listing { width:236px; float:left; background:#3b3b3b; postion:relative; } .article-listing p { font-size:0.95em; } .news-thumb { clear:both; } .art-wrap { width:236px; float:left; margin-right:9px; margin-top:5px; } .article-short-content { padding:15px; } .base { margin-bottom:20px; z-index:1; } .sub-s .inner-wrap p.article-heading { text-transform:uppercase; padding-bottom:0.3em; margin-bottom:5px; } .sub-s .inner-wrap h1 { margin-bottom:10px; } .basewrap { position:relative; } .article-heading a { color:#eceded; text-decoration:none; border-top:2px #49494a solid; border-bottom:2px #49494a solid; width:206px; display:block; padding-top:5px; padding-bottom:5px; margin-top:5px; } .article-heading a:hover { color: #6a6a6b; } a.round { background:url(/art/round.png) no-repeat; width:52px; height:53px; margin:0 auto; color:#fff; display:block; position:absolute; top:0px; left:91px; text-decoration:none; padding-top:12px; font-size:0.9em; line-height:0.9em; text-align:center; } .article-image { float:right; margin-left:20px; margin-bottom:20px; } /* PROJECTS ------------------------------------------------------ PROJECTS STYLES */ .gallery-categories { background:url(../../art/projects-nav.png) no-repeat; width:980px; height:49px; display:block; margin-bottom:25px; } .gallery-categories a { color:#fafbfb; text-decoration:none; background:#333232; padding:8px 12px; display:block; float:left; margin:9px 0px 0px 8px; } .gallery-categories a:hover, .gallery-categories a.active { background:#4d4b4b; } .gallery-category-top span { color:#333; } #staff-gallery.gallery-images a { height:180px; width:180px; margin: 7px 7px 0px 0px; } .gallery-image { overflow: visible; width:235px; height:235px; } #staff-gallery .gallery-image{ height:180px; width:180px; } .admin .gallery-image{ width:auto !important; height:auto !important; } .gallery-images a { -webkit-box-shadow:0 0 7px #2b2a2a; -moz-box-shadow: 0 0 7px #2b2a2a; box-shadow:0 0 7px #2b2a2a; width:235px; height:235px; display:block; } .gallery-images a:hover { -webkit-box-shadow:0 0 7px #181818; -moz-box-shadow: 0 0 7px #181818; box-shadow:0 0 7px #181818; } a.gallery-item { display: block; background: #f4f4f4; padding: 6px; border-radius: 4px; text-decoration: none; margin-bottom: 8px; } a.gallery-item span.gallery-name { display: block; font-size: 1.2em; font-weight: bold; color: #000; text-decoration: underline; } a.gallery-item span.gallery-desc { color: #000; } div.gallery-category-top { border-bottom: 1px solid #CCCCCC; background: #F9F9F9; padding: 5px 10px; font-size: 13px; display: block; } div.gallery-category { border: 1px solid #CCCCCC; margin-bottom: 8px; } div.gallery-category-images { padding: 5px 8px 5px 0; background: #fff; } .button-mini { font-size: 0.85em; margin-top: -2px; padding: 2px 5px; } .cat-placeholder { background: #DEE6EF; border: 1px dotted #8FA8C4; margin-bottom: 8px; } .image-placeholder { background: #DEE6EF; border: 1px dotted #8FA8C4; /*width: 100px;*/ float: left; margin-left: 8px; margin-bottom: 8px; } .gallery-image { display: block; float: left; /*width: 100px;*/ margin-left: 8px; margin-bottom: 8px; margin-top: 8px; } .gallery-image img { display: block; margin: 0 auto 5px auto; /*border: 1px solid #000;*/ text-align: center; } .gallery-image span { display: block; font-size: 0.85em; text-align: center; font-weight: bold; } .image-content { float:left; width:250px; } .image-additional-images { float:right; width:80px; margin-left:10px; } .image-picture { float:right; margin-bottom:30px; width:620px; } .image-picture img { margin-bottom:8px; } .image-picture.staff { width:450px !important; } .image-additional-images img { margin-bottom:8px; } a.return { position:absolute; right:0px; top:35px; display:block; background:#2d2d2d; color:#ebe9e9; padding:7px 15px; text-decoration:none; } a.return:hover { background:#919191; } .image-top{ margin-bottom:20px; } a.return-2 { position:absolute; right:10px; top:38px; display:block; background:#2d2d2d; color:#ebe9e9; padding:7px 15px; text-decoration:none; } a.return-2:hover { background:#919191; } a.return-3 { position:absolute; right:63px; top:38px; display:block; background:#2d2d2d; color:#ebe9e9; padding:7px 15px; text-decoration:none; } a.return-3:hover { background:#919191; } .articles-paginator { color:#919191; } .articles-paginator a { color:#fff; text-decoration:none; } .articles-paginator a:hover { color:#919191; } a.return-4 { position:absolute; right:0px; top:38px; display:block; background:#2d2d2d; color:#ebe9e9; padding:7px 15px; text-decoration:none; } a.return-4:hover { background:#919191; } /* FOOTER ------------------------------------------------------ FOOTER STYLES */ #footer h2 { color:#808080; text-shadow: 1px 1px #000; padding-top:18px; text-transform:uppercase; } .col-one, .col-two, .col-three { float:left; width:309px; height:270px; margin: 10px 0px 20px 0px; } .col-one, .col-two { margin-right:26px; } .col-one .underlines, .col-two .underlines, .col-three .underlines { width:100%; margin-bottom:10px; } /* Newsletter ------------------------------------------------------ Newsletter */ .n-form { background:#383838; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:23px 20px 20px 20px; color:#ebebeb; } .n-form input { background:#2b2b2b; border:none; color:#ebebeb; WIDTH:250PX; padding:8px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom:10px; } form#ContactForm { float:left; } form#ContactForm input.submit { float:left; margin-bottom:20px; width:130px; margin-left:239px; } form#ContactForm input, form#ContactForm textarea { width:350px; } input.submit { color:#fff; background:#2b2b2b; cursor:pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border:none; padding:6px 9px; FLOAT:RIGHT; margin-top:10px; font-family: "museo-sans", Arial; font-size:1em; } input.submit:hover { background:#ec8335; } a.greybtn { padding:6px 16px; background:#2b2b2b; color:#fff; margin-top:10px; display:block; width:auto; float:right; text-decoration:none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #footer a.greybtn:hover { background:#ec8335; color:#fff; } /* LAYOUT ------------------------------------------------------ LAYOUT */ a.logo { float:right; } #container { /*width:980px;*/ background:url(../../art/footer-bg.png) repeat-x; margin: 0 auto; position: relative; } #page-content { /* all bamCMS content goes inside here: shouldn't need styling really */ } #footer { background:url(../../art/footer-bg.png) repeat-x top; position:relative; /*height:820px;*/ padding-bottom:10px; } #footer a { color:#fff; text-decoration:none; } #footer a:hover { color:#979696; text-decoration:none; } .copyright { float: left; color:#979696; font-size:0.9em; padding-top:8px; } .credits { float: right; padding-top:8px; font-size:0.9em; color:#979696; } #footer a.b-top { position:absolute; right:0px; top:10px; vertical-align:middle; font-size:1.2em; font-weight:300; color:#808080; font-style:italic; margin-top:0px; } #footer a.b-top:hover { color:#808080; } .b-top span { vertical-align:sub; padding-left:5px; margin-bottom:-5px; } /* TABLES ------------------------------------------------------ TABLES */ /*-- data table --*/ table.custom-data-table { border: 1px solid #545454; border-bottom: none; border-right: none; width: 100%; } table.custom-data-table th, table.custom-data-table td { border-right: 1px solid #545454; border-bottom: 1px solid #545454; padding: 10px; text-align: center; line-height: normal; } table.custom-data-table th { background-color: #2b2b2b; font-size: 1.2em; font-weight: bold; color: #fff; line-height: normal; } table.custom-data-table td { color: #eceded; background:#383838; font-size: 12px; text-align: left; } table.custom-data-table td.right { text-align: right; } /* SEARCH ----------------------------------------------------- SEARCH */ form#searchform input.term { background: none repeat scroll 0 0 #373636; border: medium none; border-radius: 3px 3px 3px 3px; color: #EBEBEB; margin-bottom: 10px; padding: 8px 5px; width: 250px; } form#searchform input.search { background: none repeat scroll 0 0 #2B2B2B; border: medium none; border-radius: 3px 3px 3px 3px; color: #FFFFFF; cursor: pointer; font-family: "museo-sans", Arial; font-size: 1em; margin-top: 10px; padding: 6px 9px; } form#searchform input.search:hover { background:#ec8335; } /* MISC --------------------------------------------------------- MISC */ hr { background: #ccc;/*NS FF OP */ color: #ccc;/*IE*/ border: none;/*FF NS OP*/ height: 1px;/*FF NS OP*/ width: 100%; } /* FORMS -------------------------------------------------------- FORMS */ /* No generic form styling can be applied here as it causes too many problems with Bamcms admin area. Instead, use classes or ids on forms to style. For more information refer to the CSS and XHTML Best Practices Manual */ /* FORMHELP STYLING Every input is surrounded by a div with class "input" as well as a class representing the type of input. Eg. for a textarea - the div is class="input textarea". This behaviour can be overwritten. See Bam Wiki for more details. */ div.input { margin-bottom: 10px; } div.input input, div.input select { background:#2b2b2b; border:none; color:#ebebeb; WIDTH:250PX; padding:8px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom:3px; font-size:14px; } div.input textarea { font-family: "museo-sans", Arial; background:#2b2b2b; border:none; color:#ebebeb; WIDTH:250PX; padding:8px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom:10px; font-size:14px; } div.input label { display: block; margin-bottom: 3px; } div.input label.radio_option, div.input label.checkbox_option { display: inline; } .message-error { color: #f37550; font-size:0.9em; font-style:italic; margin-top:-1px; } /* CUSTOM CLASSES -------------------------------------- CUSTOM CLASSES */ .clear { clear: both; } .float-right { float: right; } .float-left { float: left; } .twitter-timeline { float:right; margin-bottom: 10px!important; margin-top: 20px!important; } #twitter-widget-0 { width:88% !important; } .bird { background:url(/art/twitter-bird.png) no-repeat; width:115px; height:81px; display:block; float:right; margin-top:29px; margin-right:-1px; } .twtr-hd { display:none; } #twtr-widget-1 .twtr-timeline { /*padding:10px; height:120px;*/ } /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ /* .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }*/ .grey-rep p { padding-top:0px; margin-top:5px; margin-bottom:0px; padding-bottom:5px; text-align:center; } .grey-rep h1 { text-align:center; padding-bottom:0px; color: #fff; font-size:1.5em; padding-top:15px; margin-bottom:0px; } .tooltip { position: absolute; /*top: 40px; left: -50px;*/ z-index: 9999; display: none; background: transparent url(/art/tip-bg.png) repeat 0 0; color: #fff; padding: 15px !important; border-radius: 0 0 3px 3px; width: 150px; letter-spacing:0px; font-size:0.75em !important; } .projects-body .tooltip { width: 180px; border-radius: 0 3px 3px 0 !important; } .projects-body .tooltip a, .projects-body .tooltip a:hover { box-shadow: none !important; display: inline; height: auto; width: auto; } .image-content.staff-content { width:500px; }