/* Theme Name: nswcardiology Theme Author URI: http://www.nswcardiology.com.au Description: 2012 theme for NSW Cardiology. Custom WordPress websites: www.chrismyersdesigns.com.au Author: Chris Myers and Pawel Author URI: http://www.chrismyersdesigns.com.au/ Version: 1.0 */ /** CSS RESET **/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /** SITE STYLES **/ body { -webkit-text-size-adjust: none; background-color:#191919;} h1, h2, h3, h4, p, a, li { font-family: Arial, Helvetica, sans-serif; margin:0; padding:0; text-decoration:none; outline:none; border:none;} h1 { font-size:16px; color:#1b75bb; margin:0 0 10px 0;} h1.doc { border-bottom:1px solid #ccc; padding:0 0 5px 0; margin:0;} h2 { font-size: 13px; color:#58595b; margin:0 0 7px 0;} p, li { font:13px 'CabinRegular', Arial, sans-serif; color:#6d6e71; line-height:140%; margin:0 0 7px 0;} p.credits { color:#1b75bb;} p.doc-cred { color:#aaa; font-size:10px; font-style:italic; margin:3px 0 7px 0;} a { text-decoration:none; outline:none; border:none; color:#1b75bb;} a:hover { color:#6d6e71;} ul, ol { margin-left:30px;} ul { list-style:url(images/arrow-list-red.png);} ol { list-style:decimal;} /** FONTS **/ @font-face { font-family: 'CabinRegular'; src: url('fonts/Cabin-Regular-webfont.eot'); src: url('fonts/Cabin-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Cabin-Regular-webfont.woff') format('woff'), url('fonts/Cabin-Regular-webfont.ttf') format('truetype'), url('fonts/Cabin-Regular-webfont.svg#CabinRegular') format('svg'); font-weight: normal; font-style: normal; } .bio-row-2 { padding-top:30px;} /** PAGE WRAPPERS **/ #wrapper-page { position:relative; margin:0; padding:0; background-color:#f5f5f5;} #wrapper-head { position:relative; background-color:#fff; width:100%; height:110px; } #wrapper-nav { position:relative; background:#414042 url(images/bg-nav.jpg) center top repeat-x; width:100%; height:65px;} #wrapper-bluebar { position:relative; background:url(images/bg-blue_bar.jpg) center top repeat-x; width:100%; height:25px;} #wrapper-slideshow { position:relative; height:313px; width:100%; background:url(images/ba-slider.png) top center repeat-x; border-bottom:1px solid #a7a9ac; } #wrapper-body { position:relative; height:auto; width:100%; background:url(images/bg-body-head.png) top center repeat-x; } #wrapper-footer { position:relative; width:100%; height:120px; background:#013d85; border-bottom:1px solid #003c84; clear:both; } /** SECTION INNERS **/ #inner-head, #inner-nav, #inner-body, #inner-slideshow, #inner-footer { position:relative; margin:0 auto; width:940px; padding:0 20px;} #inner-head { position:relative; height:110px;} #inner-nav { position:relative; height:65px;} #inner-slideshow { padding:0; height:313px;} #inner-body { position:relative; min-height:600px;} #inner-footer { position:relative; height:100px;} /** PAGE DIVS **/ /** logo **/ #logo { position:absolute; width:275px; height:81px; top:15px; left:15px;} #logo a, #logo a:hover { border:none;} /** header nav **/ #head-nav { width:200px; position:absolute; top:10px; left:755px; text-align:right;} #head-nav p, #head-nav p a, #head-nav a { color:#a7a9ac; font:11px 'CabinRegular', Arial, sans-serif; margin:0 5px;} #head-nav img { position:relative; top:4px;} #head-nav a:hover { color:#1b75bb;} /** main navigation **/ #main-nav { position:relative; z-index:900;} #main-nav ul { margin:0 auto; padding:0; list-style:none; text-align:center;} #main-nav ul li { display:inline-block; position:relative; padding:14px 20px 16px;} #main-nav ul li a { color:#bcbec0; font:14px 'CabinRegular', Arial, sans-serif; text-decoration:none; padding:14px 0 20px;} #main-nav ul li a:hover { color:#fff; border:none;} /*--- dropdown ---*/ #dropdown ul{ background-color:#414042; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */ list-style:none; position:absolute; left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ width:auto; padding:0 0 10px 10px; margin:0; -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; behavior: url(PIE.htc); border:2px solid #414042;} #dropdown ul li{ padding:4px 15px; margin:0; /* Introducing a padding between the li and the a give the illusion spaced items */ float:none; margin-right:0; line-height:120%; background:none; display:block; text-align:left; } #dropdown ul a{ /* Stop text wrapping and creating multi-line dropdown items */ padding:5px; font-weight:normal;white-space:nowrap; } #dropdown li:hover ul{ /* Display the dropdown on hover */ left:0px; top:65px; /* Bring back on-screen when needed */ padding-left:0; } #dropdown li:hover ul li { background: url(images/arrow-list-white.png) 8px 10px no-repeat;} #dropdown li:hover ul li:hover { background: #f5f5f5 url(images/arrow-list-red.png) 8px 10px no-repeat;} #dropdown li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ margin:0; color:#fff; } #dropdown li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */text-decoration:none; font-size:13px; padding:7px 10px; font-weight:normal; color:#fff;} #dropdown li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ color:#333; border-bottom:none; width:100%; } /** body **/ #sidebar, #main-content { position:relative; min-height:300px; margin:40px 0;} /** sidebar menu **/ #sidebar {float:left; width:200px;} #sidebar h1 { font-size:14px;} ul#side-menu { margin:0; padding:0;} ul.side-menu li { padding:3px 0; margin:0 0 0 7px;} ul.side-menu li a { padding:0; color:#6d6e71; padding:3px 0;} ul.side-menu li a:hover { border:none; color:#1b75bb;} /** main content **/ #main-content {float:right; width:700px;} #main-content a { color: #1b75bb;} #main-content ul { list-style: disc !important;} /** home bio **/ ul#h-bio { margin:20px 0; padding:0; list-style:none;} ul#h-bio li { width:200px; height:auto; display:inline; float:left; position:relative; background-color:#0870b8; margin:0 47px 20px 0;} ul#h-bio li:nth-child(3), ul#h-bio li:last-child { margin-right:0px;} ul#h-bio li img { width:200px; overflow:hidden;} div.h-bio-name { width:200px; background: url(images/arrow-white.png) 170px center no-repeat;} div.h-bio-triangle { width:33px; height:36px; position:absolute; top:113px; left:167px; background:url(images/bg-bio_triangle.png) no-repeat;} div.h-bio-name h1 { width:200px; padding:9px 15px 3px 15px; color:#fff; font:12px Arial, Helvetica, sans-serif; text-align:left !important; font-weight:bold;} /** call to actions **/ div.cta-btns { width:200px; height:40px; position:relative;} /** red **/ div.red-cta { width:200px; height:40px; background-color:#bc0711; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(PIE.htc); position:relative;} div.red-cta { background-position:10px center; background-repeat:no-repeat;} div.red-cta-text {width:200px; height:40px; position:absolute; top:0; left:0; background: url(images/arrow-grey.png) 165px 14px no-repeat;} div.red-cta h2 { width:200px; color:#fff; font-size:12px; height:40px; text-decoration:none; border:none; display:table-cell; vertical-align:middle; padding: 0 10px; line-height:120%; text-align:center;} /** grey **/ div.grey-cta { width:200px; height:40px; background-color:#414042;-webkit-border-radius: 5px; border-radius: 5px; behavior: url(PIE.htc); position:relative; margin:20px 0 7px 0;} div.grey-cta { background-position:10px center; background-repeat:no-repeat;} div.grey-cta-text {width:160px; height:40px; -webkit-border-radius:5px; border-radius:5px; behavior: url(PIE.htc); position:absolute; top:0; left:50px; background: #a7a9ac url(images/arrow-grey.png) 135px 14px no-repeat;} div.grey-cta-text h2 { color:#fff; font-size:12px; height:40px; text-decoration:none; border:none; display:table-cell; vertical-align:middle; padding: 0 20px; line-height:120%;} /** cta options **/ .consultation { background-image:url(images/icon-consult.png);} .consultation:hover { background-image:url(images/icon-consult-hover.png);} .slider-btn { background-image:url(images/icon-consult.png); position:absolute; top:0; z-index:1000; border:2px solid #fff;} .slider-btn:hover { background-image:url(images/icon-consult-hover.png);} .heart { background-image:url(images/icon-heart.png); background-position:15px center !important;} .heart:hover { background-image:url(images/icon-heart-hover.png);} .team { background-image:url(images/icon-team.png);} .team:hover { background-image:url(images/icon-team-hover.png);} .btn-sidebar { margin:20px 0;} .btn-float-r { position:relative; left:500px; margin:20px 0;} .btn-slider { position:absolute; left:600px; top:250px; z-index:1999;} /** slideshow imgs **/ #slideshow-imgs { height:313px; width:980px; position:absolute; margin:0 auto; overflow:hidden;} /** slideshow text **/ #slider-text { width:250px; height:130px; position:absolute; top:100px; left:50px; z-index:1000; padding:30px; background: url(http://nswcardiology.com.au/wordpress/wp-content/uploads/2013/05/slider-text-bg.png) left top repeat;} #slider-text h1 { font:16px Arial, Helvetica, sans-serif; color:#1b75bb; font-weight:bold;} #slider-text p { font:14px 'CabinRegular', Arial, sans-serif; color:#767676;} #slider-text img { float:right; margin:0 20px 0 0;} /** blog **/ div.blog-summ { height:auto; width:auto; clear:both; padding:0 0 30px 0; margin:0 0 30px 0; border-bottom:1px dotted #ccc; } div.blog-summ h2 a, div.blog-summ h2 a:hover { text-decoration:none; border-bottom:0 !important;} div.blog-summ p a { font-weight:bold; text-align:right; float:right; background:url(images/arrow-grey.png) center right no-repeat; padding:0 25px 0 0;} div.blog-summ p a:hover { border-bottom:0 !important;} /** Appoinment - contact Form **/ #appointment-form, #contact-form { margin:10px 0 0 0; width:700px; float:right;} #appointment-form p, #contact-form p { font-weight:bold;} #appointment-form label, #contact-form label { display:block; font:11px Arial, Helvetica, sans-serif; color:#666; text-align:right; width:700px; float:left; } #appointment-form input, #appointment-form .booking, #appointment-form .selectbox, #contact-form input, #contact-form .booking, #contact-form .selectbox { outline:none; float:left; font:12px Arial, Helvetica, sans-serif; color:#666; padding:4px 2px; border:solid 1px #ccc; width:325px; margin:2px 10px 10px 0; } #appointment-form .selectbox, #contact-form .selectbox { width:330px;} #appointment-form textarea, #contact-form textarea{ width:670px; resize:none; border:solid 1px #ccc;} /** Submit buttons **/ #appointment-form button, #contact-form button { background-color: #1B75BB; width: auto; height: auto; float:right; color: #fff; margin:0 20px 0 0; font-size: 12px; font-weight:bold; padding: 10px 20px; -webkit-border-radius:5px; border-radius:5px; behavior: url(PIE.htc); border:0; text-transform:uppercase;} #appointment-form button:hover, #contact-form button:hover { background-color: #999; color: #FFF; cursor:pointer;} /** footer **/ ul#footer-links { float:right; margin:0; padding:0; position:relative; top:30px;} ul#footer-links { margin:0; padding:0; list-style:none;} ul#footer-links li { display:inline; position:relative; float:left; border-right:1px solid #fff;} ul#footer-links li p { font:11px Arial, Helvetica, sans-serif; color:#fff; margin:0 10px; padding:0;} ul#footer-links li a { font:11px Arial, Helvetica, sans-serif; color:#fff; margin:0; padding:0; border:none;} ul#footer-links li.li-nodivider { border-right:none; margin:0 5px;} div.copyright { position:absolute; top:80px; right:20px;} div.copyright p, div.copyright p a { color:#0971b8; font:9px Arial, Helvetica, sans-serif; text-align:right;} /** PAGE CLASSES **/ .team-shortbios { padding:20px 0; border-bottom:1px dotted #ccc;} .clearfix { width:100%; height:0px; clear:both !important;} img.alignright {float:right; margin:0 0 0 15px; padding:2px; border:1px solid #bcbec0; background-color:#f5f5f5;} img.alignleft {float:left; margin:0 15px 0 0; padding:2px; border:1px solid #bcbec0; background-color:#f5f5f5;} img.aligncenter {display: block; margin-left: auto; margin-right: auto; padding:2px; border:1px solid #bcbec0; background-color:#f5f5f5;} .alignright {float:right; margin:0 0 0 15px; } .alignleft {float:left; margin:0 15px 0 0; } .aligncenter {display: block; margin-left: auto; margin-right: auto}