/* SmithChiropractics ---------------------------------------------------- Author: William Åström - www.williamastrom.se Email: william@williamastrom.se Date: 2011-09-01 ------------------------------------------------------------------------ The Blue link color: color:#3389c2; The front page paragraph color: #color#323232; Callbutton: color:#ec2424; /* 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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;} @font-face { font-family: 'ChunkFiveRegular'; src: url('fontface/Chunkfive-webfont.eot'); src: url('fontface/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('fontface/Chunkfive-webfont.woff') format('woff'), url('fontface/Chunkfive-webfont.ttf') format('truetype'), url('fontface/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MuseoSlab500'; src: url('fontface/museo_slab-webfont.eot'); src: url('fontface/museo_slab-webfont.eot?#iefix') format('embedded-opentype'), url('fontface/museo_slab-webfont.woff') format('woff'), url('fontface/museo_slab-webfont.ttf') format('truetype'), url('fontface/museo_slab-webfont.svg#MuseoSlab500') format('svg'); font-weight: normal; font-style: normal; } /* Website Format --------------------------------------------------------- */ body { background: #fff url('../images/contentbackground.png') repeat-x center top; } #container { width: 960px; margin: 0 auto; } #header { height: 60px; overflow: hidden; } #branding,#frontpage h1#branding { width:620px; line-height: 60px; font-size:30px;float:left; margin: 0px 10px 0 0; padding:0px; background: none; text-transform:none;} #branding span {color:#3389c2;} #phoneus {width:300px; float:right;} #navbar-aside {height: 32px; overflow: hidden; float: left;} #navbar-aside { width: 300px; margin: 0 10px; } #navbar-aside p {font-size:12px;line-height:30px; margin:0px; width:280px; float:left;} #navbar-aside .top-social { background-image: url(../images/sprite.png); display:block;} #navbar-aside #top-soc-facebook { background-position: 0px -288px; } #navbar-aside #top-soc-twitter { background-position: 0px -315px; } #navbar-aside #top-soc-twitter,#navbar-aside #top-soc-facebook { width:16px; height:16px;float:right; margin: 8px 5px 0 0; overflow:hidden; } #content { width: 960px; margin:0 0 20px; overflow:hidden;} #content .alpha, #content .beta {margin:00px 10px; float:left; } #content .alpha { width: 540px; } #content .beta { width: 300px; margin-left: 90px; } #footer { margin:20 auto 0; background: #323232; overflow: hidden;} #footer .inner { margin:10px auto; width:960px; overflow: hidden; } #footer .alpha, #footer .beta, #footer .gamma { width: 300px; margin: 0 10px; float: left; } #footer .gamma .social-icons { background-image: url(../images/sprite.png); display:block; float:left; margin:0 20px 0 0; } #facebook { background-position: 0px -100px; width:32px; height: 32px; } #twitter { background-position: 0px -226px; width:32px; height: 32px; } #linkedin { background-position: 0px -184px; width:32px; height: 32px; } #youtube { background-position: 0px -142px; width:32px; height: 32px; } .clearfix {clear:both;} .column940 { width: 940px; margin: 0 auto; } .aside {background-color:#f3f3f3; overflow:auto; margin-top:30px;} /* Typography --------------------------------------------------------- */ h1,h2,h3,h4 { font:20px/1 ChunkFiveRegular,arial,helvetica,sans-serif; } h1,h2 {padding:10px 20px; margin: 30px 0 10px; background: url(../images/titlebackground.png); text-transform:uppercase;} h1 { font-size: 30px; } h2 { font-size: 22px; padding: 15px 20px 13px; } .aside h2 {margin-top:0px;} h3 {font:19px/1 MuseoSlab500,arial,helvetica,sans-serif; margin:30px 0 10px; } #phoneus h3 {font:22px/1 ChunkFiveRegular,arial,helvetica,sans-serif;} p,ul,label,input,textarea { margin:10px 0 20px; font:14px/1.5 MuseoSlab500,arial,helvetica,sans-serif;} p.intro {font-size:16px;} .aside p {margin:10px 10px 20px;} #footer p { /* SET WHITE SHADOW UNDER TEXT IN FOOTER */ text-shadow: 0px 0px 0px #555; color:#eee; } p+p { margin-top: 20px;} #phoneus h3 { color:#3389c2;margin:0px; text-transform:uppercase; line-height:60px;} #phoneus h3 span { color:#323232;} a {text-decoration:none; color:#3389c2;} a:hover,a:active {color:#323232;} h1,h2{ /* SET WHITE SHADOW UNDER TEXT */ text-shadow: 1px 2px 0px #fff; } h3,h4,p,ul,li,label{ /* SET WHITE SHADOW UNDER TEXT */ text-shadow: 1px 2px 0px #fff; } #footer ul { /* SET WHITE SHADOW UNDER TEXT IN FOOTER */ text-shadow: 0px 1px 0px #555; } #footer h3{ /* SET WHITE SHADOW UNDER TEXT IN FOOTER */ text-shadow: 0px 1px 0px #222; margin:10px 0; color:#3389c2; font-size:16px; } strong {font-weight:700;} /* Drop Down Menu --------------------------------------------------------- */ #nav{ list-style:none; margin-bottom:10px; /* Clear floats */ float:left; width:620px; position:relative; z-index:999; margin:5px 10px 0; } #nav li{ float:left; margin-right:10px; } #nav a{ border-right:1px solid #bbb; display:block; padding:0 10px 0 0; color:#323232; text-decoration:none; } #nav a:hover{ color:#3389c2; text-decoration:underline; } /*--- DROPDOWN ---*/ #nav ul{ margin-top:0px; padding:0px 0; background:#f5f5f5; /* 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). */ xbackground:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */ border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; list-style:none; position:absolute; width:540px; left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ } /* COLUMNS INSIDE DROPDOWN */ #nav ul li.nav-alpha,#nav ul li.nav-beta,#nav ul li.nav-gamma {width:150px; float:left; margin:0 10px; padding:10px 0; float:left;} #nav ul li{ padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */ float:none; } #nav ul a{ border-right:0px solid #ddd; padding:1px 0; white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ } #nav li:hover ul{ /* Display the dropdown on hover */ left:0; /* Bring back on-screen when needed */ margin-left:55px; } #nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ text-decoration:none; } #nav 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; } #nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ } /* Forms --------------------------------------------------------- */ input, textarea {margin:0px; padding:0px; border:0px;} form#getreport {padding:0px 10px 10px;} form#getreport label {color:#fff; margin:0px 0 0; font-size:10px;} form#getreport input {width:250px; margin:2px 0 10px; padding:9px 5px; } form#getreport #btn-submit { background: #ec2424; width:260px;margin-top:10px;font:20px/1 ChunkFiveRegular,arial,helvetica,sans-serif; color:#fff;} #contactform {} #contactform .form-beta,#contactform .form-alpha { float:left; } #contactform label,#contactform input,#contactform textarea { margin:5px 0;} #contactform .form-alpha{ width: 120px; margin-right:20px;} #contactform label { display:block; margin:5px 0; padding:0px; padding: 15px 0;line-height:1;} #contactform .form-beta { width: 400px; } #contactform input,#contactform textarea { width: 380px; padding: 15px 10px; background: #eee; display:block;} #contactform input:focus,#contactform textarea:focus {background-color:#ddd;} #contactform textarea { height:160px; } #contactform input#btn-submit {background-color:#3389c2; cursor:pointer; color:#fff; font-size:18px; width:400px;} /* Lists --------------------------------------------------------- */ ul.list { margin:15px 0; font-size:16px;} ul.list li {background:url(../images/listbullet.png) no-repeat left 5px; margin: 10px 0; padding:0 0 0 40px; min-height:29px;} ul.sidemenu {} ul.sidemenu li {margin: 0 10px;} ul.footerlist {} ul.footerlist li {border-bottom:1px solid #272727;} ul.footerlist li a{ color:#eee; text-shadow: 1px 2px 0px #444; } ul.footerlist li a:hover {color:#3389c2;} /* Page Specifics --------------------------------------------------------- */ /* Front Page */ body#frontpage { background: #fff url('../images/background.png') repeat-x center top; } #frontpage h1,#frontpage h2 { background:none;color:#323232; font-size:22px; margin:30px 0 10px; padding:0px;} #frontpage #content .alpha,#frontpage #content .beta { width: 460px; float: left; margin: 0 10px ;} #intro { height: 350px; } #slider { width: 620px; height: 260px; margin:35px 10px 10px; background: #ddd; float: left; } #useraction { width: 280px; height: 240px; margin: 35px 10px 10px; padding:10px;background: #323232; float: left; } #useraction h2 { font-size:39px; margin: 0px; padding:0px; } #useraction p { font-size:15px; margin:5px 0 2px; } #useraction h2, #useraction p,#useraction label { line-height: 1; color:#fff; text-align:center; text-transform:uppercase; text-shadow: 0px 0px 0px #ccc; } /* Contact Page */ #contact .aside {position:relative;} img.ico-phone, img.ico-email, img.ico-house {position:absolute; margin-right:10px;} #ico-email h2, #ico-phone h2, #ico-house h2 {padding-left:50px;} img.ico-email {top:16px; left:10px;} img.ico-phone {top:10px; left:10px;} img.ico-house {top:10px; left:10px;}