Mini Kabibi Habibi
/* helpers */
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.align-center {
text-align: center;
}
html, body, .layout-content, .content {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
.dx-theme-win8-typography {
background: #fff url('../images/background.png') no-repeat center 0;
background-size: cover;
height: 100%;
}
.header {
text-align:right;
margin: 0 auto;
position: relative;
height: 50px;
}
.logo {
background: url('../images/logo.png') 0 0 no-repeat;
width: 196px;
height: 40px;
right: 12px;
top: 10px;
position: absolute;
}
.tiles {
height: 100%;
}
.tile {
width: 240px;
height: 220px;
float: left;
box-sizing: border-box;
margin: 0 12px 12px 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.gallery {
position: absolute;
height: 100%;
width: 100%;
}
.gallery-item, .gallery-item img {
max-width: 100%;
}
.dx-theme-win8 .dx-tileview {
padding: 0;
}
.dx-theme-win8 .tiles .dx-tile {
padding: 20px;
font-size: 11pt;
}
.tile-w2 {
width: 492px;
}
.tile-h2 {
height: 452px;
}
.tile-most-available-miles, .tile-my-cities, .tile-map {
background: #3a3b3c;
cursor: default;
}
.tile-most-available-miles h2, .tile-my-cities h2, .tile-map h3, .tile-search .search {
font-size: 13pt;
font-weight: 400;
}
/* tile hot deals */
.tile-hot-deals {
background: #ea8b2c;
background-image: url(../images/new_york/sunest_new_york.jpg);
background-size: cover;
cursor: pointer;
}
.tile-hot-deals h2 {
font-size: 25pt;
font-weight: 400;
}
.tile-hot-deals .new-york {
background: rgba(0,0,0, .5);
padding: 5px;
position: absolute;
bottom: 10px;
right: 10px;
}
.dx-theme-win8 .black-text,
.dx-theme-win8 .black-text .dx-toolbar .dx-toolbar-label,
.dx-theme-win8 .black-text .dx-list .dx-list-item,
.dx-theme-win8 .black-text .dx-list .dx-list-group-header
{
color: #000;
}
/* tile cities */
#my-cities-chart {
cursor: default;
}
#my-cities-chart text, #miles-chart text {
fill: #fff;
font-size: 11pt;
font-weight: 500;
}
/* tile weather */
.dx-theme-win8 .tiles .tile-weather {
background: url('../images/weather-bg.png') 0 0 no-repeat;
padding: 10px;
cursor: pointer;
}
.weather-featured {
background: url('../images/weather-featured.png') 0 0 no-repeat;
width: 162px;
height: 122px;
text-align: center;
margin: 46px auto;
font-weight: 400;
padding-top: 40px;
}
.weather-featured .sign {
font-size: 20pt;
line-height: 40pt;
}
.weather-featured .temp {
font-size: 40pt;
}
.weather-featured .city {
font-size: 10pt;
}
.weather-cities {
padding: 42px 16px;
}
.weather-city {
float: left;
margin: 0 10px;
font-weight: bold;
text-align: center;
}
.weather-city .city {
font-size: 11pt;
}
.weather-city .temp {
font-size: 20pt;
}
.weather-icon-sun {
width: 32px;
height: 32px;
background: url('../images/weather-icon-sun.png') 0 0 no-repeat;
display: inline-block;
}
/* tile map */
.dx-theme-win8 .tiles .tile-map {
padding: 10px;
cursor: pointer;
}
.map {
display: block;
margin-bottom: 5px;
}
/* tile search */
.tile-search {
background: #00a4db;
cursor: default;
}
.dx-theme-win8-typography .search {
background: url('../images/search-icon.png') 0 0 no-repeat;
text-decoration: none;
white-space: nowrap;
display: block;
width: 101px;
padding: 5px 0 0 55px;
height: 59px;
color: #fff;
margin: 60px auto;
}
/* tile photos */
.tile-photos {
position: relative;
cursor: pointer;
}
.tile-photos-gallery
{
width: 492px;
height: 220px;
}
.tile-photos-slide1 {
background:url(../images/new_york/01.jpg) no-repeat;
}
.tile-photos-slide2 {
background:url(../images/new_york/02.jpg) no-repeat;
}
.tile-photos-slide3 {
background:url(../images/new_york/03.jpg) no-repeat;
}
.tile-photos-slide4 {
background:url(../images/new_york/04.jpg) no-repeat;
}
.tile-photos-slide5 {
background:url(../images/new_york/05.jpg) no-repeat;
}
.tile-photos h3 {
font-size: 26pt;
font-weight: 400;
position: absolute;
bottom: 10px;
right: 10px;
text-shadow: 0 2px 10px #000;
z-index: 10;
}
/* hot deals */
.hot-deals-header {
position: absolute;
}
.hot-deals-header .logo {
right: 32px;
}
.hot-deals-header .dx-icon
{
border-color: black !important;
}
.hot-deals-wrapper {
height: 100%;
padding-top: 104px;
padding-bottom: 32px;
box-sizing: border-box;
}
.hot-deals-content {
background: #fff;
margin: 0 32px 32px;
padding: 32px 20px;
position: relative;
height: 100%;
box-sizing: border-box;
}
.hot-deals-left {
float: left;
width: 400px;
height: 100%;
}
.hot-deals-right {
margin-left: 500px;
height: 100%;
}
.hot-deals-right > div {
height: 100%;
}
.dx-theme-win8 .hot-deals .dx-scrollview-content {
padding: 0 20px;
}
.dx-theme-win8 .hot-deals .dx-toolbar .dx-toolbar-label {
font-size: 32pt;
}
.dx-theme-win8 .hot-deals .dx-list .dx-list-item {
white-space: normal;
padding: 4px;
}
.dx-theme-win8 .hot-deals .dx-list .dx-list-item:hover {
background: #ddd;
}
.find-flight-loading {
background: url('../images/win8-loading.gif') 0 0 no-repeat;
width: 64px;
height: 64px;
position: absolute;
margin: -32px 0 0 -32px;
top: 50%;
left: 50%;
}
.flight {
padding: 10px;
-webkit-transition: -webkit-transform .3s ease;
transition: transform .3s ease;
}
.flight:active {
-webkit-transform: scale(0.95, 0.95);
transform: scale(0.95, 0.95);
}
.flight-image {
width: 100px;
float: left;
margin-right: 10px;
}
.flight-image img {
max-width: 100%;
}
.selected-flight {
background: #f7931d;
color: #fff;
}
.dx-theme-win8 .dx-button-icon-back {
background: url('../images/back.png') 0 0 no-repeat;
}
.view-flight p, .view-flight h2 {
margin-bottom: 10px;
}
.dx-theme-win8 .dx-button.purchase-button {
border-color: #f7931d;
}
.dx-theme-win8 .dx-button.purchase-button .dx-button-text {
color: #f7931d;
}
.view-flight-image {
width: 300px;
float: left;
margin-right: 30px;
}
.view-flight .map {
margin: 10px 0;
border: 4px solid #ccc;
}
.view-flight-image img {
max-width: 100%;
border: 4px solid #ccc;
}
.dx-theme-win8 .dx-button {
border-color: #000;
}
.dx-theme-win8 .dx-button .dx-button-text {
color: #000;
}
.dx-theme-win8 .dx-toolbar {
background-color: transparent;
}
.dx-theme-win8 .dx-toolbar .dx-toolbar-item {
padding-top: 13px;
}