﻿.rooms-detail {
}

.rooms-detail .page-nav
{
    margin-bottom: 23px;
    overflow:hidden;
}

/*.rooms-detail .back-button
{
    float: left;
    line-height: 11px;
}*/

.rooms-detail .pagination
{
    float:left;
}

    .rooms-detail .pagination li
    {
        float:left;
        border-left:solid 1px #ccc;
        line-height: 10px;
        padding:0 8px;
    }

    .rooms-detail .pagination li:first-child
    {
        border-left:solid 0 #ccc;
    }

.rooms-detail .partial-share
{
    width: 500px;
    float: right;
}

    .rooms-detail .room-features .image-holder {
        position: relative;
    }
        .rooms-detail .room-features .image-holder img {
            display: block;
        }

        .rooms-detail .room-features .image-holder .hotspots {
            position: absolute;
            left:0; top:0;
            width:100%; height:100%;
            opacity: 0;
                -moz-transition: opacity linear .5s;
                -webkit-transition: opacity linear .5s;
            transition: opacity linear .5s;
        }

        .no-opacity .rooms-detail .room-features .image-holder .hotspots {
            height:0;
            overflow:hidden;
        }

        .no-opacity .rooms-detail .room-features .image-holder.show-hotspots .hotspots {
            height:100%;
            overflow:visible;
        }

            .rooms-detail .room-features .image-holder .hotspots li {
                width: 21px; height: 21px;
                margin-top: -9px; margin-left: -9px;
                background: rgba(0,0,0,.6);
                display: block;
                position: absolute;
                border-radius: 17px;
                    -moz-transition: background .3s linear;
                    -webkit-transition: background .3s linear;
                transition: background .3s linear;
            }

            .no-rgba .rooms-detail .room-features .image-holder .hotspots li {
                background: url(#); /* IE requires the element have some sort of non-transparent background to enable :hover */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#9d000000,endColorstr=#9d000000); 
                zoom: 1;
            }

                .rooms-detail .room-features .image-holder .hotspots li:before {
                    content:'';
                    display: block;
                    position: absolute;
                    left: 10px; top: 6px;
                    background: #fff;
                    width: 1px; height: 9px;
                }
                .rooms-detail .room-features .image-holder .hotspots li:after {
                    content:'';
                    display: block;
                    position: absolute;
                    top: 10px; left: 6px;
                    background: #fff;
                    height: 1px; width: 9px;
                }
                .rooms-detail .room-features .image-holder .hotspots li .message {
                    position: absolute;
                    top: 50%;
                    padding: 20px;
                    background: #fff;
                    width: 180px;
                    margin-top: -50px;
                    font: 13px/18px "Minion Italic", Times, "Times New Roman", serif;
                    color: #666;
                    opacity: 0;
                        -moz-transition: opacity .3s linear;
                        -webkit-transition: opacity .3s linear;
                    transition: opacity .3s linear;
                    z-index:5;
                }

                    .rooms-detail .room-features .image-holder .hotspots li.left .message
                    { 
                        left: -9999em;
                        margin-left: 12px;
                    }

                    .rooms-detail .room-features .image-holder .hotspots li.right .message {
                        right: -9999em;
                        margin-right: 12px;
                    }

                    /*.no-opacity .rooms-detail .room-features .image-holder .hotspots li .message {
                        filter:alpha(opacity=0);
                    }

                    .no-opacity .rooms-detail .room-features .image-holder .hotspots li:hover .message {
                        filter:alpha(opacity=100);
                    }*/

                    .rooms-detail .room-features .image-holder .hotspots li .message:before {
                        content:'';
                        overflow: hidden;
                        border-style: solid;
                        position: absolute;
                        top: 50%;
                        margin-top: -11px;
                    }

                        .rooms-detail .room-features .image-holder .hotspots li.left .message:before
                        {
                            right: 100%;
                            border-color: transparent #fff transparent transparent;
                            border-width: 11px 11px 11px 0;
                        }

                        .rooms-detail .room-features .image-holder .hotspots li.right .message:before
                        {
                            left: 100%;
                            border-color: transparent transparent transparent #fff;
                            border-width: 11px 0 11px 11px;
                        }

                    /*.rooms-detail .room-features .image-holder .hotspots li.right .message:before {
                        border-color: transparent transparent transparent #fff;
                        border-width: 11px 0 11px 11px;
                        right:auto; left: 100%;
                    }*/

                .rooms-detail .room-features .image-holder .hotspots li:hover {
                    background: rgba(0,0,0,.9);
                }

                .no-rgba .rooms-detail .room-features .image-holder .hotspots li:hover {
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3000000,endColorstr=#b3000000); 
                }

                .rooms-detail .room-features .image-holder .hotspots li.left:hover .message {
                    left: 100%;
                    opacity: 1;
                }
                .rooms-detail .room-features .image-holder .hotspots li.right:hover .message {
                    right:100%;
                    opacity: 1;
                }

        .rooms-detail .room-features .image-holder.show-hotspots .hotspots {
            opacity: 1;
        }

        .rooms-detail .room-features .image-holder .toggle {
            background: rgba(255,255,255,.8);
            padding: 10px 20px;
            position: absolute;
            right:0; bottom:0;
            text-transform: uppercase;
            font-size: 12px;
            line-height: 18px;
            width: 190px;
            text-align: center;
        }

        .no-rgba .rooms-detail .room-features .image-holder .toggle {
            background: transparent;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff); 
            zoom: 1;
        }

            .rooms-detail .room-features .image-holder .toggle .hide,
            .rooms-detail .room-features .image-holder.show-hotspots .toggle .show {
                display: none;
            }
        .rooms-detail .room-features .image-holder.show-hotspots .toggle .hide {
            display: block;
        }


    .rooms-detail .room-info {
    }
        .rooms-detail .room-info form {
            border: solid 1px #afa593;
            padding: 29px;
            min-height: 254px;
        }

        .rooms-detail .room-info form.dates .error {
            display:none;
            padding: 5px;
            text-align: center;
        }

        .rooms-detail .room-info .date {
            border: solid 1px #e5e2dc;
            width: 112px; height: 93px;
            display: inline-block;
            text-align: center;
        }

        .rooms-detail .room-info .date:hover
        {
            border: solid 1px #ae9e83;
            cursor:pointer;
        }

            .rooms-detail .room-info .date .label {
                font: 14px "Minion Regular", Times, "Times New Roman", serif;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                background: #fff;
                display: inline-block;
                padding: 0 3px;
                position: relative;
                top: -11px;
                color: #000;
            }
            .rooms-detail .room-info .date .month {
                display: block;
                font: 15px/15px "Minion Italic", Times, "Times New Roman", serif;
            }
            .rooms-detail .room-info .date .day {
                display: block;
                font: 38px/46px "Minion Regular", Times, "Times New Roman", serif;
                color: #000;
            }
            
            .rooms-detail .room-info .date.empty .month,
            .rooms-detail .room-info .date.empty .day
            {
                display: none;
            }


            .rooms-detail .room-info .date .select {
                display: none;
                font: 15px/55px "Minion Italic", Times, "Times New Roman", serif;
            }
            .rooms-detail .room-info .date.empty .select {
                display: block;
            }

        .rooms-detail .room-info .arrival {
            float: left;
        }
        .rooms-detail .room-info .departure {
            float: right;
        }
        .rooms-detail .room-info .rates {
            clear: both;
            text-align:center;
            padding: 15px 0;
            color: #000;
        }
        .rooms-detail .room-info button {
            margin: 0 auto;
            display: block;
            width: 215px;
        }

        @media only screen and (max-width: 1279px) {
            .rooms-detail .room-info form
            {
                padding:25px 20px;
            }

            .rooms-detail .room-info .date {
                width: 90px;
            }
                .rooms-detail .room-info .date .label
                {
                    font-size: 12px;
                }

                .rooms-detail .room-info .date .select {
                    font-size: 14px;
                    line-height:55px;
                }

            .rooms-detail .room-info button
            {
                width: 195px;
                padding: 10px 30px;
            }
        }

        .no-mediaqueries.mq-1024px .rooms-detail .room-info form
        {
            padding:29px 20px;
        }

        .no-mediaqueries.mq-1024px .rooms-detail .room-info .date {
            width: 90px;
        }
            .no-mediaqueries.mq-1024px .rooms-detail .room-info .date .label
            {
                font-size: 12px;
            }

            .no-mediaqueries.mq-1024px .rooms-detail .room-info .date .select {
                font-size: 14px;
                line-height:55px;
            }

            .no-mediaqueries.mq-1024px .rooms-detail .room-info button
            {
                width: 195px;
                padding: 10px 30px;
            }

        .rooms-detail .room-info .info {
            padding: 0 110px 0 15px;
        }

        @media only screen and (max-width: 1279px)
        {
            .rooms-detail .room-info .info
            {
                padding: 0 0 0 15px;
            }
        }

        .no-mediaqueries.mq-1024px .rooms-detail .room-info .info
        {
            padding: 0 0 0 15px;
        }

        .rooms-detail .room-info p {
            margin-bottom: 20px;
        }
        .rooms-detail .room-info dl {
            margin-top: 20px;
            overflow: hidden;
        }
            .rooms-detail .room-info dt {
                width: 115px;
                float: left;
                clear: left;
                text-transform: uppercase;
                font-size: 12px;
                margin-bottom: 10px;
                color: #000;
            }
            .rooms-detail .room-info dd {
                padding-left: 125px;
                color: #666;
                margin-bottom: 10px;
            }


    .rooms-detail .no-online-reservations
    {
        text-align:center;
        padding: 25px 30px;
    }

.rooms-detail .room-offers {
}

    .rooms-detail .room-offers > div.columns-9
    {
        display:block;
    }

    .rooms-detail .room-offers .accordion {
        border: solid 1px #ae9e83;
        padding-left: 30px;
        padding-right: 30px;
    }

        .rooms-detail .room-offers .accordion h5
        {
            color:#766b58;
        }

        .rooms-detail .room-offers .accordion > li img {
            display: block;
            width: 49%;
            float: left;
        }
        .rooms-detail .room-offers .accordion > li .text {
            padding-left: 53%;
        }

        .rooms-detail .room-offers .accordion .open-reservation
        {
            margin-top:15px;
        }

.rooms-detail .room-features .type-video .video-container
{
    position:relative;
}

    .rooms-detail .room-features .type-video .ply-btn {
        background: url(/files/the-peninsula-hotels/default/images/icons.png) no-repeat -400px 0;
        width: 80px;
        height: 80px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -40px;
        margin-left: -40px;
        cursor: pointer;
        outline: 0;
    }

.rooms-detail .more-reasons .details
{
    padding:0 10px;
}