﻿/* ================================================================== */
/* Standard colours: */
/* Text: #0C3765 */
/* Light: #E2EDF3 */
/* Medium: #A8C0CE */
/* Dark: #00386C */

/* Brown theme (used in small panels of user interaction, eg cookie usage, import results): */
/* Text: #3D3425 */
/* Extra Light: #FAE9CC */
/* Light: #FFDA9A */
/* Medium: #A89065 */
/* Dark: #67583E */

/* Error theme (mainly used in the Valuation Options panel to show clashes): */
/* Text: #3D2526 */
/* Extra Light: #FACCD0 */
/* Light: #FF9AA4 */
/* Medium: #A8656A */
/* Dark: #673E40 */
/* ================================================================== */


/* ================================================================== */
/* START: CAP fonts                                                   */
/*                                                                    */
/* GOTCHA: Remember to add ensure that there is a "MIME type"         */
/* declared either in web site instance or in IIS top level,          */
/* otherwise IIS will not "find" the font files                      */
/* ================================================================== */
@font-face 
{
    font-family: "BodoniEgyptian";
    src: url("../Images/Fonts/Bodoni_Egyptian_Pro-Bold.eot");
    src: local("☺"),
         url("../Images/Fonts/Bodoni_Egyptian_Pro-Bold.woff") format("woff"),
         url("../Images/Fonts/Bodoni_Egyptian_Pro-Bold.oft") format("opentype"),
         url("../Images/Fonts/Bodoni_Egyptian_Pro-Bold.svg") format("svg");
}
@font-face 
{
    font-family: "BodoniEgyptian";
    src: url("../Images/Fonts/Bodoni_Egyptian_Pro-Extra_Bold.eot");
    src: local("☺"),
         url("../Images/Fonts/Bodoni_Egyptian_Pro-Extra_Bold.woff") format("woff"),
         url("../Images/Fonts/Bodoni_Egyptian_Pro-Extra_Bold.oft") format("opentype"),
         url("../Images/Fonts/Bodoni_Egyptian_Pro-Extra_Bold.svg") format("svg");
        font-weight: bold;
}
@font-face 
{
    font-family: "Marydale";
    src: url("../Images/Fonts/marydale-webfont.eot");
    src: local("☺"),
         url("../Images/Fonts/marydale-webfont.woff") format("woff"),
         url("../Images/Fonts/marydale-webfont.oft") format("opentype"),
         url("../Images/Fonts/marydale-webfont.svg") format("svg");
        font-weight: bold;
}

@font-face {
    font-family: raleway-bold;
    src: url(/Mvc/Content/fonts/raleway/Raleway-Bold.ttf) format("truetype");
}

/* ================================================================== */
/* END: CAP fonts */
/* ================================================================== */

/* ================================================================== */
/* Standard elements */
/* ================================================================== */
html, body {height: 100%;}

#outerwrap
{
    min-height: 100%;
}
h1
{
    font-family:"Lato","Arial", sans-serif;
    font-size: 24px;
    font-weight: bold;
    padding: 0;
    margin: 9px 0 13px 0;
    color: #0C3765;
}
h1.vaHeader
{
    margin: 0;
}

h1 span
{
    font-family:"Lato","Archer","Georgia",Times,serif;
    font-size: 24px;
    font-weight: bold;
    padding: 0;
    margin: 10px 0 10px 0;
    color: #0C3765;
}

h2 {
    color: #333333;
    font-family: "Lato","Archer","Georgia",Times,serif;
    font-size: 18px;
    font-weight: normal;
    margin: 5px 0 6px;
    padding: 0;
}
.PrintSummary h2 {
    font-family: Arial, Helvetica, sans-serif !important;
}

form
{
	padding-bottom: 50px!important;
}

/* ================================================================== */
/* END - Standard elements */
/* ================================================================== */

/* ================================================================== */
/* Common button, eg login, search etc */
/* ================================================================== */
.actionButton
{
    color: #FFF!important;
    font-family: "Lato","Arial",serif;
    font-size: 12px;
    padding: 5px 5px 5px 5px;
    margin: 0 2px 2px 1px;
    text-decoration: none;
    display: inline-block;
    border: none;
    background-color: #30ab64 !important;
}
.Options .buttons > .actionButton {
    margin-right: 0;
}
.Options .buttons > .actionButton:last-of-type {
    margin-right: 2px;
    margin-left: 0;
}

.LogBtn .actionButton { background-color: #01A1DD !important; }






/* style for a standard button with an alternative color treatment, stands out more than normal buttons */
.coloredButton
{
    background: url("../Images/actionButton-colored-bg.png") repeat-x scroll 0 0 transparent;
    color: #3D3425;

}
.coloredButton:hover {
    background-position: 0 -30px;
    color: #3D3425;
}

/* style for a standard button but secondary in usage to a normal action button (less focus visually) */
.Lite
{
    background: none repeat scroll 0 0 #FEFEFE;
    color: #6A9ACE;
    display: inline-block;
    font-weight: normal;
    margin: 0 7px 0 0;
}

.Lite:hover
{
    background: #cccccc;
}

/* style for a secondary button with no border */
.Litest
{
    background: none;
    border: none;
    color: #0C3765;
    font-family: Arial,serif;
    font-size: 11px;
    padding: 2px 5px 1px 5px;
    text-decoration: none;
    outline: none;
    font-weight: normal;
}

/* style for a standard button but plainly styles, square edges bg color is alternative light brown */
.Plain
{
    background: #CCC !important;
    border: none;
    color: #444 !important;
    font-family: Arial,serif;
    font-size: 12px;
    padding: 5px 8px 5px 8px;
    margin: 0 2px 0 1px;
    text-decoration: none;
    outline: none;
    font-weight: normal;
    display: inline-block;
}

.actionContainer .Plain > span {
    font-family: "Lato", "Arial", sans-serif !important;
}

.Plain:hover {
    text-decoration: underline !important;
    cursor: pointer;
}

#vlDDUser
{
 width:110px;
}

.Plain:hover
{
    background: #FFDA9A;
    color: #000000;
}

/* Taking up full width of container */
.FullWidth
{
    width: 90%;
    padding: 1% 5% 1% 5%;
    display: block;
    clear: both;
    margin: 0 0 0 0;
    text-align: center;
}

/* Displayed vertically, taking up full width of container */
.Stacked
{
    width: 90%;
    padding: 5% 5% 5% 5%;
    display: block;
    clear: both;
    margin: 0 0 5px 0;
    text-align: center;
}

/* ================================================================== */
/* END - Common button, eg login, search etc */
/* ================================================================== */




/* ================================================================== */
/* START: Main page structure elements                                */
/* ================================================================== */

body 
{
    position:relative;
    font-family:arial,sans-serif;
    font-size:0.85em; 
    margin:0;
}

#MainContentSection
{
    clear: both;
    width: 970px;
    margin: 5px auto 10px auto;
    position: relative;
}

#MainContentSection #left
{
    float: left;
    width: 153px;
    margin:0;
    padding:0;
    border: none;
}

#MainContentSection #Content
{
    float: left;
    width: 648px;
    margin: 0 5px 0 5px;
}

/* specific css for a full width area (no left or right panels) */
#MainContentSection #Content.full
{
    width: 966px;
}

#MainContentSection #right
{
    float: left;
    width: 158px;
    margin:0;
    padding:0;
    border: none;
}

#MainContentSection.widen #left { width: 232px; }
#MainContentSection.widen-admin #left { width: 158px; }
#MainContentSection.widen #Content { width: 718px; min-height: 435px; }
#MainContentSection.widen-admin #Content { width: 100%; }
#MainContentSection.widen-admin #Content.widen { width: 100%; }
#MainContentSection.widen #right { position: absolute; right: -160px; top: 0; }

._inner
{
    width: 970px;
    margin: 0px auto 0px auto;
    padding: 0;
}


#editorials
{
    float: right;
    margin: 5px 0 0 0;
}
#editorials a
{
    color: #0C3765;
    float: left;
    margin-left: 3px;
}
#editorials label,
#editorials img
{
    float: left;
    line-height: 22px;
}
#editorials a:hover img
{
    opacity: 0.7;
}

/* Style used to hide dummy blocks of html used in building list of repeated elements */
.dummy
{
    display:none;
}
/* ================================================================== */
/* END: Main page structure elements                                */
/* ================================================================== */

/* ================================================================== */
/* LogoBar styles */
/* ================================================================== */

.header-container { position: relative; height: 150px; border-top: none; border-bottom: none; }
.header-container .block-links { list-style-type: none; margin: 0; padding: 0; float: left; }
.header-container .block-links  li { margin: 0; padding: 0; background-color: #003777; }
.header-container .block-links  li a { width: 100px; display: inline-block; text-align: center; padding: 21px 0 20px; border-right: #ddd 1px solid; background-color: #FFF; margin-top: 2px; color: #00386C;}

#user-label { position: absolute; top: 5px; left: 165px; }
#Header_MainMenu_UM_lbUser {  }



.LogoBar
{
    clear: both;
	color: #0C3765;
	padding: 0;
	height: 150px;
}

.LogoBar .actionButton{
    background-color: #FFF !important;
}

.loginPage .LogoBar {
    height: 150px;
}

.LogoBarPrint {
    height: 75px;
}

.cap-logo
{
    float: left;
    display: block;
    width: 150px;
    position: relative;
    z-index: 20;
}
.cap-logo .logo
{
    display: block;
    margin: 0 0 0 5px;
}
.cap-logo a {
    display: inline-block;
}
.sub-heading
{
    background: url("../Images/va_logo.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 69px;
    margin: 2px 0 0 0;
    padding: 0;
    text-indent: -999px;
    width: 257px;
}

/* Search box */
.search
{
    
    float: left;
    height: 24px;
    width: 255px;
    margin: 21px 0 0 15px;
}
#SearchBtn button {
    min-width: 50px;
    font-size: 12px;
    padding-bottom: 3px;
    cursor: pointer;
}

#vlSrch
{
    float: left;
    width: 185px
}
#vlSrchTx
{
    border: medium none;
    color: #808080;
    line-height: 16px;
    margin: 2px 0 0;
    padding: 4px;
    width: 100%;
    border: 1px solid #CCCCCC;
}
#vlSrchTx:focus
{

    outline: none;
}
#SearchBtn
{
    float: right;
    margin: 2px 2px 0 0;
}

#SearchBtn a.fn_Search
{
    display: block;
}

#SearchBtn a.fn_Search img
{
    float: left;
}
#SearchBtn a.fn_Search:hover img
{
    opacity: 0.5;
}
/* END - Search box */

#Title
{
 margin: 22px 0 0;
 float: right;
}

#Title #Header_lbUser
{
    font-size: 14px;
    color: #0C3765;
}

#feedbackButton
{
    cursor: pointer;
    margin: 0;
}

#feedbackButton img
{
    float: left;
    margin-bottom: 5px;
}

#feedbackButton:hover
{
    opacity: 0.7;
}

#feedbackButton.floatFeedback
{
    margin: -27px 0 3px 0;
}

#dialog_feedback
{
    display: none;
}

#dialog_feedback .star-rating
{
    margin: 10px 0 0 0;
}

#dialog_feedback .star-intro
{
    display: block;
    float: left;
    margin: 0 10px 0 0;
}

#dialog_feedback .star
{
    display: block;
    float: left;
    height: 19px;
    width: 18px;
    background: url("../Images/rating-star-outline.png") no-repeat scroll 0 1px transparent;    
    border: 1px solid #FFFFFF;
}

#dialog_feedback .star:hover
{
    border-top: 1px solid #FBEB92;
    border-bottom: 1px solid #FBEB92;
}

#dialog_feedback .star.filled
{
    background: url("../Images/rating-star-filled.png") no-repeat scroll 0 0 transparent;    
}

#dialog_feedback #selected-rating
{
    margin: 0 0 0 10px;
    font-weight: bold;
}

#dialog_feedback .buttons
{
    text-align: right;
    margin: 20px 0 0 0;    
}

/* ================================================================== */
/* END - LogoBar styles */
/* ================================================================== */


/* ================================================================== */
/* Internal Adverts */
/* ================================================================== */
.internal_ad
{
    padding: 0;
    margin: 0;
    border: none;
    text-align: center;

}

#Content .internal_ad
{
    margin: 18px 0 10px;
}

#left .internal_ad
{
    margin: 33px 0 0 0;
}

#right .internal_ad
{
    border-bottom: 1px solid #A8C0CE;
    padding: 15px 0;
}

#right .internal_ad .adLink
{
    font-size: 16px;
    color: #0C3765;
}

#right .boxed
{
    border: 1px solid #0C3765;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;    
    background-color: #E2EdF3;
    margin: 33px 0 10px 5px;
    padding: 10px 0;
}

#Advert1
{
    float:left;
    width:158px;
    border:none;
}

#Advert1 iFrame
{
    float:left;
    width:158px;
    height:500px;
    overflow:hidden;
    border:none;
}
#Advert2
{
    position: absolute;
    right: -136px;
    top: 5px;
}
#Advert2 iFrame
{
 float:left;
 width:125px;
 height:500px;
 overflow:hidden;
 border:none;
}


#ad-sky
{
  width:120px;
  height:600px;
  overflow:hidden;
  border:none;
  padding: 5px 3px 10px 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#ad-sky-right
{
   border: medium none;
   float: left;
   height: 600px;
   overflow: hidden;
   padding: 5px 3px 10px 0;
   position: absolute;
   right: -140px;
   top: 0;
   width: 120px;
}

#ad-leader
{
width: 970px;
position: relative;
margin: 0 auto;
top: 52px;
height: 0;
left: 164px;
margin: 0 auto;
z-index: 100;
} 


/* ================================================================== */
/* END - Internal Adverts */
/* ================================================================== */

/* ================================================================== */
/* password panel (used in MyProfile and User Settings) */
/* ================================================================== */
.update-password-panel
{
    display: none;
    clear: both;
    border: 1px solid #E2EDF3;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;        
    margin: 5px 0 5px 0;
    padding: 3px;

}

.ProfMain .update-password-panel
{
    width: 50%;
}

#pwd-message-panel
{
    display: none;
    margin: 5px 0 0 0;
    padding: 5px;
    text-align: center;
}
#pwd-message-panel .message
{
    display: inline-block;
    border: 1px solid #67583E;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #3D3425;
    background-color: #FFDA9A;
    padding: 5px 10px 5px 10px;
}
/* ================================================================== */
/* END - password panel */
/* ================================================================== */

/* ================================================================== */
/* Class to allow a specific dialog to not have a cloe button */
/* ================================================================== */
.no-close .ui-dialog-titlebar-close 
{
    display: none 
}
/* ================================================================== */
/* END - Class to allow a specific dialog to not have a cloe button */
/* ================================================================== */

/* ================================================================== */
/* Error Dialog */
/* ================================================================== */
.ErrDlg
{
    background-color: #FAE9CC;
    border: 1px solid #67583E;
    width: 300px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;    
    padding: 4px;
}
.ErrDlgCaptionCell
{
    font-weight: bold;
}
/* ================================================================== */
/* END - Error Dialog */
/* ================================================================== */

@media screen and (max-width: 991px) {
    #outerwrap {
        width: 100%;
    }

    #MainContentSection {
        width: 90%;
    }
}