/* ---------------------------------------- */ /* Default styles for LARGE screen devices. */ /* ---------------------------------------- */ * { /* box-sizing: border-box; */ /* cursor: pointer; */ /* text-align: center; */ } body { color: rgb(0,0,0); /* Default the text colour to black. */ font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; font: bold 20px sans-serif; /* Default font for everything in the body of the HTML. */ text-align: center; /* Default text alignment for everything in the body of the HTML. */ } a:link { color: rgb(0,0,0); text-decoration: none; } a:visited { color: green; } a:hover { color: blue; } a:active { /* Do nothing with a clicked link for now. */ } /* Top level header, main and footer settings. */ /* --------------------------------------------*/ .header { background-image: url("../images/header-image-200.jpg"); /* Use a background image. */ border-bottom-style: solid; /* Define a border only at the bottom of the header. */ border-color: rgb(0,0,0); border-width: 1px; color: rgb(0,0,0); font: bold 32px sans-serif; margin: 0px 0px 50px; /* Creates some space below the bottom border. The other margins are set to zero so the header fills the defined . */ padding: 1px; /* Creates some space around the header text to show the header background image. */ text-align: center; } .footer { background-color: rgb( 240,240,240 ); border-color: rgb(0,0,0); border-bottom-style: solid; /* Define a bottom border for the footer. */ border-top-style: solid; /* Define a top border for the footer. */ border-width: 1px; color: rgb(0,0,0); font: bold 20px sans-serif; margin: 50px 0px 0px; /* Creates some space above the top border. The other margins are set to zero so the footer fills the defined . */ padding: 1px; text-align: center; } /* General classes. */ /* -----------------*/ .favourites-text-main { background: rgb(255,255,255); color: rgb(0,0,0); position: center; width: 100%; } .favourites-text-header { font: bold 32px sans-serif; } .favourites-image { border: 1px solid rgb(0,0,0); height: 100vh; /* "vh" is percentage of the viewport height. */ width: 100%; } .favourites-image1-1 { position: center; background: url("../images/favourite-hotels/firefly-01-exterior.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image1-2 { background: url("../images/favourite-hotels/firefly-02-room.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image1-3 { background: url("../images/favourite-hotels/firefly-03-room-view.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image2-1 { background: url("../images/favourite-hotels/gornergrat-01-exterior.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image2-2 { background: url("../images/favourite-hotels/gornergrat-02-room-view.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image3-1 { position: center; background: url("../images/favourite-hotels/lake-louise-01-exterior.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image3-2 { background: url("../images/favourite-hotels/lake-louise-02-lobby.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image3-3 { background: url("../images/favourite-hotels/lake-louise-03-room-view.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image4-1 { position: center; background: url("../images/favourite-hotels/wick-inn-01-exterior.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image4-2 { background: url("../images/favourite-hotels/wick-inn-02-beach-view.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image4-3 { background: url("../images/favourite-hotels/wick-inn-03-restaurant-view.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image5-1 { position: center; background: url("../images/favourite-hotels/sofitel-01-exterior.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image5-2 { background: url("../images/favourite-hotels/sofitel-02-atrium.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image5-3 { background: url("../images/favourite-hotels/sofitel-03-standard-room.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image5-4 { background: url("../images/favourite-hotels/sofitel-04-suite.jpg") no-repeat center fixed; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } /* ----------------------------------------- */ /* Override styles for SMALL screen devices. */ /* ----------------------------------------- */ @media ( max-device-width: 1024px ) { .favourites-image1-1 { position: center; background: url("../images/favourite-hotels/firefly-01-exterior.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image1-2 { background: url("../images/favourite-hotels/firefly-02-room.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image1-3 { background: url("../images/favourite-hotels/firefly-03-room-view.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image2-1 { background: url("../images/favourite-hotels/gornergrat-01-exterior.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image2-2 { background: url("../images/favourite-hotels/gornergrat-02-room-view.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image3-1 { position: center; background: url("../images/favourite-hotels/lake-louise-01-exterior.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image3-2 { background: url("../images/favourite-hotels/lake-louise-02-lobby.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image3-3 { background: url("../images/favourite-hotels/lake-louise-03-room-view.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image4-1 { position: center; background: url("../images/favourite-hotels/wick-inn-01-exterior.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image4-2 { background: url("../images/favourite-hotels/wick-inn-02-beach-view.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image4-3 { background: url("../images/favourite-hotels/wick-inn-03-restaurant-view.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image5-1 { position: center; background: url("../images/favourite-hotels/sofitel-01-exterior.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image5-2 { background: url("../images/favourite-hotels/sofitel-02-atrium.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image5-3 { background: url("../images/favourite-hotels/sofitel-03-standard-room.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } .favourites-image5-4 { background: url("../images/favourite-hotels/sofitel-04-suite.jpg") no-repeat center; background-size: contain; /* Ensures that the entire image is visible in the
element. */ } }