@charset "utf-8"; /* CSS Document */ body { font-family: Arial; font-size: 14px; color: #000000; font-style: normal; font-weight: 400; background-color:#000000; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0; } a:link { color: #EE3A3E; text-decoration: none; } a:visited { text-decoration: none; color: #EE3A3E; } a:hover { text-decoration: underline; color: #EE3A3E; } a:active { text-decoration: none; color: #EE3A3E; } h1 { font-size: 22px; color: #EE3A3E; font-family: yeseva-one; } h2 { font-size: 18px; color: #EE3A3E; font-family: yeseva-one; } h3 { font-size: 16px; color: #EE3A3E; font-family: yeseva-one; } h4 { font-size: 14px; color: #EE3A3E; font-family: yeseva-one; } /* Styling of Contact Details tab and PC links*/ .contactDetails a:link { color: #000000; text-decoration: none; } .contactDetails a:visited { text-decoration: none; color: #000000; } .contactDetails a:hover { text-decoration: underline; color: #000000; } .contactDetails a:active { text-decoration: none; color: #000000; } /* Styling of contact Phone links*/ .contactsPhone a:link { color: #FFFFFF; text-decoration: none; } .contactsPhone a:visited { text-decoration: none; color: #FFFFFF; } .contactsPhone a:hover { text-decoration: underline; color: #FFFFFF; } .contactsPhone a:active { text-decoration: none; color: #FFFFFF; } /* Styling of top phone menu - no submenus*/ .phoneMenu ul{ text-decoration: none; margin-left: 0; padding-left: 0; list-style: none; } .phoneMenu li ul{ margin:2px; padding:2px; display:none; position: absolute; margin-left: -200px; margin-top: 40px; } .phoneMenu ul li:hover ul { display:block; width:250px; margin-top: 2px; margin-bottom: 2px; } .phoneMenu ul li:click ul { display:block; width:250px; margin-top: 2px; margin-bottom: 2px; } .phoneMenu ul li ul li{ display: block; width: 250px; background-color:#000000; border-bottom: 2px solid #EE3A3E; } .phoneMenu ul li a { font-family: Arial; font-size: 14px; color: #FFFFFF; vertical-align: middle; padding-left: 10px; line-height: 31px; text-decoration:none; } /* Styling of top PC and Tablet menu */ .menuWrapper ul { margin: 0px; padding: 0px; } .menuWrapper ul li{ display:inline; height: 40px; float: left; list-style: none; padding-left: 1.25%; padding-right:1.25%; position: relative; font-family: yeseva-one; font-size: 14px; color: #D6D2A3; vertical-align: middle; line-height: 30px; } .menuWrapper li ul{ margin: 0px; padding: 0px; display: none; position: absolute; margin-left: -25px; padding-left: 1%; top: 40px; background-color: #000000; } .menuWrapper li:hover ul{ display:block; width:300px; color: #D6D2A3; z-index:1; } .menuWrapper li li{ list-style:none; display:list-item; border-bottom: 1px solid #EE3A3E; width:95%; } .menuWrapper ul li a { color: #D6D2A3; } .menuWrapper ul li a:hover { text-decoration:underline; } .menuWrapper ul li ul a:hover { text-decoration:none; } /* Styling of submenu phone*/ .subMenuPhone ul{ text-decoration: none; margin-left: 0; padding-left: 0; list-style: none; } .subMenuPhone li ul{ margin:2px; padding:2px; display:none; position: absolute; margin-left: -200px; margin-top: 40px; } .subMenuPhone ul li:hover ul { display:block; width:250px; margin-top: 2px; margin-bottom: 2px; } .subMenuPhone ul li:click ul { display:block; width:250px; margin-top: 2px; margin-bottom: 2px; } .subMenuPhone ul li ul li{ display: block; width: 250px; background-color:#000000; border-bottom: 2px solid #EE3A3E; } .subMenuPhone ul li a { font-family: yeseva-one; font-size: 14px; color: #FFFFFF; vertical-align: middle; padding-left: 10px; line-height: 31px; text-decoration:none; } /* Styling of submenu tablet and PC*/ .subMenu ul { margin: 0px; padding: 0px; } .subMenu ul li{ display:inline; height: 20px; float: left; list-style: none; padding-left: 1.25%; padding-right:1.25%; position: relative; font-size: 14px; color: #D6D2A3; vertical-align: middle; line-height: 20px; } .subMenu li ul{ margin: 0px; padding: 0px; display: none; position: absolute; margin-left: -25px; padding-left: 1%; top: 40px; background-color: #000000; } .subMenu li:hover ul{ display:block; width:300px; color: #FFFFFF; z-index:1; } .subMenu li li{ list-style:none; display:list-item; border-bottom: 1px solid #EE3A3E; width:95%; } .subMenu ul li a { color: #FFFFFF; } .subMenu ul li a:hover { color: #EE3A3E; text-decoration:none; } .subMenu ul li ul a:hover { text-decoration:none; } /* 1st and 4th footer menus */ .footerMenu1 ul { margin: 0px; padding: 0px; } .footerMenu1 ul li{ display:inline; height: 30px; float: left; list-style: none; padding-left:2.5%; padding-right:2.5%; position: relative; font-size: 12px; color: #FFFFFF; vertical-align: middle; line-height: 30px; } .footerMenu4 ul { margin: 0px; padding: 0px; } .footerMenu4 ul li{ display:inline; height: 30px; float: left; list-style: none; padding-left:2.5%; padding-right:2.5%; position: relative; font-size: 12px; color: #FFFFFF; vertical-align: middle; line-height: 30px; } /* 2nd and 3rd footer menus */ .footerMenu2 ul { margin: 0px; padding: 0px; } .footerMenu2 ul li{ display:list-item; list-style: none; height: 30px; width: 190px; text-align:left; float: left; font-size: 12px; color: #FFFFFF; line-height: 30px; } .footerMenu3 ul { margin: 0px; padding: 0px; } .footerMenu3 ul li{ display:list-item; list-style: none; height: 30px; width: 190px; text-align:left; float: left; font-size: 12px; color: #FFFFFF; line-height: 30px; } /* styling of overall footer links */ .footerWrapper ul li a { color: #FFFFFF; } .footerWrapper ul li a:hover { text-decoration:underline; } .footerWrapper ul li ul a:hover { text-decoration:underline; } /* divs for floating content left or right */ #contentPicRight { float: right; padding-left:30px; padding-bottom:5px; clear:none; } #contentPicLeft { float: left; padding-right:15px; padding-bottom:5px; clear:none; } /* code to make photo galleries responsive */ #outerImageContainer { max-width: 90%; overflow: hidden; height: auto !important; font-size:0!important; } #imageDataContainer { max-width: 90%; overflow: hidden; } #lightboxImage { max-width: 100%; } /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 4; dw-num-cols-tablet: 8; dw-num-cols-desktop: 12; dw-gutter-percentage: 25; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ .fluid { clear: both; margin-left: 0; width: 100%; float: left; display: block; } .fluidList { list-style:none; list-style-image:none; margin:0; padding:0; } /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 100%; padding-left: 0%; padding-right: 0%; clear: none; float: none; } .headerBar { min-height: 60px; background-image: url(images/banner-tile.jpg); background-repeat: repeat; } .headerWrapper { margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: none; float: none; font-size: 16px; } .logo { margin-top:10px; clear:none; width:80%; margin-right:5%; } .phoneMenu { clear:none; width:15%; margin-top:25px; position: relative; z-index:3; } .strapline { font-family: yeseva-one; font-style: normal; font-weight: 400; color:#EE3A3E; text-align:center; font-size:18px; padding-bottom:10px; } .phoneHeader { display:none; } .contactDetails { display:none; } .phone { font-family: yeseva-one; font-style: normal; font-weight: 400; color:#EE3A3E; text-align:center; font-size:24px; margin-bottom:10px; } .email { } .menuBar { background-color: #000000; min-height: 11px; padding-top: 10px; padding-bottom: 10px; border-top: 2px solid #EE3A3E; border-bottom: 2px solid #EE3A3E; position:relative; z-index:1; } .contactsPhone { clear:none; width:75%; margin-left:10%; text-align:center; color:#FFFFFF; font-family: yeseva-one; font-style: normal; font-weight: 400; } .facebookTop { margin-top:10px; clear:none; margin-left:5%; width:10%; } .menuWrapper { display:none; margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: none; float: none; } .subMenuBar { background-color: #000000; min-height: 11px; padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid #EE3A3E; } .subMenuWrapper { margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: none; float: none; } .subMenuLabel { clear:none; width:86%; padding-top:5px; } .subMenuPhone { clear:none; width:14%; position: relative; z-index:1; } .subMenu { display:none; } .contentBar { background-color:#FFFFFF; } .animationHeroWrapper { display:none; margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: none; float: none; min-height:300px; position:relative; z-index:0; } #slideshow { margin: 0px auto; position: relative; width: 100%; min-height: 300px; padding: 0px; } #slideshow > div { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } #slideshow img{ width: 100%; height: 100%; } .callsWrapper { margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: none; float: none; margin-top:10px; } .call { clear:none; width: 48%; margin-bottom:10px; } .callLeft { clear:none; width: 48%; margin-right:4%; margin-bottom:10px; } .callRight { clear:none; width: 48%; margin-left:4%; margin-bottom:10px; } .contentWrapper { margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: both; float: none; min-height:200px; overflow:hidden; } .content { width:98%; padding:1%; } .footerBar { min-height: 158px; border-top: 2px solid #EE3A3E; } .footerWrapper { margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: none; float: none; color: #FFFFFF; margin-top:10px; text-align:center; } .footerMenu { } .piconRight { } .footerMenu1 { } .footerMenu2 { clear:none; width:60%; } .footerMenu3 { clear:none; width:40%; } .footerMenu4 { clear:none; width:85%; } .footerImage { clear:none; width:15%; margin-top:10px; margin-bottom:10px; } .image { margin-top:10px; } .heroPic { width:90%; margin-left:2.5%; margin-right:2.5%; margin-bottom:10px; } .zeroMargin_mobile { margin-left: 0; } .hide_mobile { display: none; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 100%; padding-left: 0%; padding-right: 0%; clear: none; float: none; margin-left: auto; } .headerBar { } .headerWrapper { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; background-image: url(images/mrsharp-mrred3.png); background-position: 110% 20%; background-repeat: no-repeat; min-height: 220px; background-size:contain; position: relative; z-index:1; } .logo { width:30%; margin-right:3%; margin-top:0px; } .phoneMenu { display:none; } .strapline { clear:none; width:30%; margin-top:20px; } .phoneHeader { clear:none; width:26%; margin-left:4%; display:block; font-family: yeseva-one; font-style: normal; font-weight: 400; color:#EE3A3E; font-size:24px; margin-top:20px; margin-bottom:10px; } .contactDetails { display:block; clear:none; width:80%; margin-left:10%; margin-right:10%; text-align:center; color:#000000; padding-bottom:20px; font-family: yeseva-one; font-style: normal; font-weight: 400; } .phone { display:none; } .email { clear:both; width:100%; } .menuBar { min-height: 30px; } .contactsPhone { display:none; } .menuWrapper { display:block; width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; margin-top:2px; } .facebookTop { display:none; } .subMenuBar { min-height: 20px; } .subMenuWrapper { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; margin-top:2px; } .subMenuLabel { display:none; } .subMenuPhone { display:none; } .subMenu { display:block; } .contentBar { } .animationHeroWrapper { width: 100%; padding-left: 0%; padding-right: 0%; clear: none; float: none; margin-left: auto; } .callsWrapper { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } .call { width: 23%; margin-left:2.5%; } .callLeft { width: 23%; margin-right:0%; } .callRight { width: 23%; margin-left:2.5%; } .contentWrapper { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } .content { } .footerBar { } .footerWrapper { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } .footerMenu { width:90%; margin-left:10%; } .piconRight { clear:none; width:30%; float:right; } .footerMenu1 { clear:none; width:40%; } .footerMenu2 { clear:none; width:35%; } .footerMenu3 { width:25%; } .footerMenu4 { } .footerImage { } .image { clear:none; width:50%; margin-top:0px; } .heroPic { clear:none; width:48%; margin-left:2%; margin-right:0%; float:right; } .hide_tablet { display: none; } .zeroMargin_tablet { margin-left: 0; } } /* Desktop Layout: 769px to a max of 1280px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 100%; padding-left: 0%; padding-right: 0%; margin: auto; clear: none; float: none; margin-left: auto; } .headerBar { } .headerWrapper { width: 88.5%; max-width: 1280px; padding-left: 0.75%; padding-right: 0.75%; font-size:14px; min-height: 190px; background-position: 98% 50%; } .logo { width:20%; } .phoneMenu { } .strapline { width:51%; font-size:24px; padding-bottom:0px; } .phoneHeader { width:20%; margin-left:0%; float:right; font-size:22px; } .contactDetails { margin-top:-45px; } .phone { font-size:22px; } .email { margin-top:25px; } .menuBar { } .contactsPhone { } .menuWrapper { width: 78.5%; max-width: 960px; padding-left: 5.75%; padding-right: 5.75%; margin: auto; clear: none; float: none; margin-left: auto; } .facebookTop { } .subMenuBar { } .subMenu { } .subMenuWrapper { width: 78.5%; max-width: 960px; padding-left:5.75%; padding-right: 5.75%; margin: auto; clear: none; float: none; margin-left: auto; } .subMenuLabel { } .subMenuPhone { } .contentBar { } .animationHeroWrapper { display:block; width: 98%; max-width: 1500px; padding-left: 0%; padding-right: 0%; } #slideshow { min-height: 510px; } .callsWrapper { width: 88.5%; max-width: 1280px; padding-left: 0.75%; padding-right: 0.75%; } .call { } .callLeft { } .callRight { } .contentWrapper { width: 98%; max-width: 1280px; padding-left: 0%; padding-right: 0%; } .content { } .footerBar { } .footerWrapper { width: 88.5%; max-width: 1280px; padding-left: 0.75%; padding-right: 0.75%; } .footerMenu { width:100%; margin-left:0%; } .piconRight { width:18%; } .footerMenu1 { width:20%; } .footerMenu2 { width:25%; } .footerMenu3 { width:20%; } .footerMenu4 { width:25%; } .footerImage { clear:none; width:10%; } .image { clear:none; width:45%; margin-left:2.5%; margin-top:0px; } .heroPic { } .zeroMargin_desktop { margin-left: 0; } .hide_desktop { display: none; } }