/* ============================= */ /* mrwyatt.co.uk CSS */ /* ============================= */ /* ============================= */ /* General Styles */ /* ============================= */ * { margin:0px; padding:0px; border:0px; } body { background-color:#ffffff; font-family:arial, verdana, sans-serif, sans; font-size:62.5%; color:#f3f4f4; margin:15px 0px 15px 0px; background-image: url(../images/background2.gif); } body a:link { color:#f3f4f4; text-decoration:none; } body a:visited { color:#f3f4f4; text-decoration:none; } body a:hover { color:#939598; text-decoration:none; } body a:active { color:#f3f4f4; text-decoration:none; } p { margin:0px; padding:0px 0px 10px 0px; font-size:1.1em; line-height:1.4em; } p.nomargin { margin:0px; padding:0px; font-size:1.2em; line-height:1.4em; } .left { float:left; } .right { float:right; } .clear { clear:both; line-height:0px; height:0px; font-size:0px; } .bold { font-weight:bold; } .italics { font-style:italic; } .invisible { visibility:hidden; } .hidden { display:none; } .block { display:block; } input, textarea { font-family:arial, verdana, sans-serif, sans; font-size:62.5%; } .align-right { text-align:right; } .align-center { text-align:center; } h1 { border-bottom:2px solid #f3f4f4; margin:0px 0px 0px 0px; } h2 { font-size:2.6em; font-weight:normal; padding:0px 0px 20px 0px; } h2.welcome { font-size:7.0em; font-weight:normal; padding:0px; line-height:0.9em; } h3 { font-size:1.8em; font-weight:normal; } h3 span { color: #FFFF03; font-weight:bold; } /* ============================= */ /* Global Styles */ /* ============================= */ #container { width:912px; height:auto; margin:0 auto; background-color:#FFFFFF; padding:15px; } #container div { background-color:#FFFFFF; } #column1 { width:168px; height:auto; padding:18px 40px 0px 0px; float:left; } #column2 { width:127px; height:auto; padding:18px 0px 0px 0px; float:left; } #column3 { width:507px; height:auto; padding:18px 0px 0px 40px; float:left; } #column2 #portfoliomenu { height:322px; border-bottom:2px solid #f3f4f4; } #column2 ul li { float:left; list-style:none; } #column2 ul li a { margin:0px 2px 2px 0px; display:block; height:39px; width:39px; background-repeat:no-repeat; border:1px solid #ffffff; } #column2 ul li a span { display:none; } #column2 ul li a.last { margin:0px 0px 2px 0px; } #column2 ul li a.on { border:1px solid #06C5F9; } #column2 ul li a.allon { background-position:bottom; } #column2 ul li a.galileo { background-image: url(../images/portfolio_galileo.jpg); } #column2 ul li a.unilever { background-image: url(../images/portfolio_unilever.jpg); } #column2 ul li a.er { background-image: url(../images/portfolio_er.jpg); } #column2 ul li a.bbc { background-image: url(../images/portfolio_bbc.jpg); } #column2 ul li a.cafcass { background-image: url(../images/portfolio_cafcass.jpg); } #column2 ul li a.argent { background-image: url(../images/portfolio_argent.jpg); } #column2 ul li a.bandaar { background-image: url(../images/portfolio_bandaar.jpg); } #column2 ul li a.bt { background-image: url(../images/portfolio_bt.jpg); } #column2 ul li a.sony { background-image: url(../images/portfolio_folklore.jpg); } #column2 ul li a.rbs { background-image: url(../images/portfolio_rbs.jpg); } #column2 ul li a.vessey { background-image: url(../images/portfolio_vessey.jpg); } #column2 ul li a.inbuilt { background-image: url(../images/portfolio_inbuilt.jpg); } #column2 ul li a.css { background-image: url(../images/portfolio_css.jpg); } #column2 ul li a.barclays { background-image: url(../images/portfolio_barclays.jpg); } #column2 ul li a.gottabet { background-image: url(../images/portfolio_gottabet.jpg); } #column2 ul li a.carousel { background-image: url(../images/portfolio_carousel.jpg); } #column2 ul li a.kinnect { background-image: url(../images/portfolio_kinnect.jpg); } #column2 ul li a.stjohn { background-image: url(../images/portfolio_stjohn.jpg); } #column2 ul li a.unit18 { background-image: url(../images/portfolio_unit18.jpg); } #column2 ul li a.orchestra { background-image: url(../images/portfolio_orchestra.jpg); } #column2 ul li a.jll { background-image: url(../images/portfolio_jll.jpg); } #column2 ul li a.hairgarage { background-image: url(../images/portfolio_hairgarage.jpg); } #column2 ul li a.oneworld { background-image: url(../images/portfolio_oneworld.jpg); } #column2 ul li a.jewellery { background-image: url(../images/portfolio_jewellery.jpg); } #column2 ul li a.dacr { background-image: url(../images/portfolio_dacr.jpg); } #column2 ul li a.bulldog { background-image: url(../images/portfolio_bulldog.jpg); } #column2 ul li a.thumbr { background-image: url(../images/portfolio_thumbr.jpg); } #column2 ul li a:hover { background-position:bottom; } #column2 #companylogo { height:70px; padding:10px 0px 10px 0px; margin:0px; } #column3 #contact-tab { height:322px; border-bottom:2px solid #f3f4f4; } #column3 #contact-tab p { font-size:2.6em; } #column3 #contact-tab span { font-size:1.6em; display:block; } #column3 #contact-tab span.top { font-size:1.6em; display:block; margin:40px 0px 10px 0px; } #column3 #contact-tab span span { font-size:1.0em; color:#FF009E; display:inline; font-weight:bold; } #column3 #contact-tab a, #column3 #contact-tab a:link, #column3 #contact-tab a:visited, #column3 #contact-tab a:active { color:#939598; } #column3 #contact-tab a:hover { color:#FF009E; } #column3 #news-tab { height:322px; border-bottom:2px solid #f3f4f4; } #column3 #links-tab { height:322px; border-bottom:2px solid #f3f4f4; } #column3 #links-tab ul { list-style:none; font-size:2.0em; line-height:1.8em; } #column3 #links-tab a { color:#939598; } #column3 #links-tab a:link { color:#939598; } #column3 #links-tab a:visited { color:#939598; } #column3 #links-tab a:active { color:#939598; } #column3 #links-tab a:link span.blue { color:#939598; } #column3 #links-tab a:link span.yellow { color:#939598; } #column3 #links-tab a:hover span.blue { color:#06C5F9; } #column3 #links-tab a:hover span.yellow { color:#FFFF03; } #column3 #links-tab a:hover { color:#FF009E; } #column3 #links-tab a span { color:#939598; font-weight:bold; } #column3 #bio-tab { height:322px; border-bottom:2px solid #f3f4f4; } #column3 #portfolio-tab #portfolio-content { height:322px; border-bottom:2px solid #f3f4f4; } #column3 #portfolio-tab #portfolio-footer { padding:20px 0px 0px 10px; } .content-on { color:#939598; } .pink { color:#FF009E; } .blue { color:#06C5F9; } .yellow { color:#FFFF03; } #portfoliomenu a, #portfolio-content a { color:#939598; } #portfoliomenu a:link, #portfolio-content a:link { color:#939598; } #portfoliomenu a:visited, #portfolio-content a:visited { color:#939598; } #portfoliomenu a:hover, #portfolio-content a:hover { color:#06C5F9; } #portfoliomenu a:active, #portfolio-content a:active { color:#939598; } #portfolio-content a.on { color:#06C5F9; } #welcome-text { padding:95px 0px 0px 0px; } /* ============================= */ /* Navigation Styles */ /* ============================= */ #navigation { border-bottom:2px solid #f3f4f4; } #navigation ul#menu { font-size:1.4em; list-style:none; color:#e7e8e9; } #navigation ul#menu li { float:left; } #navigation ul#menu li a { float:left; height:48px; display:block; background-repeat:no-repeat; } #navigation ul#menu li a span { display:none; } #navigation ul#menu li a:hover, #navigation ul#menu li a.on { background-position:bottom; } #navigation ul#menu li#menu-bio a { width:58px; margin-right:150px; background-image: url(../images/menu_bio.gif); } #navigation ul#menu li#menu-portfolio a { width:125px; margin-right:211px; background-image: url(../images/menu_portfolio.gif); } #navigation ul#menu li#menu-contact a { width:120px; background-image: url(../images/menu_contact.gif); margin-right:20px; } #navigation ul#menu li#menu-news a { width:90px; background-image: url(../images/menu_news.gif); margin-right:20px; } #navigation ul#menu li#menu-links a { width:88px; background-image: url(../images/menu_links.gif); } /* ============================= */ /* Misc Styles */ /* ============================= */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }