@font-face {
	/*font-family: Futura;
	src:url("../../../fonts/FUTURAL.TTF");*/
    src:url("/fonts/COUR.TTF");
	font-family: Courier;
}

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

/*** OPEN HOUSE POPUP WINDOW STYLES ***/

/* This is the style to be applied to the INACTIVE tabs in the open house popup window
Define background colors, gradients, borders, and rounded corners here
*/
div.openHouseTabInactive {
    /* Defaults:
        text-transform: uppercase;
        text-align: center;
        border-top-left-radius: 10px 10px;
        border-top-right-radius: 10px 10px;
        border: 1px solid #9BA0A3;
        cursor: default;
        background-color: #0f629e;
        color: #000000;
    Examples:
        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%);
		
	Use this code for no space (line) between tab and main body of the openhouse window.
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		border:1px solid #9C0604;
		height: 30px;
    */
    
    background: #9a9a9a;
background: -moz-linear-gradient(top,  #9a9a9a 0%, #3c3c3c 50%, #252525 56%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9a9a9a), color-stop(50%,#3c3c3c), color-stop(56%,#252525), color-stop(100%,#1b1b1b));
background: -webkit-linear-gradient(top,  #9a9a9a 0%,#3c3c3c 50%,#252525 56%,#1b1b1b 100%);
background: -o-linear-gradient(top,  #9a9a9a 0%,#3c3c3c 50%,#252525 56%,#1b1b1b 100%);
background: -ms-linear-gradient(top,  #9a9a9a 0%,#3c3c3c 50%,#252525 56%,#1b1b1b 100%);
background: linear-gradient(to bottom,  #9a9a9a 0%,#3c3c3c 50%,#252525 56%,#1b1b1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a9a9a', endColorstr='#1b1b1b',GradientType=0 );

    border-color: #999999;
    color: white;
    margin-left: 5px;
}
div.openHouseTabInactive:hover {
    /* Defaults: 
        background-color: #1e71ad;
    */
    background: #a5a5a5;
background: -moz-linear-gradient(top,  #a5a5a5 0%, #515151 50%, #3f3f3f 54%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5a5a5), color-stop(50%,#515151), color-stop(54%,#3f3f3f), color-stop(100%,#000000));
background: -webkit-linear-gradient(top,  #a5a5a5 0%,#515151 50%,#3f3f3f 54%,#000000 100%);
background: -o-linear-gradient(top,  #a5a5a5 0%,#515151 50%,#3f3f3f 54%,#000000 100%);
background: -ms-linear-gradient(top,  #a5a5a5 0%,#515151 50%,#3f3f3f 54%,#000000 100%);
background: linear-gradient(to bottom,  #a5a5a5 0%,#515151 50%,#3f3f3f 54%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5a5a5', endColorstr='#000000',GradientType=0 );

    border-color: black;
    color: #308a9f;
}
/* This is the style to be applied to the ACTIVE tabs in the open house popup window
Define background colors, gradients, borders, and rounded corners here
*/
div.openHouseTabActive {
    /* Defaults:
        text-transform: uppercase;
        text-align: center;
        border-top-left-radius: 10px 10px;
        border-top-right-radius: 10px 10px;
        cursor: default;
        background-color: #ffffff;
        color: #000000;
		
	Use this code for no space (line) between tab and main body of the openhouse window.
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		border:1px solid #9C0604;
		height: 30px;
    */
    background-color: black;
    color: white;
    border:1px solid #999999;
    border-bottom-color: black;
    
    margin-left: 5px;
}
div.openHouseTabActive:hover {
    color: #308a9f;
}

/* Defines the style of the outer-most container of the open house popup.
Some themes apply a border around the popup */
div#openHouseContent {
    /* Defaults:
        background-color: #ffffff;
        border: none;
    */
    color: white;
    background-color: black;
}

/* Defines the background color of the open house popup window page behind the 
image of the lady holding the open house sign */
div#openHousePage {
/* Defaults:
    background-color: #ffffff;
*/
background-color: black;
}

/* Defines the style for the open house header text on each page of the open house popup
*/
.openHouseHeader {
    /* Defaults:
        color: #000000;
        font-size: 16px;
    */
    color: #308a9f;
}
div#openHouseDrivingDirectionsContainer div.openHouseHeader{
    /*border-color: black;*/
    border-color: white;
}

form#openHouseRSVPForm{
     /*border-color: black;*/
     border-color: white;
}

/* This is a style specifically requested by Dori to be applied only to the divider
found on the first tab of the open house popup window ;)
*/
div#openHouseDivider {
    /* Defaults:
        height: 0px;
        padding: 1px 0px 2px 0px;
        border-bottom: 1px solid #000000;
    */
    border-color: white;
}



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

/* 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;
    */
}




/*** AGENT BAR STYLES ***/

/* 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 {
    /* Defaults:
        padding: 2px 20px 8px 20px;
        border-bottom: 1px solid #000000;
        font-size: 20px;
    Example of an image divider:
        border: none;
        padding-bottom: 30px;
        background-image:url(images/bgBookBorderBlue.png);
        background-position: bottom center;
        background-repeat: no-repeat;
    */
}

/* Defines the font attributes for the subtitle of the viewer (usually the home's address) */
div#agentBar #viewerSubTitle {
    /* Defaults:
        font-size: 14px;
    */
    color: #308a9f;
}

/* 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 {
    /* Defaults:
        color: #000000;
        font-weight: normal;
        font-size: 14px;
    */
}

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


/*** BOOK MENU STYLES ***/

/* Defines the style for the entire outer container of the book menu - this is usually just
a border and a drop shadow */
div#bookMenuContainer {
    /*
    Defaults:
        box-shadow: 0px 3px 7px 1px #000000;
        -webkit-box-shadow: 0px 3px 7px 1px #000000;
        -ms-box-shadow: 0px 3px 7px 1px #000000;
        border: 1px solid #000000;
    */
    border-color: #797b7d;
}

/* 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 {
    /*
    Example:
        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%);
    Defaults:
        color: #ffffff;
        font-size: 16px;
        text-transform: uppercase;
    */
    background: #999999;
background: -moz-linear-gradient(top,  #999999 0%, #3a3a3a 50%, #000000 56%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(50%,#3a3a3a), color-stop(56%,#000000), color-stop(100%,#000000));
background: -webkit-linear-gradient(top,  #999999 0%,#3a3a3a 50%,#000000 56%,#000000 100%);
background: -o-linear-gradient(top,  #999999 0%,#3a3a3a 50%,#000000 56%,#000000 100%);
background: -ms-linear-gradient(top,  #999999 0%,#3a3a3a 50%,#000000 56%,#000000 100%);
background: linear-gradient(to bottom,  #999999 0%,#3a3a3a 50%,#000000 56%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#000000',GradientType=0 );

    color: white;
}
div#bookMenuHeader:hover {
    background: #6db3f2;
background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );

border-color: #6db3f2;

color: black;
}


/* The containing DIV for the property guide book icon */
div#bookMenuGraphic {
    /* Defaults:
        background-image: url(../../images/book_icon/book_icon_white.png);
        background-size: 156px 35px;
        background-position: 0px 0px;
    */
}
div#bookMenuGraphic:hover { /*background-position: -52px 0px;*/ }
div#bookMenuGraphic.pressed { /*background-position: -104px 0px;*/ }

/* The containing DIV for the CLOSE button when the book is opened
 * Inherits styles from div#bookMenuHeader */
div#bookMenuCloseContainer {
    /* Defaults:
        text-align: center;
        padding: 10px 0px 0px 0px;
        cursor: default;
    */
}
div#bookMenuCloseContainer:hover {
    /* Defaults:
        text-decoration: underline;
    */
    background: #6db3f2;
background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );

border-color: #6db3f2;

color: black;

text-decoration: none;
}
div#bookMenuCloseContainer.pressed {
    background: #f3f9ff;
background: -moz-linear-gradient(top,  #f3f9ff 0%, #eff7ff 50%, #edf6ff 51%, #ebf3ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f9ff), color-stop(50%,#eff7ff), color-stop(51%,#edf6ff), color-stop(100%,#ebf3ff));
background: -webkit-linear-gradient(top,  #f3f9ff 0%,#eff7ff 50%,#edf6ff 51%,#ebf3ff 100%);
background: -o-linear-gradient(top,  #f3f9ff 0%,#eff7ff 50%,#edf6ff 51%,#ebf3ff 100%);
background: -ms-linear-gradient(top,  #f3f9ff 0%,#eff7ff 50%,#edf6ff 51%,#ebf3ff 100%);
background: linear-gradient(to bottom,  #f3f9ff 0%,#eff7ff 50%,#edf6ff 51%,#ebf3ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f9ff', endColorstr='#ebf3ff',GradientType=0 );

}

/* Defines the appearance of the book menu.  Use this style to set a background image or
color for the book menu */
div#bookMenu {
    /* Defaults:
        background-color: #ffffff;
        color: #000000;
        text-transform: uppercase;
    */
    background-color: black;
    color: white;
    border-color: #797b7d;
}

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

div.bookManuItem:active{
    color: red;
}


/*** BOOK PAGE STYLES ***/

/* Defines the look of the book.  This is where you'll set the background image to the book flavor of your choice */
div#book {
    /* Defaults:
        background-image: url(../../images/books_and_pages/plain_grey/greyBook.png);
    */
    background-image: url(../../images/books_and_pages/grey_spiral/book.png);
}

div.bookPageRight {
    /* Defaults:
        background-image: url(../../images/books_and_pages/plain_grey/pages.png);
    */
    background-image: url(../../images/books_and_pages/grey_spiral/pages.png);
}

div.bookPageLeft {
    /* Defaults:
        background-image: url(../../images/books_and_pages/plain_grey/pages.png);
    */
    background-image: url(../../images/books_and_pages/grey_spiral/pages.png);
}

/* Defines the page border style - usually an outline of the page in the theme color */
div.bookPageFrameLeft {
    /* Example:
        border-top: 3px solid #a10f2c;
        border-bottom: 1px solid #a10f2c;
    Example:
        border-top: 1px solid #890318;
        border-left: 1px solid #890318;
        border-bottom: 1px solid #890318;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    */
    border-top: 1px solid #efc3c4;
        border-left: 1px solid #efc3c4;
        border-bottom: 1px solid #efc3c4;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
}
/* Defines the style of the previous and next page buttons on the corners of the book pages */
div.prevPage {
    /* Defaults:
        font-size: 10px;
        color: #000000;
        text-transform: uppercase;
    */
}
div.bookPageFrameRight {
    /* Example:
        border-top: 3px solid #a10f2c;
        border-bottom: 1px solid #a10f2c;
    Example:
        border-top: 1px solid #890318;
        border-right: 1px solid #890318;
        border-bottom: 1px solid #890318;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    */
    border-top: 1px solid #efc3c4;
        border-right: 1px solid #efc3c4;
        border-bottom: 1px solid #efc3c4;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
}
/* Defines the style of the previous and next page buttons on the corners of the book pages */
div.nextPage {
    /* Defaults:
        font-size: 10px;
        color: #000000;
        text-transform: uppercase;
    */
}

/* The H1 element is used as the title of all book pages */
h1 {
    /* Defaults:
        font-family: Arial;
        font-size: 24px;
        color: #000000;
    */
    font-family: 'Courier New';
    font-weight: 100;
    color: #990000;
}
/* The H2 element is used as a sub-header in several book pages */
h2 {
    /* Defaults:
        font-family: Arial;
        font-size: 18px;
        color: #000000;
    */
    font-family: 'Courier New';
    font-weight: 100;
    color: blue;
}
/* This H2 element class is used on some book pages */
h2.underlined {
    /* Defaults:
        border-bottom: 1px solid #000000;
    */
}

/* Style your buttons */
input[type=button], input[type=submit] {
    /* Defaults:
        border-radius: 8px;
        text-transform: uppercase;
        color: #ffffff;
        padding: 3px 30px 5px 30px;
        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;
    */
    background: #797b7d;
background: -moz-linear-gradient(top,  #797b7d 0%, #595b5d 48%, #424446 54%, #424446 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#797b7d), color-stop(48%,#595b5d), color-stop(54%,#424446), color-stop(100%,#424446));
background: -webkit-linear-gradient(top,  #797b7d 0%,#595b5d 48%,#424446 54%,#424446 100%);
background: -o-linear-gradient(top,  #797b7d 0%,#595b5d 48%,#424446 54%,#424446 100%);
background: -ms-linear-gradient(top,  #797b7d 0%,#595b5d 48%,#424446 54%,#424446 100%);
background: linear-gradient(to bottom,  #797b7d 0%,#595b5d 48%,#424446 54%,#424446 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#797b7d', endColorstr='#424446',GradientType=0 );

}
input[type=button]:hover, input[type=submit]:hover {
    /* Defaults:
        border-color: #344470;
    */
    background: #a7def5;
background: -moz-linear-gradient(top,  #a7def5 0%, #86d3f4 50%, #6fc5e7 51%, #139ddd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7def5), color-stop(50%,#86d3f4), color-stop(51%,#6fc5e7), color-stop(100%,#139ddd));
background: -webkit-linear-gradient(top,  #a7def5 0%,#86d3f4 50%,#6fc5e7 51%,#139ddd 100%);
background: -o-linear-gradient(top,  #a7def5 0%,#86d3f4 50%,#6fc5e7 51%,#139ddd 100%);
background: -ms-linear-gradient(top,  #a7def5 0%,#86d3f4 50%,#6fc5e7 51%,#139ddd 100%);
background: linear-gradient(to bottom,  #a7def5 0%,#86d3f4 50%,#6fc5e7 51%,#139ddd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7def5', endColorstr='#139ddd',GradientType=0 );

border-color: #a7def5;
}
input[type=button]:active {
    background: #edf8fd;
background: -moz-linear-gradient(top,  #edf8fd 0%, #d7f0fb 50%, #c1e6f5 51%, #77ccf3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf8fd), color-stop(50%,#d7f0fb), color-stop(51%,#c1e6f5), color-stop(100%,#77ccf3));
background: -webkit-linear-gradient(top,  #edf8fd 0%,#d7f0fb 50%,#c1e6f5 51%,#77ccf3 100%);
background: -o-linear-gradient(top,  #edf8fd 0%,#d7f0fb 50%,#c1e6f5 51%,#77ccf3 100%);
background: -ms-linear-gradient(top,  #edf8fd 0%,#d7f0fb 50%,#c1e6f5 51%,#77ccf3 100%);
background: linear-gradient(to bottom,  #edf8fd 0%,#d7f0fb 50%,#c1e6f5 51%,#77ccf3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf8fd', endColorstr='#77ccf3',GradientType=0 );

color: black;

border: none;
}
/* Style the text input boxes */
input[type=text], textarea {
    padding-left: 5px;
    background-color: #fefca2;
}

/* Defines the style for links within the book */
div.bookLink {
    /*
    Defaults:
        font-weight: bold;
        font-size: 14px;
    Example:
        color: #1a2e65;
    */
}
div.bookLink:hover {
}

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

/* Defines the style of the first paragraph explanatory text that appears on the left side of most book pages */
div.bookHeaderText {
    /* Defaults:
        font-size: 13px;
        padding: 4px 8px 12px 8px;
        margin-bottom: 15px;
        border-bottom: 1px solid #000000;
    Example of an image divider:
        border: none;
        padding-bottom: 30px;
        background-image:url(images/bgBookBorderBlue.png);
        background-position: bottom center;
        background-repeat: no-repeat;
    */
    border: none;
        padding-bottom: 30px;
        background-image:url(images/divider.png);
        background-position: 0px 79px;
        background-repeat: no-repeat;
}
/* Defines the DIV area where some body text is enclosed within some book pages */
div.bookBodyText {
    background-color: #fefca2;
    border: 1px solid black;
    -webkit-box-shadow: 0px 3px 4px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 3px 4px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 3px 4px 0px rgba(50, 50, 50, 0.75);
}

/* 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.
*/
div.themedDivider {
    /* Defaults:
        height: 0px;
        margin: 15px 0px 15px 0px;
        border-top: 1px solid #000000;
    */
    border: none;
    background: url(images/divider.png);
}

/* This DIV container is used when the 'Please wait...' message is displayed on the tour (when the user has to wait for a page to download or something)
*/
div.waitmessageBox {
    /* Defaults:
    background-color: rgba(145,165,175,0.95);
    border-radius: 3px;
    box-shadow: 0px 2px 6px 1px #808080;
    -webkit-box-shadow: 0px 2px 6px 1px #808080;
    -ms-box-shadow: 0px 2px 6px 1px #808080;
    text-align: center;
    color: #ffffff;
    */
}

/* This DIV styles the text of the 'Please wait...' dialog box
*/
div.waitmessageBoxText {
    /* Defaults:
    color: #ffffff;
    font-size: 11px;
    margin-bottom: 8px;
    */
}
/* This style is used for all message boxes that don't have the wait symbol on them.
*/
div.messageBox {
 /*Defaults:
    position: fixed;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-140px;
    height:74px;
    width:240px;
    padding: 40px 20px 16px 20px;
    background-color: rgba(145,165,175,0.95);
    border-radius:3px;
    box-shadow: 0px 2px 6px 1px #808080;
    -webkit-box-shadow: 0px 2px 6px 1px #808080;
    -ms-box-shadow: 0px 2px 6px 1px #808080;

    text-align: center;
    z-index: 121;
	*/
}
div.messageBoxText {
    /* Defaults:
	color: #ffffff;
    font-size: 11px;
    margin-bottom: 8px;
	*/
}


/*** MEDIA VIEWER STYLES ***/

/* 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 {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid rgb(50, 50, 50);
}




/*** MEDIA TOOLBAR STYLES ***/

/* 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;
    */
    background: #4f4f4f;
background: -moz-linear-gradient(top,  #4f4f4f 0%, #3a3a3a 50%, #282828 56%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4f4f), color-stop(50%,#3a3a3a), color-stop(56%,#282828), color-stop(100%,#000000));
background: -webkit-linear-gradient(top,  #4f4f4f 0%,#3a3a3a 50%,#282828 56%,#000000 100%);
background: -o-linear-gradient(top,  #4f4f4f 0%,#3a3a3a 50%,#282828 56%,#000000 100%);
background: -ms-linear-gradient(top,  #4f4f4f 0%,#3a3a3a 50%,#282828 56%,#000000 100%);
background: linear-gradient(to bottom,  #4f4f4f 0%,#3a3a3a 50%,#282828 56%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#000000',GradientType=0 );

border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid rgb(50, 50, 50);
border-top: none;
}

/* This class stylizes the buttons found in the mediaToolbar */
div.viewerButton {
    /* Defaults:
        border: 1px solid #000040;
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        background-color: transparent;
    */
    background: none;
    border: 1px solid black;
    border-radius: 10px;
}
div.viewerButton:hover {
    /*** Default: border: 1px solid #a0a0ff; ***/
    background: #14b9d6;
background: -moz-linear-gradient(top,  #14b9d6 0%, #15abc9 50%, #109fc2 52%, #187da8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#14b9d6), color-stop(50%,#15abc9), color-stop(52%,#109fc2), color-stop(100%,#187da8));
background: -webkit-linear-gradient(top,  #14b9d6 0%,#15abc9 50%,#109fc2 52%,#187da8 100%);
background: -o-linear-gradient(top,  #14b9d6 0%,#15abc9 50%,#109fc2 52%,#187da8 100%);
background: -ms-linear-gradient(top,  #14b9d6 0%,#15abc9 50%,#109fc2 52%,#187da8 100%);
background: linear-gradient(to bottom,  #14b9d6 0%,#15abc9 50%,#109fc2 52%,#187da8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14b9d6', endColorstr='#187da8',GradientType=0 );

border-color: #309af0;    
}
/* This class is used when a button in the mediaToolbar is pressed.  This style is overridden by the specific button styles below */
div.viewerButton.pressed {
    /*** Default: background-color: #0b1e4b; ***/
    color: black;
    background: #a0e9f6;
background: -moz-linear-gradient(top,  #a0e9f6 0%, #8fe3f3 50%, #7adcf4 52%, #68c3ea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0e9f6), color-stop(50%,#8fe3f3), color-stop(52%,#7adcf4), color-stop(100%,#68c3ea));
background: -webkit-linear-gradient(top,  #a0e9f6 0%,#8fe3f3 50%,#7adcf4 52%,#68c3ea 100%);
background: -o-linear-gradient(top,  #a0e9f6 0%,#8fe3f3 50%,#7adcf4 52%,#68c3ea 100%);
background: -ms-linear-gradient(top,  #a0e9f6 0%,#8fe3f3 50%,#7adcf4 52%,#68c3ea 100%);
background: linear-gradient(to bottom,  #a0e9f6 0%,#8fe3f3 50%,#7adcf4 52%,#68c3ea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0e9f6', endColorstr='#68c3ea',GradientType=0 );

border-color: #70b9f4;
}
/* This class is only used when the Presentation, Slideshow, Virtuals, or Videos buttons are selected.  Usually, only the background-color is changed. */
div.viewerButton.depressed {
    background: none;
    background-color: black;
    border-color: #46cef0;
}

/* The full screen button */
div#viewerButtonFullScreen {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -120px 0px;
    */
}
div#viewerButtonFullScreen:hover { /* Defaults: background-position: -120px 20px;*/ }
div#viewerButtonFullScreen.pressed { /* Defaults: background-position: -120px 40px;*/ }

/* The previous image button */
div#viewerButtonPreviousImage {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -330px 0px;
    */
}
div#viewerButtonPreviousImage:hover { /*background-position: -330px 20px;*/ }
div#viewerButtonPreviousImage.pressed { /*background-position: -330px 40px;*/ }

/* The play button */
div#viewerButtonPlay {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -270px 0px;
    */
}
div#viewerButtonPlay:hover { /*background-position: -270px 20px;*/ }
div#viewerButtonPlay.pressed { /*background-position: -270px 40px;*/ }
div#viewerButtonPlay.paused { /*background-position: -300px 0px;*/ }
div#viewerButtonPlay.paused:hover { /*background-position: -300px 20px;*/ }
div#viewerButtonPlay.paused.pressed { /*background-position: -300px 40px;*/}

/* The next image button */
div#viewerButtonNextImage {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -240px 0px;
    */
}
div#viewerButtonNextImage:hover { /*background-position: -240px 20px;*/ }
div#viewerButtonNextImage.pressed { /*background-position: -240px 40px;*/}

/* The sound toggle button (mute/unmute) */
div#viewerButtonSoundToggle {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -180px 0px;
    */
}
div#viewerButtonSoundToggle:hover { /*background-position: -180px 20px;*/}
div#viewerButtonSoundToggle.pressed { /*background-position: -180px 40px;*/}
div#viewerButtonSoundToggle.muted { /*background-position: -210px 0px;*/ }
div#viewerButtonSoundToggle.muted:hover { /*background-position: -210px 20px;*/ }
div#viewerButtonSoundToggle.muted.pressed { /*background-position: -210px 40px;*/ }

/* The zoom in button */
div#viewerButtonZoomIn {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -450px 0px;
    */
}
div#viewerButtonZoomIn:hover { /*background-position: -450px 20px; */ }
div#viewerButtonZoomIn.pressed { /*background-position: -450px 40px;*/}

/* The zoom out button */
div#viewerButtonZoomOut {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -480px 0px;
    */
}
div#viewerButtonZoomOut:hover { /*background-position: -480px 20px;*/}
div#viewerButtonZoomOut.pressed {/*background-position: -480px 40px;*/}

/* Image details button */
div#viewerButtonImageDetails {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -60px 0px;
    */
}
div#viewerButtonImageDetails:hover { /*background-position: -60px 20px;*/ }
div#viewerButtonImageDetails.pressed { /*background-position: -60px 40px; */}

/* Tile view button */
div#viewerButtonTileView {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -360px 0px;
    */
}
div#viewerButtonTileView:hover { /*background-position: -360px 20px;*/}
div#viewerButtonTileView.pressed { /*background-position: -360px 40px;*/}

/* 3D button */
div#viewerButton3D {
    /* Defaults:
        background-image: url(../../images/mediaToolbar/button_icon_white.png);
        background-size: 510px 60px;
        background-position: -30px 0px;
    */
}
div#viewerButton3D:hover { /*background-position: -30px 20px;*/ }
div#viewerButton3D.pressed { /*background-position: -30px 40px;*/}
div#viewerButton3D.mode3D { /*background-position: -0px 0px;*/}
div#viewerButton3D.mode3D:hover {/*background-position: -0px 20px;*/}
div#viewerButton3D.mode3D.pressed {/*background-position: -0px 40px;*/}



/*** MEDIA THUMBNAIL STYLES ***/

/* This is the outer-most container of all the thumbnail stuff including the left/right arrows */
div#mediaThumbnails {
}
/* This specific selector affects thumbnail images in the mediaThumbnail area when
they are hovered with the mouse
*/
div.mediaThumbnailsContainer img:hover {
    /* 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;
    */
}
/* Defines the graphic for the left arrow in the media thumbnails area.  Should be set as background-image */
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#mediaThumbnailsLeft:hover {
    /* Defaults:
        background-position: 0px -70px;
    */
}
div#mediaThumbnailsLeft.pressed {
    /* Defaults:
        background-position: 0px -140px;
    */
}
/* Defines the graphic for the right arrow in the media thumbnails area.  Should be set as background-image */
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);
}
div#mediaThumbnailsRight:hover {
    /* Defaults:
        background-position: -50px -70px;
    */
}
div#mediaThumbnailsRight.pressed {
    /* Defaults:
        background-position: -50px -140px;
    */
}
/* This DIV class can be used to stylize the text that accompanies each thumbnail in the viewer */
div.thumbnail {
    color: #FFF;
}

/* This img style applies to all thumbnail images (you can put a border around them here) */
div.thumbnailImg img {
}

/* This img style is used when a thumbnail is selected and usually applies an outerglow
*/
div.thumbnailImg img.selected {
    /* 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;
    */
}
/* This img style is used when a thumbnail is hovered over and usually applies an outerglow to the hovered image/thumbnail
*/
div.thumbnailImg img:hover {
    /* 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;
    */
}


/*** FOOTER STYLES ***/


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