@font-face {
	font-family: Georgia;
	src:url("../../../fonts/GEORGIA.TTF");
}

@font-face {
	font-family: BrushScript;
	src:url('../../../fonts/BrushScriptStd.otf');
}

/*@font-face {
	src:url("../../../fonts/ARIAL.TTF");
	font-family: Arial;
}*/

/* Define which font to use for most of the text in the layout here
    Also, the background color should be set here
*/
body {
    font-family: Arial;
    background-color: #c8d0d3;
}

/* The H1 element is used as the title of all book pages */
h1 {
    font-family: BrushScript;
    color: #a10f2c;
}
/* The H2 element is used as a sub-header in several book pages */
h2 {
    font-family: BrushScript;
    color: #a10f2c;
}

/* Style your buttons */
input[type=button], input[type=submit] {
    background-color: #0f629e;
    background: -moz-linear-gradient(top, #69779d 0%, #1c2d5c 100%);
    background: -webkit-linear-gradient(top, #69779d 0%,#1c2d5c 100%);
    background: -o-linear-gradient(top, #69779d 0%,#1c2d5c 100%);
    background: -ms-linear-gradient(top, #69779d 0%,#1c2d5c 100%);
    background: linear-gradient(180deg, #69779d 0%,#1c2d5c 100%);
    border: 1px solid #152347;
    font-size: 12px;
}
input[type=button]:hover, input[type=submit]:hover {
    border-color: #344470;
}

/* This is the outermost container of the entire viewer content.
In themes where the entire design is contained in a background image (shame on you),
that image should be applied to this container.
Otherwise, no styles should be applied here
*/
div#doublewrapper {
    background-image: url(images/bg.png);
}

/* This wrapper is the innermost container of the entire viewer.  It can be used to
apply a drop shadow, border, rounded corners, etc. to the entire viewer
*/
div#wrapper {
    /*
    Here is some sample CSS to achieve the drop shadow, rounded-corner effect of the remaxResultsUtah theme
    box-shadow: 0px 0px 24px 12px #808080;
    -webkit-box-shadow: 0px 0px 24px 12px #808080;
    -ms-box-shadow: 0px 0px 24px 12px #808080;
    border-bottom-left-radius: 20px 20px;
    border-bottom-right-radius: 20px 20px;
    */
}

div.openHouseTabInactive {
}
div.openHouseTabActive {
}

.openHouseHeader {
    color: #2c3f71;
    font-size: 16px;
}

/* Defines a style for the entire agent bar - could be a background color or gradient or image */
div#agentBar {
}

/* Defines the font attributes of the main title of the viewer
positioned at the top center - usually 'A Beautifully Crafted Home'*/
div#agentBar #viewerTitle {
    font-size: 24px;
    padding-bottom: 15px;
    border-bottom: 1px solid #800000;
    font-family: BrushScript, serif;
    color: #a10f2c;
}

/* Defines the font attributes for the subtitle of the viewer (usually the home's address) */
div#agentBar #viewerSubTitle {
    font-size: 18px;
    padding-top: 8px;
    font-weight: bold;
    font-family: Arial;
    color: #1a2e65;
}

/* Defines a generic style for the text about the agent in the agent bar.
The following few styles also exist for the coagent (i.e. .coagentText, div#coagentName, etc.)
*/
.agentText, .coagentText {
    color: #000080;
    font-weight: bold;
    font-size: 14px;
}

/* Defines a specific style for the agent's name text in the agent bar */
div#agentName, div#colistingAgentName {
    margin-bottom: 4px;
}
/* Defines a specific style for the agent's agency text in the agent bar */
div#agency, div#colistingAgency {
    font-size: 18px;
}
/* Defines a specific style for the agent's phone text in the agent bar */
div#agentPhone, div#colistingAgentPhone {
}

/* Defines the style for the entire outer container of the book menu - this is usually just
a border and a drop shadow */
div#bookMenuContainer {
    box-shadow: 0px 2px 10px 3px #808080;
    -webkit-box-shadow: 0px 2px 10px 3px #a0a0a0;
    -ms-box-shadow: 0px 2px 10px 3px #a0a0a0;

    border: 1px solid #000000;
}

/* Defines the style for the small header for the book menu (the containing element for the guide book icon)
Usually this is a gradient background */
div#bookMenuHeader, div#fullScreenMode {
    background: -moz-linear-gradient(top, #274584 0%, #1b2e5b 100%);
    background: -webkit-linear-gradient(top, #274584 0%,#1b2e5b 100%);
    background: -o-linear-gradient(top, #274584 0%,#1b2e5b 100%);
    background: -ms-linear-gradient(top, #274584 0%,#1b2e5b 100%);
    background: linear-gradient(180deg, #274584 0%,#1b2e5b 100%);
    color: white;
}

/* Defines the appearance of the book menu.  Use this style to set a background image or
color for the book menu */
div#bookMenu {
    background-color: #ffffff;
}

/* Defines the style for a book menu link (i.e. Property Details, Property Map
Defaults:
    margin: 8px 0px 8px 0px;
    padding: 6px;
    cursor: pointer;
Create a background color, rounded corners, a hover style, etc. right here
*/
div.bookMenuItem {
    text-transform: uppercase;
    font-size: 11px;
    color: #000000;
}
div.bookMenuItem:hover { color: #a10f2c; }


/*** Book pages ***/

div#book {
    background-image: url(../../images/books_and_pages/plain_red/redBook.png);
}

div.bookPageRight {
    background-image: url(../../images/books_and_pages/plain_red/pages.png);
}

div.bookPageLeft {
    background-image: url(../../images/books_and_pages/plain_red/pages.png);
}

/* Defines the page border style - usually an outline of the page in the theme color */
div.bookPageFrameLeft {
    border-top: 3px solid #a10f2c;
    border-bottom: 1px solid #a10f2c;
}
div.bookPageFrameRight {
    border-top: 3px solid #a10f2c;
    border-bottom: 1px solid #a10f2c;
}

/* Defines the style for links within the book */
div.bookLink {
    color: #1a2e65;
}
div.bookLink:hover {
}

/* Define the main font style for all book pages here
Defaults:
    font-size: 12px;
    color: #000000;
    font-weight: normal;
*/
div.bookPageContent {
}

/* Defines the style of the first paragraph explanatory text that appears on the left side of most book pages */
div.bookHeaderText {
    color: #1a2e65;
    border-color: #800000;
}

/* This DIV is used to create dividers (usually horizontal lines) between paragraphs within the book
creating some height to this element and adding a background image could be useful if a more
stylized divider is desired.
Defaults:
    height: 0px;
    margin: 15px 0px 15px 0px;
    border-top: 1px solid #000000;
*/
div.themedDivider {
    border-top: 1px solid #a10f2c;
}

div.propertydetails_address {
    color: #1a2e65;
}




/* The mediaViewerContainer is the outermost container of the mediaViewer.  Apply
gradients or background colors to this element in order to frame the mediaViewer in something
nice
*/
div#mediaViewerContainer {
}

/* The mediaToolbar should have some background color or gradient defined here
unless the layout is all achieved with a background image (again, shame on you)
*/
div#mediaToolbar {
    /*
    Here's an example that achieves the look found in the remaxResultsUtah theme
    background: -moz-linear-gradient(top, #274584 0%, #1b2e5b 100%);
    background: -webkit-linear-gradient(top, #274584 0%,#1b2e5b 100%);
    background: -o-linear-gradient(top, #274584 0%,#1b2e5b 100%);
    background: -ms-linear-gradient(top, #274584 0%,#1b2e5b 100%);
    background: linear-gradient(180deg, #274584 0%,#1b2e5b 100%);
    border-radius: 8px 8px;
    */
}

/* This class stylizes the buttons found in the mediaToolbar */
div.viewerButton {
    border: 1px solid #000040;
    color: #ffffff;
    font-size: 11px;
    text-align: center;
    background-color: transparent;
}
div.viewerButton:hover {
    border: 1px solid #a0a0ff;
}
/* This class is used when a button in the mediaToolbar is pressed */
div.viewerButton.pressed {
    background-color: #0b1e4b;
}

/* This specific selector affects thumbnail images in the mediaThumbnail area when
they are hovered with the mouse
*/
div.mediaThumbnailsContainer img:hover {
    box-shadow: 0px 0px 10px 3px #a0ffff;
    -webkit-box-shadow: 0px 0px 10px 3px #a0ffff;
    -moz-box-shadow: 0px 0px 10px 3px #a0ffff;
    -ms-box-shadow: 0px 0px 10px 3px #a0ffff;
}

/* This DIV class can be used to stylize the text that accompanies each thumbnail in the viewer */
div.thumbnail {
    color: #000000;
}
/* This img style is used when a thumbnail is selected and usually applies an outerglow
Defaults:
    box-shadow: 0px 0px 10px 3px #a0ffff;
    -webkit-box-shadow: 0px 0px 10px 3px #a0ffff;
    -moz-box-shadow: 0px 0px 10px 3px #a0ffff;
    -ms-box-shadow: 0px 0px 10px 3px #a0ffff;
*/
div.thumbnailImg img.selected {
}
div#mediaThumbnailsLeft {
    /* Defaults:
        background-image: url(images/left_right_arrows.png);
        background-size: 100px 210px;
        background-position: 0px 0px;
    */
    background-image: url(images/prev_next_arrows.png);
}
div#mediaThumbnailsRight {
    /* Defaults:
        background-image: url(images/left_right_arrows.png);
        background-size: 100px 210px;
        background-position: -50px 0px;
    */
    background-image: url(images/prev_next_arrows.png);
}

/* This style is applied to the footer (i.e. the 'Powered by Circlepix.com' text) */
div#footer a { color: #000000; text-decoration: none; }
div#footer a:hover { color: #000000; text-decoration: none; }
div#footer a:visited { color: #000000; text-decoration: none; }
div#footer a:active { color: #000000; text-decoration: none; }