/*------------------------------------------------------------------------------+ Hills of Kerrisdale +-------------------------------------------------------------------------------+ Date created: September 1, 2011 Last updated: January 28, 2013 +-------------------------------------------------------------------------------+ 1. Resetf 2. Basic Styles 3. Forms 4. Layout 4.1 Hiding & Clearing 4.2 Fonts 4.3 Structure 4.4 Links 4.5 Header 4.6 Navigation 4.7 Content 4.8 Sidebar 4.9 Footer 5. Responsive +------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------- 1. R E S E T -------------------------------------------------------------------------------*/ a { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } abbr { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } address { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } article { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } aside { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } audio { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } b { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } blockquote { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } body { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } canvas { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } caption { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } cite { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } code { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } dd { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } del { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } details { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } dfn { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } div { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } dl { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } dt { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } em { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } embed { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } fieldset { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } figcaption { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } figure { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } footer { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } form { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } h1 { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } h2 { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } h3 { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } h4 { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } h5 { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } h6 { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } header { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } hgroup { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } html { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } i { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } iframe { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } img { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } ins { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } kbd { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } label { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } legend { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } li { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } mark { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } menu { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } nav { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } object { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } ol { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } p { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } pre { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } q { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } samp { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } section { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } small { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } span { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } strong { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } sub { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } summary { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } sup { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } table { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } tbody { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } td { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } tfoot { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } th { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } thead { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } time { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } tr { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } ul { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } var { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } video { border: 0; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } article { display: block; } aside { display: block; } canvas { display: block; } details { display: block; } figcaption { display: block; } figure { display: block; } footer { display: block; } header { display: block; } hgroup { display: block; } menu { display: block; } nav { display: block; } section { display: block; } summary { display: block; } blockquote:before { content: ""; } blockquote:after { content: ""; } q:before { content: ""; } q:after { content: ""; } blockquote { quotes: none; } q { quotes: none; } ul { list-style: none; } ol { list-style: none; } dir { list-style: none; } menu { list-style: none; } a img { border: 0; } fieldset { border: 0; } iframe { border: 0; } table { border-collapse: collapse; border-spacing: 0; } caption { font-weight: normal; text-align: left; vertical-align: top; } th { font-weight: normal; text-align: left; vertical-align: top; } td { font-weight: normal; text-align: left; vertical-align: top; } hr { color: #000; height: 1px; width: 100%; } /*------------------------------------------------------------------------------- 2. B A S I C S T Y L E S -------------------------------------------------------------------------------*/ img { display: block; } i { font-style: italic; } em { font-style: italic; } address { font-size: 1em; } cite { font-size: 1em; } dfn { font-size: 1em; } b { font-weight: bold; } strong { font-weight: bold; } u { text-decoration: underline; } ins { text-decoration: underline; } acronym { border-bottom: 1px dotted #999; cursor: help; } abbr { border-bottom: 1px dotted #999; cursor: help; } acronym { text-transform: uppercase; } code { font-family: "Courier New", "Courier", monospace; font-size: 1em; } samp { font-family: "Courier New", "Courier", monospace; font-size: 1em; } kbd { font-family: "Courier New", "Courier", monospace; font-size: 1em; } pre { font-family: "Courier New", "Courier", monospace; font-size: 1em; } tt { font-family: "Courier New", "Courier", monospace; font-size: 1em; } var { font-family: "Courier New", "Courier", monospace; font-size: 1em; } sup { font-size: .8em; vertical-align: super; } sub { font-size: .8em; vertical-align: sub; } /*------------------------------------------------------------------------------- 3. F O R M S -------------------------------------------------------------------------------*/ input { font-family: "Helvetica", "Arial", sans-serif; font-size: 1em; vertical-align: middle; } select { font-family: "Helvetica", "Arial", sans-serif; font-size: 1em; vertical-align: middle; } textarea { font-family: "Helvetica", "Arial", sans-serif; font-size: 1em; vertical-align: middle; } label { cursor: pointer; } input[type=button] { cursor: pointer; } input[type=submit] { cursor: pointer; } button { cursor: pointer; } .ie6 input { vertical-align: text-bottom; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } /*------------------------------------------------------------------------------- 4. L A Y O U T -------------------------------------------------------------------------------*/ /* 4.1 Hiding & Clearing -------------------------------------------------------------------------------*/ .accessibility-nav { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } .clearfix:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; font-size: 0; } #navigation:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; font-size: 0; } #footer ul:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; font-size: 0; } #subnav li:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; font-size: 0; } #featured:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; font-size: 0; } /* 4.2 Fonts -------------------------------------------------------------------------------*/ @font-face { font-family: 'GothamHTFBookRegular'; src: url('../fonts/gothamhtf-book-webfont.eot'); src: url('../fonts/gothamhtf-book-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/gothamhtf-book-webfont.woff') format('woff'), url('../fonts/gothamhtf-book-webfont.ttf') format('truetype'), url('../fonts/gothamhtf-book-webfont.svg#GothamHTFBookRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GothamHTFMedium'; src: url('../fonts/gothamhtf-medium-webfont.eot'); src: url('../fonts/gothamhtf-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/gothamhtf-medium-webfont.woff') format('woff'), url('../fonts/gothamhtf-medium-webfont.ttf') format('truetype'), url('../fonts/gothamhtf-medium-webfont.svg#GothamHTFMedium') format('svg'); font-weight: normal; font-style: normal; } /* 4.3 Structure -------------------------------------------------------------------------------*/ html { background: #ffffff url(../images/bg-body.jpg) repeat; } body { background: url(../images/bg-top.gif) repeat-x; color: #636466; text-align: center; } #page { width: 1150px; background: #fff; margin: 0 auto; } body.home #page { padding-bottom: 600px; } .wrapper { background: #fff; font-family: "Arial", "Helvetica", sans-serif; font-size: 76%; line-height: 2.0; margin: 0 auto; width: 1000px; position: relative; } /* 4.4 Links -------------------------------------------------------------------------------*/ a:link { color: #00f; text-decoration: underline; } a { color: #00f; text-decoration: underline; } a:hover { text-decoration: none; } :focus { outline: 0 none; } /* 4.5 Header -------------------------------------------------------------------------------*/ #header { padding: 25px 0 0; position: relative; } /* Logo */ #header .site-name span { display: block; overflow: hidden; width: 339px; height: 111px; } #header .site-name { display: block; overflow: hidden; width: 339px; height: 111px; } #header .site-name { position: relative; float: left; } #header .site-name span { background: #fff url(../images/logo-hills.png) no-repeat center center; position: absolute; top: -5px; left: 0; width: 100%; height: 100%; } #header a.site-name { cursor: pointer; } /* Company Info */ .company-info { min-height: 66px; float: right; background: url(../images/logo-h.png) no-repeat right center; width: 500px; text-align: right; padding: 15px 90px 0 0; margin-top: 0px; } .company-info .tagline { font: bold 15px/17px Georgia, Times, "Times New Roman", serif; color: #858e94; text-transform: uppercase; margin: 5px 0 5px; letter-spacing: 3px; position: relative; line-height: 1; width: 345px; height: 14px; overflow: hidden; padding: 0; display: block; float: right; top: -2px; } .company-info .tagline span { background: url(../images/txt_quality.png) no-repeat; position: absolute; top: 0; left: 0; display: block; overflow: hidden; width: 345px; height: 14px; } .company-info .adr { font: 10px/14px "GothamHTFBookRegular", Helvetica, Arial, sans-serif; color: #001e38; text-transform: uppercase; letter-spacing: 1px; clear: right; margin-bottom:44px;} /* 4.6 Navigation -------------------------------------------------------------------------------*/ #navigation { clear: both; background: #e6edee; padding-left: 29px; margin: 0 0 12px; } #navigation li { float: left; text-transform: uppercase; font: 14px/16px "GothamHTFMedium", Helvetica, Arial, sans-serif; letter-spacing: 2px; padding-left:22px; } #navigation li a { color: #474d53; padding: 6px 20px; display: block; text-decoration: none; } #navigation li a:hover { color: #001e38; } #navigation li.current a { color: #001e38; } /* 4.6.1 Navigation -------------------------------------------------------------------------------*/ #navigation2 { clear: both; background: #ffffff; padding-left: 5px; margin: 0 0 10px; } #navigation2 li { float: left; text-transform: uppercase; font: 14px/16px "GothamHTFMedium", Helvetica, Arial, sans-serif; letter-spacing: 2px; padding-left:30px; } #navigation2 li a { color: #474d53; padding: 6px 20px; display: block; text-decoration: none; } #navigation2 li a:hover { color: #001e38; } #navigation2 li.current a { color: #001e38; } /* 4.7 Content -------------------------------------------------------------------------------*/ #content { width: 765px; float: right; text-align: left; padding: 20px 0 0; font-family: "GothamHTFBookRegular", Helvetica, Arial, sans-serif; } /* FIX FIRE FOX float: none; */ body.home #content {width:100%; padding: 0; overflow:hidden; margin-bottom:5px; } /* Default Styles */ #content img { margin-bottom: 15px; } #content dl { padding: 0 0 20px; } #content ol { padding: 0 0 20px; } #content ul { padding: 0 0 20px; } #content p { padding: 0 0 20px; } #content ul li { list-style: disc; } #content ol li { list-style: decimal; } #content ol { margin-left: 40px; } #content ul { margin-left: 40px; } #content dl dd { padding-left: 25px; font-style: italic; } #content blockquote .cite cite { font-style: italic; } #content blockquote p { font: 16px/25px Georgia, Times, "Times New Roman", serif; font-style: italic; color: #333; } #content blockquote p.cite { font-family: "GothamHTFBookRegular", Helvetica, Arial, sans-serif; } #content h1 { color: #001e38; font: 38px/45px Georgia, Times, "Times New Roman", serif; font-style: italic; border-bottom: 1px solid #7f8e9b; padding-bottom: 10px; margin-bottom: 15px; } #content h2 { color: #da502c; font: 32px/38px Georgia, Times, "Times New Roman", serif; font-style: italic; } #content h3 { color: #da502c; font: 24px/30px Georgia, Times, "Times New Roman", serif; font-style: italic; } #content h4 { font: 18px/24px Georgia, Times, "Times New Roman", serif; font-style: italic; } #content h5 { text-transform: uppercase; color: #7b848c; font: 12px/16px Georgia, Times, "Times New Roman", serif; font-style: italic; letter-spacing: 1px; } #content h6 { font: 12px/14px "GothamHTFMedium", Helvetica, Arial, sans-serif; } /* :) */ #content j { font: 14px/16px "GothamHTFMedium", Helvetica, Arial, sans-serif; letter-spacing: .5px; } #content j1 { font: 14px/16px "GothamHTFMedium", Helvetica, Arial, sans-serif; color: #da502c; letter-spacing: 2.1px; } #content j1a { font: 14px/16px "GothamHTFMedium", Helvetica, Arial, sans-serif; color: #041e41; letter-spacing: 2.1px; } #content j3 { font: 14px/16px "GothamHTFMedium", Helvetica, Arial, sans-serif; letter-spacing: .5px; } #content k { font: 14px/16px "GothamHTFMedium", Helvetica, Arial, sans-serif; letter-spacing: 1.5px; } #content k a {color: #474d53; text-decoration: none; } #content k a:active { color: #474d53; text-decoration: none; } #content k a:visited { color: #474d53; text-decoration: none; } #content k a:hover { color: #cccccc; text-decoration: none; } #content m { color: #001e38; font: 38px/45px Georgia, Times, "Times New Roman", serif; font-style: italic; border-bottom: 1px solid #7f8e9b; padding-bottom: 10px; margin-bottom: 15px; } #content n { color: #001e38; font: 34px/42px Georgia, Times, "Times New Roman", serif; font-style: italic; padding-bottom: 10px; margin-bottom: 15px; } .pics { text-align: center; margin: 0 auto; } .pics img { display: inline; margin: 5px 10px 25px; } /* Content Columns */ #mainContent {width: 300px; padding-top: 20px; float: left; font-size: 14px; } #mainContent a { color: #000000; text-decoration: underline; } #mainContent a:active { color: #0000ff; text-decoration: underline; } #mainContent a:visited { color: #008000; text-decoration: underline; } #mainContent a:hover { color: #ff0000; text-decoration: none; } #secondaryContent { width: 300px; padding-top: 20px; float: right; font-size:14px; } #secondaryContent a {color: #da502c; text-decoration: none; } #secondaryContent a:active { color: #474d53; text-decoration: none; } #secondaryContent a:visited { color: #474d53; text-decoration: none; } #secondaryContent a:hover { color: #fb724e; text-decoration: none; } #thirdContent { width: 380px; padding-top: 4px; float: left; font-size:14px; } #thirdContent a {color: #474d53; text-decoration: none; } #thirdContent a:active { color: #474d53; text-decoration: none; } #thirdContent a:visited { color: #474d53; text-decoration: none; } #thirdContent a:hover { color: #cccccc; text-decoration: none; } #LContent { width:400px; padding-top: 0px; float:left; font-size:14px; } #LContent a {color: #000000; text-decoration: underline; } #LContent a:active { color: #0000ff; text-decoration: underline; } #LContent a:visited { color: #008000; text-decoration: underline; } #LContent a:hover { color: #ff0000; text-decoration: none; } #LSContent { width: 300px; padding-top: 0px; float: right; font-size:14px; } #LSContent a {color: #474d53; text-decoration: none; } #LSContent a:active { color: #474d53; text-decoration: none; } #LSContent a:visited { color: #474d53; text-decoration: none; } #LSContent a:hover { color: #cccccc; text-decoration: none; } #LSContent1 { width: 547px; padding-top: 10px; float: right; font-size:14px; padding-bottom:10px; } #LSContent1 a {color: #474d53; text-decoration: none; } #LSContent1 a:active { color: #474d53; text-decoration: none; } #LSContent1 a:visited { color: #474d53; text-decoration: none; } #LSContent1 a:hover { color: #cccccc; text-decoration: none; } #careerContent { width: 700px; padding-top: 20px; padding-bottom: 20px; float: left; font-size:14px; } #careerContent a {font-weight:bold; color: #da502c; text-decoration: none; } #careerContent a:active { color: #474d53; text-decoration: none; } #careerContent a:visited { color: #474d53; text-decoration: none; } #careerContent a:hover { color: #cccccc; text-decoration: none; } #ourstoryContent { width: 765px; padding-top: 20px; padding-bottom: 20px; float: left; font-size:14px; } #ourstoryContent a {font-weight:bold; color: #da502c; text-decoration: none; } #ourstoryContent a:active { color: #da502c; text-decoration: none; } #ourstoryContent a:visited { color: #474d53; text-decoration: none; } #ourstoryContent a:hover { color: #fb724e; text-decoration: none; } #ourstoryContent1 { width: 750px; padding-top: 20px; padding-bottom: 20px; float: left; font-size:14px; } #ourstoryContent1 a {font-weight:bold; color: #da502c; text-decoration: none; } #ourstoryContent1 a:active { color: #474d53; text-decoration: none; } #ourstoryContent1 a:visited { color: #474d53; text-decoration: none; } #ourstoryContent1 a:hover { color: #cccccc; text-decoration: none; } #ourstoryContent3 { width: 765px; padding-top: 20px; padding-bottom: 0px; float: left; font-size:14px; } #ourstoryContent3 a {font-weight:bold; color: #da502c; text-decoration: none; } #ourstoryContent3 a:active { color: #da502c; text-decoration: none; } #ourstoryContent3 a:visited { color: #474d53; text-decoration: none; } #ourstoryContent3 a:hover { color: #fb724e; text-decoration: none; } #WNContent1 { width: 547px; padding-top: 10px; float: right; font-size:14px; padding-bottom:10px; } #WNContent1 a {color: #474d53; text-decoration: none; } #WNContent1 a:active { color: #474d53; text-decoration: none; } #WNContent1 a:visited { color: #474d53; text-decoration: none; } #WNContent1 a:hover { color: #cccccc; text-decoration: none; } /* Carousel */ #carousel { height: 592px; overflow: hidden; margin-bottom: 1.5em ; } #carousel li { float: left; width: 1000px; height: 592px; } .jcarousel-container-horizontal { width: 1000px; } .jcarousel-clip { overflow: hidden; } .jcarousel-clip-horizontal { width: 1000px; height: 592px; } .jcarousel-item { width: 1000px; height: 592px; } .carousel-wrap { position: relative; clear: both; width: 1000px; height: 592px; } /*.carousel-wrap { width: 1000px; height: 592px; position: relative; margin-bottom: 15px;}*/ .carousel-wrap .featured { position: absolute; left: 0; bottom:0; width:1000px; height:68px; background:url("../images/mainImg_tab.png") no-repeat; z-index: 12; } /* set border-box so that percents can be used for width, padding, etc (personal preference) */ .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cycle-slideshow { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cycle-slideshow { height: 592px; width: 1100px; position: relative; overflow: hidden; margin: 0 auto; } /* slideshow images (for most of the demos, these are the actual "slides") */ .cycle-slideshow img { position: absolute; top: 0; left: 0; width: 100%; padding: 0; display: block; margin: 10px 50px; max-width: 1000px; } .cycle-slideshow img { display: none; } .cycle-slideshow img.first { display: block; } /* in case script does not load */ .cycle-slideshow img:first-child { position: static; z-index: 100; } /* pager styles */ .cycle-pager { z-index: 500; position: absolute; bottom: 21px; left: 118px; overflow: hidden;} .cycle-pager span { background: url(../images/ico-carousel-nav.png) no-repeat top left; width: 10px; height: 9px; display: block; display: inline-block; cursor: pointer; text-indent: -999em; margin-right: 7px; overflow: hidden; } .cycle-pager span:hover { background-position: top right; } .cycle-pager span.cycle-pager-active { background-position: top right; } .cycle-pager > * { cursor: pointer; } .cycle-slideshow .bar { display: block; width: 1000px; height: 68px; background: url(../images/mainImg_tab.png); position: absolute; bottom: 0; left: 50px; z-index: 300; } #cycle-next { width: 38px; height: 592px; display: block; position: absolute; top: 0; text-indent: -999em; z-index: 999; cursor: pointer; } #cycle-prev { width: 38px; height: 592px; display: block; position: absolute; top: 0; text-indent: -999em; z-index: 999; cursor: pointer; } #cycle-prev { left: 0; border-right: 12px solid white; background: white url(../images/ico-arrows.png) no-repeat center left; } #cycle-next { right: 0; border-left: 12px solid white; background: white url(../images/ico-arrows.png) no-repeat center right; } /* Banner Bottom */ #mainBannerTab { position:absolute; bottom:0; width:1000px; height:68px; background:url("../images/mainImg_tab.png") no-repeat; z-index: 12; } #mainBannerLogo { background:url("../images/logoTransparent.png") no-repeat; width:153px; height:28px; position:absolute; left: 770px; top: 28px; } /* Featured */ /*.featured { padding-top: 0px; border-top: 1px solid #7f8e9b; color: #001e38; clear: both; width: 1000px; overflow: hidden; }*/ .featured { padding-top: 0px; color: #001e38; clear: both; width: 1000px; overflow: hidden; } .featured li { background: #e6edee; list-style: none; padding: 0; margin: 0 8px 10px 0; float: left; width: 328px; overflow: hidden; height: 133px; position: relative; } .featured li.f3 { margin-right: 0; } .featured li img { position: absolute; top: 14px; right: 0; } .featured li.f1 h3 { background: #b9bd33; } .featured li.f2 h3 { background: #da4f2d; } .featured li.f3 h3 { background: #66b7e7; } .featured li a { display: block; color: #001e38; text-decoration: none; } .featured li h3 { display: block; width: 129px; height: 108px; text-align: left; padding: 0; margin: 0; font: 19px/22px Georgia, Times, "Times New Roman", serif; font-style: italic; padding: 10px 5px 15px 10px; text-transform: none; } .featured li a h3 { color: #001e38; } #content .featured { padding: 0; border: 0; position: absolute; bottom: 30px; left: 0; z-index: 999; } #content .featured ul { padding: 0; margin: 0; } #content .featured li { margin-bottom: 0; } #content .featured li h3 { font: 19px/22px Georgia, Times, "Times New Roman", serif; font-style: italic; padding: 10px 5px 15px 10px; } #content .featured li a h3 { color: #001e38; } /* Changes to Homepage to allow for Carousel Navigation */ body.home .wrapper { width: 1100px; } .carousel-wrap .featured { width: 1100px; } .carousel-wrap { width: 1100px; } .jcarousel-item { width: 1100px; } .jcarousel-clip-horizontal { width: 1100px; } .jcarousel-container-horizontal { width: 1100px; } #carousel li { width: 1100px; } .jcarousel-item img { padding: 0 50px; } body.home #footer { margin: 0 50px; } body.home #header { margin: 0 50px; } body.home #page { padding-bottom: 0; } /* Main Banner */ #mainBannerFrame { position:relative; height:528px; width:950px; } #mainBannerImg { height:528px; width:950px; position:absolute; top: 0px; left: 0px; z-index: 10; } #mainBannerTab { position:absolute; bottom:0; width:950px; height:80px; background:url("../images/mainImg_tab.png") no-repeat; z-index: 12; } #mainBannerLogo { background:url("../images/logoTransparent.png") no-repeat; width:153px; height:28px; position:absolute; left: 770px; top: 28px; } /* 4.8 Sidebar -------------------------------------------------------------------------------*/ #sidebar { width: 199px; float: left; text-align: left; border-top : 1px solid #7f8e9b; padding: 25px 0 0; margin-top:75px; } #sidebar2 { width: 199px; float: left; text-align: left; border-top : 1px solid #7f8e9b; padding: 25px 0 0; margin-top:75px; } #sidebar2 li { text-transform: uppercase; font: 13px/16px GothamHTFMedium, Times, "Times New Roman", serif; margin: 0 0 4px; } /* Subnav */ #subnav { padding: 0 0 15px 0px; } #subnav li { text-transform: uppercase; font: 13px/16px Georgia, Times, "Times New Roman", serif; margin: 0 0 4px; } #subnav a { color: #da502c; display: block; padding: 1px 15px 1px 0; text-decoration: none; } #subnav a:hover { color: #da502c; text-decoration: none; } #subnav li.current { color: #da502c; text-decoration: none; } #subnav a span { border-bottom: 1px solid #fff; no-repeat left 0px; display: block; float: left; padding-left: 0px; font-style: italic; cursor: pointer; } #subnav a:hover span { border-bottom: 1px solid #eca795; } /* Social Media */ .social-media { margin: 3px 0 0; background: url(../images/ico-decorative-s.png) repeat-x 1px 0; padding: 35px 0 0 25px; } .social-media .twitter { margin: 0 0 10px; } /* 4.9 Footer -------------------------------------------------------------------------------*/ #footer { padding-top: 10px;} #footer ul { clear: both; padding-left: 48px; margin: 5px 0; position: relative; } #footer li { float: left; text-transform: uppercase; font: 12px/14px "GothamHTFMedium", Helvetica, Arial, sans-serif; letter-spacing: 2px; } #footer li.twitter { position: absolute; top: 0; right: 0; } #footer li.twitter a { background: url(../images/ico-twitter.png) no-repeat left 2px; padding-left: 28px; padding-right: 0; } #footer li a { color: #474d53; padding: 6px 20px; display: block; text-decoration: none; } #footer li a:hover { color: #001e38; } #footer li.current a { color: #001e38; } #footer p { background: url(../images/ico-decorative.png) repeat-x top left; padding: 20px 0; color: #9ca8b1; font: 10px/14px "GothamHTFMedium", Helvetica, Arial, sans-serif; text-align: right; } /*------------------------------------------------------------------------------- 1. R E S P O N S I V E -------------------------------------------------------------------------------*/ #content .n { margin-bottom: 37px; display: block; } .mtcol1 { width: 60%; } .tcol1 { width: 60%; } .desktop-hide { display: none; } #bottom { display: none; } .menu-toggle { display: none; } @media only screen and (max-width: 568px) { img { max-width: 100%; height: auto; } .home .container { clear: both; } #header { width: 100%; overflow: hidden; } /* Default */ body { background: none; } body.home .wrapper { width: 100%; overflow: hidden; } .wrapper { width: 100%; overflow: hidden; } #page { width: 100%; overflow: hidden; } /* Logo */ #header .site-name span { width: 226px; height: 71px; } #header .site-name { width: 226px; height: 71px; } #header .site-name span { background: #fff url(../images/mobile-logo.png) no-repeat; top: 0; left: 0; } /* Header */ #header { padding: 50px 0 5px; } #header .site-name { float: left; margin: 0 0 15px 20px; } .adr { display: none; } .psocial { display: none; } .company-info { background: none; padding: 0; float: none; min-height: 0; width: 100%; text-align: center; position: absolute; top: 5px; } .company-info .tagline { margin: 0 auto; float: none; font-family: 'Didot', Georgia, serif; width: auto; height: auto; top: auto;line-height: 1.4; text-align: center; color: #70787f; letter-spacing: 4px; } .company-info .tagline span { display: none; } /* Navigation */ .menu-toggle { width: 42px; height: 42px; background: url(../images/mobile-ico-menu.png) no-repeat center center; display: block; overflow: hidden; cursor: pointer; margin: 0; text-indent: -999em; margin-top: 65px; position: absolute; top: 0; right: 40px; } .nav-header { display: none; } #site-navigation.toggled .nav-header { display: block; } .nav-header { float: left; margin-left: 4px; } .nav-header li a { width: auto; height: auto; display: block; } .nav-header li { width: auto; height: auto; display: block; } .nav-header span { display: none; } #navigation { margin: 15px 15px 0; padding-left: 0; float: none; } #navigation li { width: 33.333% !important; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; float: none; display: inline-block; } #navigation li a { padding-left: 0; padding-right: 0; margin: 0; width: auto !important; } #navigation li a:hover { color: #001e38; } /* Content */ .container { border-bottom: 2px solid #70787f; } #content { width: auto; float: none; } #content h1 { text-align: center; padding-bottom: 20px; margin-bottom: 0; border-width: 2px; } #content h2 { font-weight: bold; } #ourstoryContent { width: auto; float: none; line-height: 1.6; } #content j1 { display: block; padding-bottom: 4px; } #ourstoryContent0 { padding-left: 20px; padding-right: 20px; float: none; width: auto !important; height: auto !important; } #ourstoryContent3 { padding-left: 20px; padding-right: 20px; float: none; width: auto !important; height: auto !important; } #ourstoryContent { padding-left: 20px; padding-right: 20px; float: none; width: auto !important; height: auto !important; } #content h2 { padding-left: 20px; padding-right: 20px; float: none; width: auto !important; height: auto !important; } td iframe { width: 100% !important; } /* Location Page */ .mtcol2 { display: block; width: 100%; } .mtcol1 { display: block; width: 100%; } #ourstoryContent3 { line-height: 1.6; } #ourstoryContent3 br { display: none; } #ourstoryContent3 j span { display: block; } #ourstoryContent3 j { display: block; } #ourstoryContent3 img { margin-top: 15px; } #content .n { margin-bottom: 0; } /* Content Page */ .page-content .container { border: 0; } .page-content #content h1 { margin-bottom: 20px; } .page-content #content p { padding: 0 20px; } .page-content #content j1 { padding-left: 20px; padding-right: 20px; } .page-content #bottom .bottom-nav { border-top: 0; } .page-content .pics { height: 10px; } /* Homepage */ body.home #header { margin: 0 auto; } .cycle-slideshow { width: auto; height: auto; } .carousel-wrap { width: auto; height: auto; } .cycle-slideshow img { margin: 0; } .cycle-pager { display: none;} .cycle-slideshow .bar { display: none; } body.home .container { border-bottom: 0; border-top: 0; } body.home #content { padding-top: 10px; } body.home #bottom .bottom-nav { border-top: 0; } /* Contact */ #secondaryContent { float: none; width: auto; padding: 20px 20px 10px; } #mainContent { float: none; width: auto; padding: 20px 20px 10px; } #secondaryContent br { display: none; } #mainContent br { display: none; } .mobile-hide { display: none; } #content #secondaryContent .mobile-block { display: block; } #content .mobile-nomarg { margin-bottom: 0; } /* Sign up */ #content .mobile-form { position: static !important; padding-left: 20px !important; padding-right: 20px !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; padding-bottom: 20px !important; } /* Sidebar */ #sidebar { display: none; } /* Bottom */ #bottom { display: block; background: #e6edee; } #bottom .bottom-nav { width: 100%; clear: both; border-top: 20px solid #fff; padding-top: 35px; } #bottom .bottom-nav li { float: left; font-family: "GothamHTFMedium", Helvetica, Arial, sans-serif; text-transform: uppercase; float: left; width: 50%; text-align: left; padding-left: 35px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: 2px; } #bottom .bottom-nav li:nth-child(odd) { border-right: 1px solid #474e54; } #bottom .bottom-nav a { display: block; color: #474e54; text-decoration: none; padding: 1px 0; } #bottom .bottom-nav a:hover { color: #001e38; } /* Bottom > Social Media */ #bottom .socialmedia { clear: both; text-align: center; padding: 30px 0 55px; } #bottom .socialmedia a { width: 48px; height: 48px; display: block; overflow: hidden; } #bottom .socialmedia span { width: 48px; height: 48px; display: block; overflow: hidden; } #bottom .socialmedia li { width: 48px; height: 48px; display: block; overflow: hidden; } #bottom .socialmedia li { margin-left: 30px; display: inline-block; position: relative; } #bottom .socialmedia span { position: absolute; top: 0; left: 0; } #bottom .socialmedia li:first-child { margin-left: 0; } #bottom .socialmedia .facebook span { background: url(../images/mobile-ico-facebook.png) no-repeat; } #bottom .socialmedia .twitter span { background: url(../images/mobile-ico-twitter.png) no-repeat; } #bottom .socialmedia .instagram span { background: url(../images/mobile-ico-instagram.png) no-repeat; } /* Footer */ .featured { border: 0; width: auto; } body.home #footer { padding-bottom: 50px; background: url(../images/mobile-bg-footer.png) no-repeat; background-size: 100% auto; margin: 0 20px; padding-top: 65px; margin-top: -28px; } #footer { padding-bottom: 50px; background: url(../images/mobile-bg-footer.png) no-repeat; background-size: 100% auto; margin: 0 20px; padding-top: 65px; margin-top: -28px; } #footer ul { display: none; } #footer p { font: 16px/1 "GothamHTFBookRegular", Helvetica, Arial, sans-serif; text-align: center; border-bottom: 2px solid #7f8e9b; margin: 0 -20px; background: none; color: #70787f; } .desktop-hide { display: block; } #footer .copy-links { border: 0; margin: 0; } .copy-links a { color: #474e54; text-decoration: none; } .copy-links a:hover { color: #001e38; text-decoration: none; } /* Font Sizes */ .company-info .tagline { font-size: 18px; } #content k { font-size: 18px; } #content j3 { font-size: 18px; } #content j1 { font-size: 18px; } #content j { font-size: 18px; } .page-content #content p { font-size: 18px; } .page-content #content j1 { font-size: 18px; } .mtcol2 { font-size: 18px; } .mtcol1 { font-size: 18px; } #ourstoryContent3 { font-size: 18px; } #ourstoryContent { font-size: 18px; } #secondaryContent { font-size: 18px; } #mainContent { font-size: 18px; } #bottom .bottom-nav li { font-size: 24px; } #content h2 { font-size: 24px; } #content n { font-size: 34px; line-height: 42px; } #content h1 { font-size: 36px; } #content m { font-size: 38px; line-height: 45px; } #content j { font-size: 18px !important; line-height: 1.6; } #content m { font-size: 18px !important; line-height: 1.6; } #content k { font-size: 18px !important; line-height: 1.6; } #content j3 { font-size: 18px !important; line-height: 1.6; } #content j1 { font-size: 18px !important; line-height: 1.6; } #content j { font-size: 18px !important; line-height: 1.6; } } /* Retina */ @media only screen and (max-width: 568px) and (-webkit-min-device-pixel-ratio: 1.5) { /* Logo */ #header .site-name span { background: #fff url(../images/mobile-logo@2x.png) no-repeat; background-size: 226px 71px; } /* Menu */ .menu-toggle { background: url(../images/mobile-ico-menu@2x.png) no-repeat center center; background-size: 42px 42px; } /* Bottom */ #bottom .social-media .facebook span { background: url(../images/mobile-ico-facebook@2x.png) no-repeat; background-size: 48px 48px; } #bottom .social-media .twitter span { background: url(../images/mobile-ico-twitter@2x.png) no-repeat; background-size: 48px 48px; } #bottom .social-media .instagram span { background: url(../images/mobile-ico-instagram@2x.png) no-repeat; background-size: 48px 48px; } /* Footer */ #footer .ico-h { background: url(../images/mobile-ico-h@2x.png); background-size: 70px 75px; } #footer .ico-h:after { background: url(../images/mobile-bg-pattern@2x.png); background-size: 100% auto; } #footer .ico-h:before { background: url(../images/mobile-bg-pattern@2x.png); background-size: 100% auto; } } @media only screen and (max-width: 479px) { .company-info .tagline { line-height: 1.3; } #header { padding-top: 50px; } .menu-toggle { right: 20px; } #header { width: 100%; overflow: hidden; } #header { padding-bottom: 10px; } #navigation li { width: 45% !important; } #bottom .bottom-nav li { font-size: 14px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body.home #footer { margin-top: -25px; } #footer { margin-top: -25px; } #footer p { padding-top: 10px; } } @media only screen and (max-width: 320px) { #header .site-name { zoom: .8; } .menu-toggle { margin-top: 55px; } .company-info .tagline { font-size: 13px; letter-spacing: 3px; } body.home #footer { margin-top: -17px; } #footer { margin-top: -17px; } } .column-left{ float: left; width: 33%; font-weight: bold; } .column-right{ float: right; width: 33%; font-weight: bold; } .column-center{ display: inline-block; width: 33%; font-weight: bold; } }