/* CUSTOM CSS - ULLADULLA WEB DESIGN - WWW.ULLADULLAWEBDESIGN.COM */ /* RESET / HTML5 / CLEAR FIX /////////////////////////////////////// */ 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,dl,dt,dd,ol,ul,li,fieldset,form,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;text-decoration:none;list-style:none;} header,footer,nav,section,article,aside{display:block;} .clear{clear:both;content:".";height0;visibility:hidden;display:block;} /***** FIX FOR FACEBOOK *****/ .FB_UI_Hidden { width: 100px !important; } /***** FONTS *****/ /* HEADINGS */ @font-face { font-family: 'Amaranth'; src: url('fonts/Amaranth-webfont.eot'); src: url('fonts/Amaranth-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Amaranth-webfont.woff') format('woff'), url('fonts/Amaranth-webfont.ttf') format('truetype'), url('fonts/Amaranth-webfont.svg#AmaranthRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Amaranth'; src: url('fonts/Amaranth-Italic-webfont.eot'); src: url('fonts/Amaranth-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Amaranth-Italic-webfont.woff') format('woff'), url('fonts/Amaranth-Italic-webfont.ttf') format('truetype'), url('fonts/Amaranth-Italic-webfont.svg#AmaranthItalic') format('svg'); font-weight: normal; font-style: oblique; } @font-face { font-family: 'Amaranth'; src: url('fonts/Amaranth-BoldItalic-webfont.eot'); src: url('fonts/Amaranth-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Amaranth-BoldItalic-webfont.woff') format('woff'), url('fonts/Amaranth-BoldItalic-webfont.ttf') format('truetype'), url('fonts/Amaranth-BoldItalic-webfont.svg#AmaranthBoldItalic') format('svg'); font-weight: bold; font-style: oblique; } /* BODY */ @font-face { font-family: 'Gudea'; src: url('fonts/Gudea-Bold-webfont.eot'); src: url('fonts/Gudea-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Gudea-Bold-webfont.woff') format('woff'), url('fonts/Gudea-Bold-webfont.ttf') format('truetype'), url('fonts/Gudea-Bold-webfont.svg#GudeaBold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Gudea'; src: url('fonts/Gudea-Regular-webfont.eot'); src: url('fonts/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Gudea-Regular-webfont.woff') format('woff'), url('fonts/Gudea-Regular-webfont.ttf') format('truetype'), url('fonts/Gudea-Regular-webfont.svg#GudeaRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PolyItalic'; src: url('fonts/Poly-Italic-webfont.eot'); src: url('fonts/Poly-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Poly-Italic-webfont.woff') format('woff'), url('fonts/Poly-Italic-webfont.ttf') format('truetype'), url('fonts/Poly-Italic-webfont.svg#PolyItalic') format('svg'); font-weight: normal; font-style: normal; } /***** GLOBAL LAYOUT *****/ body { background: #F5EFD9; text-align: center; font-size: 62.5%; } a { transition: all 250ms; -webkit-transition: all 250ms; -moz-transition: all 250ms; -o-transition: all 250ms; -ms-transition: all 250ms; color: #365DCA; } a:hover { color: #8C6335; } a:active { color: #bc8b54; } .hidden { display: none; } p { color: #736F5C; font-size: 1.7em; line-height: 1.5em; text-shadow: 1px 1px 0 #FCFBF5; font-family: Gudea; margin-bottom: 15px; } .p { color: #365DCA; font-size: 1.7em; line-height: 1.5em; text-shadow: 1px 1px 0 #FCFBF5; font-family: Gudea; margin-bottom: 5px; } h1, h2, h3, h4, h3 a { color: #8C6335; font-family: Amaranth; font-style: oblique; margin-bottom: 5px; } h3 a:hover { color: #AA8E64; } h3 a:active { color: #c1ae91; } h2, h3, h4 { text-shadow: 1px 1px 0 #F8F4E5; } h2 { font-size: 3.4em; } h3 { font-size: 2.4em; font-weight: normal; } h4 { font-size: 1.9em; color: #9F794D; font-weight: normal; } #middle { z-index: 1; background: #F5EFD9 url('../images/global/content-bg.jpg') repeat-x left top; padding-top: 30px; } #content { margin: 0 auto; width: 960px; text-align: left; } #content ul { color: #736F5C; font-size: 1.7em; line-height: 1.2em; text-shadow: 1px 1px 0 #FCFBF5; font-family: Gudea; } #content a { font-weight: bold; } .twoColImgTop { width: 259px; margin-right: 36px; float: left; margin-bottom: 35px; } .twoColImgTop img { margin-bottom: 15px; } .twoColImgTop h3 { margin-bottom: 5px; } .oneColImgTop { width: 620px; } .oneColImgTop img { margin-bottom: 15px; } .oneColImgTop h3 { margin-bottom: 5px; } .oneColImgTop h4 { margin-bottom: 5px; } .fourColImgTop { width: 225px; margin-right: 20px; margin-bottom: 30px; float: left; } .fourColImgTop img { margin-bottom: 15px; } .fourColImgTop h3 { margin-bottom: 5px; } .col1 { width: 462px; margin-right: 36px; float: left; } .col2 { width: 462px; float: left; } .divider850 { background: url('../images/global/divider-long.jpg') no-repeat left top !important; } .divider980 { background: url('../images/global/divider-980.jpg') no-repeat left top !important; } .divider1080 { background: url('../images/global/divider-1080.jpg') no-repeat left top !important; } .divider1180 { background: url('../images/global/divider-1180.jpg') no-repeat left top !important; } .divider1280 { background: url('../images/global/divider-1280.jpg') no-repeat left top !important; } .button { background: #FF004F url('/images/global/button-bg.png') repeat-x left top; border: solid 1px #FF0050; color: #FFE2E9; padding:8px 0 10px 0; transition: all 250ms; -webkit-transition: all 250ms; -moz-transition: all 250ms; border-radius: 10px; text-align: center; font-size: 2.1em; font-family: Gudea; box-shadow: 0px 2px 5px #7B776B; } .button:hover { color: #f99898; cursor: pointer; } .button:active { color: #f65b5b; box-shadow: inset 0px 3px 5px #000; } /***** HEADER *****/ header { width: 100%; background: #aa8650 url('../images/global/header-bg.jpg') no-repeat center top; z-index: 9999; } #innerHeader { width: 960px; margin: 0 auto; position: relative; height: 292px; } #logo { position: absolute; left: 0; top: 38px; } #mainNav { border-top: solid 1px #A8B0A7; border-bottom: solid 1px #FAF7ED; position: absolute; left: 0; top: 213px; width: 100%; } #nav { border-bottom: solid 1px #A8B0A7; border-top: solid 1px #FAF7ED; height: 39px; width: 100%; } #nav li { float: left; position: relative; z-index: 9999; } #nav li a { display: block; float: left; color: #896332; text-shadow: 1px 1px 0 #F7F4E1; padding: 12px 14px 8px 0; font-size: 1.6em; font-family: Amaranth; font-style: oblique; text-transform: uppercase; } #nav li a:hover { color: #365DCA; } #nav li a:active { color: #C4B497; } #home #homeLink, #about #aboutLink, #book #bookLink, #services #servicesLink, #more #moreLink, #articles #articlesLink, #testimonials #testimonialsLink, #faq #faqLink, #contact #contactLink { color: #365DCA; text-shadow: 1px 1px 0 #F6F2DD; } /* NAV DROPDOWNS */ header #nav ul li:hover { visibility: inherit; } header #nav ul li:hover li a { color: #fff; } nav ul#nav ul { position: absolute; top: -999em; background: #896332 url('/images/global/header-arrow.png') no-repeat 44px top; width: 210px; padding: 24px 0 17px 0; } nav ul#nav ul.list { width: 240px; } nav ul#nav li:hover ul, header nav ul li.sfHover ul { left: -15px; top: 36px; z-index: 99; border-top: solid 3px #F1E9C3; } nav ul#nav ul li { width: 100%; float: none; } nav ul#nav li li { margin: 0; height: auto; float: none; padding: 0; margin: 0; border-bottom: solid 1px #947447; border-top: solid 1px #7A5221;} nav ul#nav li li:first-child { border-top: none; } nav ul#nav li li:last-child { border-bottom: none; } header nav ul#nav li li a, header nav ul#nav li li a:visited { float: none; display: block; padding: 5px 15px; text-shadow: none!important; color: #EDE8C1!important; letter-spacing: 0em; text-align: left; -webkit-transition: all 250ms; -moz-transition: all 250ms; -o-transition: all 250ms; transition: all 250ms; } nav ul#nav li li a:hover { color: #d4b185!important; border-left: none; border-right: none; background-color: #9d723b; } nav ul#nav li li a:active { color: #f1ebd8!important; background-color: #573f20; } nav ul#nav a.sf-with-ul { padding-right: 10px; min-width: 1px; } #headerContact { text-align: left; position: absolute; right: 0; top: 44px; width: 319px; } #headerContact p { color: #9F7A4E; font-family: Gudea; font-weight: bold; text-shadow: none; text-transform: uppercase; font-size: 1.4em; text-align: right; } #skypeP { position: absolute; right: 148px; } #hPhone { text-align: left; font-size: 3em!important; background: url('../images/global/hphone.png') no-repeat 60px 5px; padding-left: 60px; margin-bottom: 0; } #social { position: absolute; right: 0; top: 48px; } #social li a { height: 40px; float: left; } #social li { width: 42px; height: 41px; display: block; float: left; } #social #skype { } #social #twitter { } #social #facebook { } /**** HERO ****/ #hero { z-index: 0; } #heroContent h1 { position: absolute; left: 0; top: 39px; font-size: 7em; width: 470px; color: #fff; z-index: 2; } #heroContent { width: 960px; margin: 0 auto; position: relative; text-align: left; z-index: 0; } #heroContent p { position: absolute; left: 0; width: 470px; font-family: Gudea; font-size: 2.2em; z-index: 2; } .heroImg { position: absolute; z-index: 0; } /***** BREADCRUMBS *****/ #breadcrumb { clear: both; height: 40px; border-bottom: solid 1px #FCFAF2; border-top: solid 1px #ABB6B5; position: relative; text-transform: uppercase; margin-bottom: 50px; } #location, #location a, #top, #top a { font-weight: normal; font-family: Amaranth; font-style: oblique; } #location { color: #896332; float: left; height: 32px; padding-top: 8px; border-top: solid 1px #FCFAF2; border-bottom: solid 1px #ABB6B5; width: 100%; } #top { color: #896332; position: absolute; right: 0; top: 8px; } /***** FOOTER ****/ footer { clear: both; background: url('../images/global/footer-bg.jpg') repeat-x left top; position: relative; text-align: left; height: 388px; } footer #fnav { width: 960px;position: absolute; left: 50%; margin-left: -478px; top: 0; border-bottom: solid 1px #9D8D77; height: 203px; } footer nav { position: absolute; left: 50%; top: 40px; font-family: Amaranth; font-style: oblique; text-transform: uppercase; } footer nav ul li a { font-size: 1.6em; color: #F5EFD9; text-shadow: -1px -1px 0 #5C4C3B; line-height: 1.5em; } footer nav ul li a:hover { color: #e2cd92; } footer nav ul li a:active { color: #d4b55d; } footer nav ul li h2 { font-size: 1em; font-weight: normal; line-height: 1em; margin-bottom: 0; } footer nav ul li h2 a { color: #CBB598; text-shadow: -1px -1px 0 #5A4A39; } #nav1 { margin-left: -478px; } #nav2 { margin-left: -331px; } #nav3 { margin-left: -71px; } #nav4 { margin-left: 208px; } #fContact { width: 960px; position: absolute; left: 50%; top: 204px; margin-left: -478px; border-top: solid 1px #5B4C3B; padding-top: 18px; } #fContact li { background-image: url('/images/global/fcontact-icons.png'); background-repeat: no-repeat; padding-left: 60px; float: left; font-size: 1.6em; font-family: Gudea; color: #fff; padding-top: 10px; padding-bottom: 14px; } #fphone { background-position: left -92px; margin-left: 49px; } #femail { background-position: -3px -1px; } #faddress { background-position: left -183px; margin-left: 49px; } #credit, #copyright { position: absolute; left: 50%; top: 331px; font-size: 1.4em; text-shadow: none; color: #867058; } #credit { margin-left: 53px; background: url('../images/global/credit.png') no-repeat right top; padding: 3px 85px 3px 0; } #copyright { margin-left: -478px; padding-top: 3px; } #credit a, #copyright a { color: #C0A07B; } #credit a:hover, #copyright a:hover { color: #e2cd92; } /***** LIGHTBOX *****/ #jquery-overlay {position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} #jquery-lightbox {position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0;} #jquery-lightbox a img {border:none;} #lightbox-container-image-box {position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;} #lightbox-container-image {padding:10px;} #lightbox-loading {position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;} #lightbox-nav {position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;} #lightbox-container-image-box>#lightbox-nav {left:0;} #lightbox-nav a {outline:none;} #lightbox-nav-btnPrev,#lightbox-nav-btnNext {width:49%;height:100%;zoom:1;display:block;} #lightbox-nav-btnPrev {left:0;float:left;} #lightbox-nav-btnNext {right:0;float:right;} #lightbox-container-image-data-box {font-size:11px;background-color:#fff;margin:0 auto;line-height: 1.4em;overflow:auto;width:100%;padding:0 10px 0;} #lightbox-container-image-data {padding:0 10px;color:#666;} #lightbox-container-image-data #lightbox-image-details {width:70%;float:left;text-align:left;} #lightbox-image-details-caption {font-weight:bold;} #lightbox-image-details-currentNumber {display:block;clear:left;padding-bottom:1.0em;} #lightbox-secNav-btnClose {width:66px;float:right;padding-bottom:0.7em;}