﻿@charset "utf-8";
/* CSS Document */

body.list {
    background: url(images/bg.jpg) no-repeat scroll center top transparent;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: calibri;
}

#wrapper {
    width: 950px;
    margin: auto;
    height: 100%;
}

#header {
    margin-top: 10px;
}

#logo {
    background-image: url(images/logo.png);
    height: 118px;
    width: 270px;
    float: left;
}

#menu {
    float: right;
    margin: 72px 0 0;
}

    #menu ul {
        margin: 0;
    }

    #menu li {
        float: left;
        list-style: none outside none;
        margin-left: 20px;
    }

        #menu li a {
            color: #817f78;
            font-size: 18px;
            text-decoration: none;
        }

            #menu li a:hover {
                color: #6d4f23;
            }

.clear {
    clear: both;
}

#content {
    margin-top: 20px;
}

#contentWord {
    width: 230px;
    float: left;
    margin-right: 20px;
}

.ayat {
    font-size: 20px;
    color: #7c6e4e;
    line-height: 30px;
}

.pasal {
    font-size: 16px;
    margin-top: 10px;
    color: black;
}

#homeFrames {
    float: left;
    height: 697px;
}

#slide-runner, .frames {
    float: left;
    height: 697px;
}

.frame {
    float: left;
    margin: 0 8px 5px 0;
}

.frameHome {
    float: left;
    margin: 0;
}

.imageColumn {
    float: left;
    margin-right: 8px;
}

.icon {
    left: -20px;
    position: absolute;
}

#footer {
    width: 250px;
    height: 34px;
    margin: 0 auto;
    padding-top: 50px;
    font-size: 12px;
    color: white;
}

a {
    border: none;
}

    a > img {
        border: none;
    }

#gallerypaginate {
    /*width:213px;*/
    margin: auto;
    padding-top: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

    #gallerypaginate a {
        font-size: 18px;
        color: #817f78;
        margin: 0 5px;
    }

    #gallerypaginate .flatview a:hover, #gallerypaginate .flatview a.selected {
        color: #36220b;
    }

#slide-runner {
    width: 776px;
    position: relative;
}

#prevButton {
    width: 27px;
    height: 27px;
    background-repeat: no-repeat;
    background-image: url(images/leftDefault.png);
    float: left;
}

    #prevButton:hover {
        background-image: url(images/leftHover.png);
    }

#nextButton {
    width: 27px;
    height: 27px;
    background-repeat: no-repeat;
    background-image: url(images/rightDefault.png);
    float: left;
}

    #nextButton:hover {
        background-image: url(images/rightHover.png);
    }

.flatview {
    float: left;
    line-height: 24px;
}

#groom {
    background-image: url("images/groom-background.png");
    background-repeat: no-repeat;
    height: 561px;
    margin: 20px 0 0 96px;
    padding-top: 45px;
    width: 546px;
}

#bride {
    background-image: url("images/bride-background.png");
    background-repeat: no-repeat;
    height: 469px;
    margin: 20px 0 0 123px;
    padding-top: 100px;
    width: 519px;
}

p.letter {
    color: black;
    font-family: Georgia;
    font-size: 12px;
    margin-left: 95px;
    width: 427px;
    margin-top: 10px;
}

p.letterGroom {
    color: black;
    font-family: Georgia;
    font-size: 12px;
    margin-left: 69px;
    width: 427px;
    margin-top: 10px;
}
