/********************************************************************************************** Main Sections in CSS: 1. BASIC ELEMENTS Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. 2. LAYOUT Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site 3. PAGE COMMON STYLES Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc 4. PAGE SPECIFIC STYLES Define content styles that are specific to a particular page ***********************************************************************************************/ /* import core styles */ @import url(base.css); /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { color:#000; background:#fff; font-family: Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5 li, p, a{ line-height:1.2em;} a{ color:#0a98d0; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Header ----*/ div#container{ min-width:1000px;} /*---- Header ----*/ div#header { background:url(../images/header/header-bg.jpg) 0 0 repeat-x; border-top:#f7b600 4px solid; } div#header div.wrapper{ width:970px; margin:0 auto; background:url(../images/header/header-bg-img.jpg) 0 0 no-repeat; padding:0 0 5px 30px;} /*---- Navigation ----*/ div#navigation { background:url(../images/navigation/nav-bg.jpg) 0 0 repeat-x; } div#navigation div.wrapper{ width:980px; margin:0 auto; padding-left:20px; } /*---- Content ----*/ div#content2 { background:url(../images/content/content-top.jpg) 0 0 repeat-x; } div#content div.wrapper{ width:980px; margin:0 auto; padding-left:20px;} div#content div.inner-content{ margin-bottom:20px;} /*---- Main ----*/ div#main { float:left; width:654px; } /*---- Sidebar ----*/ div#sidebar { width:305px; float:right; } div#sidebar ul{ font-size:170%; right; line-height:1.4;} /*---- Footer ----*/ div#footer { clear:both; background:url(../images/footer/footer-bg.jpg) 0 0 repeat-x;} div#footer div.wrapper{ width:980px; margin:0 auto; padding:11px 0 8px 20px;} /*------------------------------------------ // 3. PAGE COMMON STYLES // Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc //------------------------------------------*/ /*---- Header - Logo ----*/ div#header h1 a{ float:left; width:678px; background:url(../images/header/logo.png) 0 0 no-repeat; height:138px; display:block;} /*---- Header - Languagestrip ----*/ div#header div.language-strip{ background:url(../images/header/strip-img.gif) 0 -34px repeat-x; float:right; margin-left:-67px; height:33px;} div#header div.language-strip-left{ background:url(../images/header/strip-img.gif) 0 0 no-repeat; height:33px;} div#header div.language-strip-right{ background:url(../images/header/strip-img.gif) 100% -68px no-repeat; padding:0 20px; overflow:hidden; height:33px;} div#header div.language-strip-right ul li{ font-size:80%; float:left; margin-right:10px; line-height:33px; background:url(../images/header/dots.gif) right center no-repeat; text-transform:uppercase; padding-right:3px; width:16px;} div#header div.language-strip-right ul li a{ color:#116d8e; text-decoration:none; padding:0 15px 0 0px; display:block; line-height:11px; padding: 11px 0; height:11px;} div#header div.language-strip-right ul li a img{ margin-right:10px; vertical-align:bottom;} div#header div.language-strip-right ul li.last{ background:none;} /*---- Navigation ----*/ div#navigation ul { overflow:hidden; width:100%; } div#navigation ul li { float:left; font-size:200%; } div#navigation ul li a { display:block; color:#FFF; text-decoration:none; line-height:62px; padding:0 22px; background:url(../images/navigation/pipe.gif) right center no-repeat; } div#navigation ul li a:hover { text-decoration:underline; } div#navigation ul li a.last{ background:none;} /*---- Content ----*/ div#content h1{ font-size:260%; font-weight:normal;} div#content h2{ font-size:220%; font-weight:normal;} div#content h3{ font-size:180%; font-weight:normal;} div#content h4{ font-size:150%;} div#content h5{ font-size:130%;} div#content h6{ font-size:180%; font-weight:normal;color:#2591ba; } /*---- Content - Section----*/ div#content div.section{ padding-top:8px; margin-bottom:15px;} div#content div.section h1{ color:#1c3343; margin-bottom:3px;} div#content div.section h3{color:#2591ba; margin-bottom:15px;} div#content div.section img{ margin:20px 0 5px 5px;} div#content div.section div.location{ background:url(../images/content/location-bg.gif) 0 0 no-repeat; padding:3px; overflow:hidden; margin-bottom:20px;} div#content div.section div.location p{ background:url(../images/content/location-left.jpg) 0 0 no-repeat; float:left; font-size:120%; color:#FFF; margin:0px;} div#content div.section div.location p span { background:url(../images/content/location-right.jpg) 100% 0 no-repeat; line-height:28px; padding:0 10px; float:left;} div#content div.section p{ font-size:120%; color:#5d767f; margin-bottom:20px; line-height:25px;} /*---- Content - Comman----*/ a.more-link{ background:url(../images/content/more-left.gif) 0 0 no-repeat; float:right; text-decoration:none; color:#FFF; top:-90px; } a.more-link span{ background:url(../images/content/more-right.gif) 100% 0 no-repeat; float:left; padding:1px 10px 10px;} a.more-link:hover{text-decoration:none;} /*---- Box ----*/ div.box div.box-top{ background:url(../images/content/main/box-top-middle.gif) 0 0 repeat-x;} div.box div.box-top-left{ background:url(../images/content/main/box-top-left.gif) 0 0 no-repeat;} div.box div.box-top-right{ background:url(../images/content/main/box-top-right.gif) 100% 0 no-repeat; padding:5px 0 6px 7px;} div.box div.box-middle{ border:#e0e0e0 1px solid; border-bottom:0; border-top:0; overflow:hidden;} div.box div.box-bottom{ background:url(../images/content/main/box-bottom-middle.gif) 0 0 repeat-x;} div.box div.box-bottom-left{ background:url(../images/content/main/box-bottom-left.gif) 0 0 no-repeat;} div.box div.box-bottom-right{ background:url(../images/content/main/box-bottom-right.gif) 100% 0 no-repeat; height:28px;} /*---- Frame ----*/ div.img-frame{ float:left;} div.img-frame div.img-frame-top{ background:url(../images/content/main/frame-right.gif) 100% 0 repeat-y;} div.img-frame div.img-frame-top-inner{ padding:3px 10px 1px 3px; background:url(../images/content/main/frame-top.gif) 100% 0 no-repeat;} div.img-frame div.img-frame-bottom{ background:url(../images/content/main/frame-bottom-middle.gif) 0 0 repeat-x;} div.img-frame div.img-frame-bottom-right{ background:url(../images/content/main/frame-bottom-right.gif) 100% 0 no-repeat;} div.img-frame div.img-frame-bottom-left{ background:url(../images/content/main/frame-bottom-left.gif) 0 0 no-repeat; height:8px;} /*---- Box 2----*/ div.box2{ margin-bottom:20px;} div.box2 div.box2-top-left{ background:#98e2fd url(../images/content/sidebar/box2-img.gif) 0 0 no-repeat;} div.box2 div.box2-top-right{ background:url(../images/content/sidebar/box2-img.gif) 100% -15px no-repeat; height:11px;} div.box2 div.box2-middle{ background:#98e2fd; padding:0 6px;} div.box2 div.box2-bottom{ background:url(../images/content/sidebar/box2-img.gif) 0 -29px repeat-x; height:21px;} div.box2 div.box2-bottom-left{ background:url(../images/content/sidebar/box2-img.gif) 0 -51px no-repeat;} div.box2 div.box2-bottom-right{ background:url(../images/content/sidebar/box2-img.gif) 100% -73px no-repeat; height:21px;} /*---- Inner - Box----*/ div.inner-box div.inner-box-left{ background:#fff url(../images/content/sidebar/box2-img.gif) 0 -94px no-repeat;} div.inner-box div.inner-box-right{ background:url(../images/content/sidebar/box2-img.gif) 100% -119px no-repeat; height:11px;} div.inner-box div.inner-box-middle{ background:#FFF; padding:4px 10px;} /*---- Main----*/ div#main h3{color:#5D767F; line-height:26px;} /*---- Main - HIghlighls----*/ div#highlights{ margin-bottom:25px;} div#highlights div.img-frame{ width:151px;} div#highlights h3{ background:url(../images/content/main/icon1.gif) 0 0 no-repeat; padding-left:43px;} div#highlights h4{ margin-bottom:10px; background:url(../images/content/main/arrow.gif) 156px 0 no-repeat; padding-left:180px; line-height:16px;} div#highlights h4 a{ color:#0a98d0; text-decoration:none;} div#highlights p{ color:#5d767f; font-size:120%; line-height:19px; margin-bottom:15px;} div#highlights span p{ padding-left:180px; color:#5d767f; font-size:120%; line-height:19px; margin-bottom:15px;} div.box div.highlight{ padding:12px 0px 8px 0px; border-bottom:#eaeaea 1px solid; margin:0 15px 0 8px;} div#highlights div.last{ border:0;} /*---- Main - History----*/ div#history.box{ width:306px; float:left;} div#history.box h3{ background:url(../images/content/main/icon2.gif) 0 0 no-repeat; padding-left:47px;} div#history.box div.box-middle{ padding: 10px 10px 0;} div#history.box p{ font-size:120%; line-height:26px; color:#5d767f; margin-bottom:30px;} div#history div.img-frame{ width:285px;} /*---- Main - places----*/ div#places.box{ width:306px; float:right;} div#places.box h3{ background:url(../images/content/main/icon3.gif) 0 0 no-repeat; padding-left:47px;} div#places.box div.box-middle{ padding: 10px 3px 0;} div#places.box p{ font-size:110%; line-height:19px; color:#5d767f; margin-bottom:15px;} div#places.box h5{ color:#0a98d0; line-height:19px;} div#places.box div.place{ margin:0px 3px; padding:0px; margin-bottom:15px; border-bottom:1px solid #EAEAEA;} div#places.box div.last{ border:0;} div#places.box div.img-frame{ background:url(../images/content/main/frame.png) 0 0 no-repeat; padding:3px 10px 8px 2px;} /*---- Updates----*/ div#updates.box{ margin-bottom:20px;} div#updates.box h3{ background:url(../images/content/main/icon4.gif) 0 0 no-repeat; padding-left:47px; line-height:26px; color:#5D767F;} div#updates.box h2{ line-height:26px; padding-left:422px; margin-bottom:15px;} div#updates.box h2 img{ float:left; margin:0 5px 5px 0;} div#updates.box h2 a{color:#0a98d0; text-decoration:none;} div#updates.box p{ line-height:26px; color:#5d767f; padding-left:430px; font-size:120%; margin-bottom:20px;} div#updates.box div.highlight{ border:0;} div#updates div.img-frame{ width:411px;} /*---- Addbox----*/ div#content div.adbox { margin-bottom:30px; z-index:5; position:relative;} /*div#content div.adbox p{ background:url(../images/content/arrow1.gif) 0 0 no-repeat; padding-left:20px; color:#fcce3c; text-transform:uppercase; font-size:140%; margin-bottom:10px; line-height:12px;}*/ div#content div.adbox p{ padding-left:20px; color:#fcce3c; text-transform:uppercase; font-size:140%; margin-bottom:10px; line-height:12px;} div#sidebar div.adbox { position:static;} /*---- Dash Board----*/ div#dashboard{ background:#E2F4FC url(../images/content/deshboard-bg.gif) 0 0% repeat-x; margin-top:-125px; padding-top:135px; z-index:1; position:relative;} div#dashboard div.wrapper{ background:url(../images/content/lining.jpg) 0 0 no-repeat; width:980px;} div#dashboard h2{ color:#066585; margin-bottom:10px;} div#dashboard div.section img{ float:left; border:#456672 1px solid; margin:0 5px 5px 0;} div#dashboard div.section p{ font-size:110%; color:#2e90b8; line-height:15px;} div#dashboard div.section p a{color:#113543; font-weight:bold;} div#dashboard div.section div.activity{ margin-bottom:15px;} div#dashboard div.section{ width:276px; padding-right:15px; padding-right:30px; background:url(../images/content/devider.gif) 100% 0 no-repeat; float:left; margin-right:30px;} div#dashboard div.section ul li{ color:#2e90b8; font-size:110%; line-height:24px; background:url(../images/content/main/border.gif) 0 100% repeat-x;} div#dashboard div.section ul li a{color:#2e90b8; text-decoration:none;} div#dashboard div.last{ background:none; margin:0;} /*---- Sidebar ----*/ div#sidebar h2{ font-size:250%; color:#FFF; padding-left:7px;} div#sidebar div.adbox p{ float:right;} div.box2 p{ font-size:140%; color:#000; margin-bottom:10px; line-height:20px;} /*---- Sidebar - Access form----*/ div#access-form form{ margin-bottom:20px; padding-left:5px;} div#access-form form label{ font-size:140%; color:#000; line-height:20px; margin-bottom:10px; display:block;} div#access-form form p{ background:url(../images/content/sidebar/textbox.gif) 0 0 no-repeat; padding:11px 15px; margin-bottom:12px;} div#access-form form input.textfield{ width:225px; font-size:90%; border:0; background:#e9f6fb;} div#access-form form input.submit{ background:url(../images/content/sidebar/button.gif) 0 0 no-repeat; color:#000; font-size:140%; border:0; padding:8px 0px; width:146px; text-align:center; float:right; margin-right:8px; cursor:pointer} div#access-form div.userhelp{ background:url(../images/content/sidebar/register-bg.gif) 0 0 no-repeat; padding:10px;} div#access-form div.userhelp p { font-size:110%; margin-bottom:4px;} div#access-form div.userhelp p a{ color:#5d767f;} /*---- Sidebar - newsletter----*/ div#newsletter-form form{ margin-bottom:20px; padding-left:5px;} div#newsletter-form form p{ background:url(../images/content/sidebar/textbox.gif) 0 0 no-repeat; padding:11px 15px; margin-bottom:12px;} div#newsletter-form form p input.textfield{ width:225px; font-size:90%; border:0; background:#e9f6fb;} div#newsletter-form form input.submit{ background:url(../images/content/sidebar/button.gif) 0 0 no-repeat; color:#000; font-size:140%; border:0; padding:8px 0px; width:146px; text-align:center; float:right; margin-right:8px; cursor:pointer;} div#sidebar div#newsletter-form p.rss{ background:url(../images/content/sidebar/rss.gif) 0 0 no-repeat; padding-left:20px; color:#066585; font-size:110%; line-height:16px;} div#sidebar div#newsletter-form p.rss a{ color:#066585;} /*---- Sidebar - social sites----*/ div#social-sites a{float:left; margin-right:35px; text-align:center; text-decoration:none;} div#social-sites a.twitter{ padding-top:8px;} div#social-sites a span{ display:block; font-size:140%; color:#066585; padding-top:5px;} /*---- Footer ----*/ div#footer h1{ float:right;} div#footer h1 a{ display:block; position:relative; width:420px; height:80px;} div#footer h1 a span{ display:block; position:absolute; width:420px; height:80px; left:0px; top:0px; background:url(../images/footer/footer-logo.jpg) 0 0 no-repeat;} div#footer p{ font-size:120%; color:#5aadce; line-height:20px; padding-top:20px; font-weight:bold; margin-bottom:3px;} div#footer div.footer-nav ul li{ float:left; padding-right:2px; color:#FFF; font-size:120%; line-height:15px;} div#footer div.footer-nav ul li a{ color:#FFF; line-height:15px;} /*------------------------------------------ // 4.1 INNER PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Content ----*/ div#content.inner{ background:none; padding-top:20px;} div#content.inner h2{ font-size:230%;} /*---- Breadcrumbs ----*/ div#breadcrumbs{ background:url(../images/content/main/box3-top-middle.gif) 0 0 repeat-x;} div#breadcrumbs div.breadcrumbs-left{ background:url(../images/content/main/box3-top-left.gif) 0 0 no-repeat;} div#breadcrumbs div.breadcrumbs-right{ background:url(../images/content/main/box3-top-right.gif) 100% 0 no-repeat; padding:5px 0 6px 7px;} div#breadcrumbs p{ font-size:130%; line-height:25px; color:#5d767f;} div#breadcrumbs p span{ font-weight:bold; background:url(../images/content/main/arrow1.gif) left center no-repeat; padding-left:15px; margin-left:5px;} /*---- Box ----*/ div#hoteles.box div.box-middle{ border:#cbdce5 1px solid; border-bottom:0; border-top:0; overflow:hidden; background:url(../images/content/main/box-middle-bg.gif) 0 100% repeat-x;padding:0 10px;} div#hoteles.box div.box-bottom{ background:url(../images/content/main/box3-bottom-middle.gif) 0 0 repeat-x;} div#hoteles.box div.box-bottom-left{ background:url(../images/content/main/box3-bottom-left.gif) 0 0 no-repeat;} div#hoteles.box div.box-bottom-right{ background:url(../images/content/main/box3-bottom-right.gif) 100% 0 no-repeat; height:28px;} a.button1{ background:url(../images/content/main/button-left.gif) 0 0 no-repeat; float:left; } a.button1:hover{text-decoration:none;} a.button1 span{ background:url(../images/content/main/button-right.gif) 100% 0 no-repeat; line-height:32px; padding:0 10px; float:left; color:#2b6479; text-transform:uppercase;} /*---- Hoteles ----*/ div#hoteles h2{ color:#103544; background:url(../images/content/main/h2-bg.jpg) 0 0 repeat-x; margin:0 -10px 20px; line-height:37px; padding-left:10px; text-align:left; } div#hoteles div.box-top-right p{ color:#1c3343; margin:0px; padding-left:10px;} div#hoteles div.img-frame{ margin-left:60px; width:508px; float:none;} div#hoteles p{ font-size:130%; line-height:25px; color:#5d767f; margin-bottom:20px;} div#content div.heading{ background:#33abd7 url(../images/content/main/heading-left.gif) 0 0 no-repeat; margin-bottom:20px;} div#content div.heading h2{ background:url(../images/content/main/heading-right.gif) 100% 0 no-repeat; padding-right:10px;} div#content div.heading h2 span{ background:url(../images/content/main/heading-bg.gif) 100% 0 no-repeat; line-height:48px; color:#FFF; padding:0 10px; display:block;} /*---- Map ----*/ div#map{ text-align:center;} div#map h2{ text-align:left;} div#map img.map{ border:#33abd7 1px solid;} div#map img{ margin-bottom:30px;} /*---- hotel - Details ----*/ div#hotel-details{ margin-bottom:20px;} div#hotel-details ul {border-bottom:#d8d8d8 1px solid;} div#hotel-details ul li{ color:#5d767f; font-size:120%; background:url(../images/content/main/dot.gif) 0 16px no-repeat; line-height:24px; width:300px; float:left; border-bottom:#d8d8d8 1px solid; padding:10px 0px 10px 15px; } div#hotel-details ul li.no-bg { border-bottom:none; } div#hotel-details ul li span{ font-size:117%; color:#066585; font-weight:bold; line-height:24px; } div#hotel-details div.details{padding-left:10px;} /*----Related - Company ----*/ div#related-companies div.box{width:308px; margin-bottom:20px;} div#related-companies div.box-bottom{background:url(../images/content/main/box4-bottom-left.gif) 0 0% no-repeat; padding-left:9px;} div#related-companies div.box-bottom-left{background:url(../images/content/main/box4-bottom-right.gif) 100% 0% no-repeat; padding-right:9px;} div#related-companies div.box-bottom-right{ height:9px; background:url(../images/content/main/box4-bottom-middle.gif) 0 0 repeat-x; line-height:9px;} div#related-companies div.box-middle{ padding:10px 10px 1px 10px;} div#related-companies div.img-frame{ margin:0 5px 5px 0; width:160px;} div#related-companies div.box p{ font-size:130%; color:#066585; margin-bottom:15px;} div#related-companies div.box p span{ font-size:85%; color:#5d767f;} div#related-companies div.box a{color:#3cb1da; font-size:110%; font-weight:bold; text-decoration:underline;} /*----Pagignation----*/ div#pagignation{ text-align:center; padding-bottom:2px; color: #000000;} div#pagignation a.previous{ width:29px; height:30px; border:0; padding:0px; background:none;} div#pagignation a.next{ width:29px; height:30px; border:0; padding:0px; background:none;} div#pagignation a{ padding:4px 8px; background:#5d767f; margin-right:15px; border:#1d4e5f 1px solid; color:#FFF; font-size:190%; text-decoration:none;} div#pagignation a img{ vertical-align:middle;} div#pagignation a.active{background:#206e90; background:#3cb1da 1px scroll;} .resize2 { border: 3px double #333; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } .resize2 img { margin: -220px 0 0 -210px; padding: 6em 0 0 6em; } /* Easy Slider */ #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0; padding:0; list-style:none; } #slider2{margin-top:1em;} #slider li, #slider2 li{ /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width:475px; height:300px; overflow:hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev{ display:block; width:30px; height:77px; position:absolute; left:-30px; top:71px; z-index:1000; } #nextBtn, #slider1next{ left:696px; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a{ display:block; position:relative; width:30px; height:77px; background:url(../images/btn_prev.gif) no-repeat 0 0; } #nextBtn a, #slider1next a{ background:url(../images/btn_next.gif) no-repeat 0 0; } /* numeric controls */ ol#controls{ margin:1em 0; padding:0; height:28px; } ol#controls li{ margin:0 10px 0 0; padding:0; float:left; list-style:none; height:28px; line-height:28px; } ol#controls li a{ float:left; height:28px; line-height:28px; border:1px solid #ccc; background:#DAF3F8; color:#555; padding:0 10px; text-decoration:none; } ol#controls li.current a{ background:#5DC9E1; color:#fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;} /* // Easy Slider */