/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* ------------------------ CSS FOR 2-BAR PAGES -------------------------*/
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/

/* ---------- COLOR BACKGROUND main-content=		F1F2ED  -----------------*/


/* ---------- COLOR FONT  main-content = 			666666  -----------------*/
/* ---------- COLOR LINK  main-content = 			9e444c  -----------------*/
/* ---------- COLOR LINK HOVER main-content = 		666666  -----------------*/


/* ---------- MOST LINES & DECORATIVE BOXES =		cccccc  ------------------*/


/* ---------- FONT FAMILY main-content=							font-family: Arial, Helvetica, sans-serif; -------*/
/* ---------- FONT FAMILY SMALLER TEXT main-content=			xxxxx -------*/




/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/




* {
   padding:0;
   margin:0;
}

table, p, ul, ol, li h1, h2, h3{
	margin: 0px;
	padding: 0px;	
}
img {
border:none
}




/******************************************************************/
/**********************   LAYOUT  *********************************/
/******************************************************************/


/************************   BODY  *********************************/

body {
    margin: 0px;
	padding: 0px;
	background-color: #EDEEE8;
} 

/************************   TOP  *********************************/

#top {
	background-color: #dad8ce;
	height:0px;
	clear:both;
}

/************************  HEADER IMAGE  **************************/

#header {
	background-image:url(background-images/essential-vermeer-top.jpg);
	height: 115px;
	clear:both;
}

#ruckers-name a:link {
	display:block;
	height: 115px;
	background-image:url(background-images/essential-vermeer-top.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#ruckers-name a:hover {
	display:block;
	height: 115px;
	background-image:url(background-images/essential-vermeer-top.jpg);
	background-repeat: no-repeat;
	background-position: 0px -115px;
}

/***************** MENU  ***************** */


#top-left {
	float: left;
	width: 450px;
	margin-left: 10px;
	}

#top-right {
	float: left;
	width: 497px;
	
}

#top-menu { 
	height: 25px;
	width: 980px;
	letter-spacing:1px;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82em;
	background-image:url(background-images/menu_3bar.jpg);
	background-repeat:no-repeat;
	border-bottom: solid 1px #cccccc;
}

#top-menu img{ 
	border: none;
}

#top-menu ul {
	list-style:none;
	margin:auto;
	padding:0;
	display:block;
}


#top-menu li {
	margin:0;
	padding:0;
	list-style:none;
	padding: 5px 0px 9px 0px;
	margin: 0px 30px 0px 42px;
	float:left;
	display:block;
}

#top-menu a:link{
	
	border:none;
	text-decoration:none;
	color: #9e444c;
	letter-spacing:.1em;
}


#top-menu a:visited{
	margin:0;
	text-decoration:none;
	color: #9e444c;
	letter-spacing:.1em;
}

#top-menu a:hover{
	color: #999999;
	text-decoration: underline;
	margin:0;
	letter-spacing:.1em;
}

/**********************  WRAPPER  *****************************/

#wrapper {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
    background-color: #F1F2ED;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}

/************************  BACKGROUND *********************************/

#background {
	float: left;
	width: 980px;
}

/************************  MAIN CONTENT *************************/

#main-content{
	float: left;
	width: 980px;
	padding-left: 10px;
	padding-right: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .75em;
	color: #666666;
}

#main-content p{  
}


/***************  MAIN CONTENT LINKS *************************/

#main-content a:link{
	color:#9e444c;
	text-decoration:none;
}

#main-content a:visited{
	color:#9e444c;
	text-decoration:none;
}

#main-content a:hover{
    color: #666666;
	text-decoration:underline;
}

/************************ BOTTOM *******************************/

#bottom {
	clear: both;
	height:20px;
	background-color:#ACA595;
}

/************************ FOOTER *********************************/

#footer {
	clear: both;
	height:20px;
	background-color:#eeefeb;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
	color: #666666;
	padding: 0.7em;
	border-top: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
}

#footer a:link {
	color:#9e444c;
	text-decoration:none;
}

#footer a:visited {
	color:#9e444c;
	text-decoration:none;
}

#footer a:hover {
	color: #666666;
	text-decoration:underline;
}
/***********************************************************************/
/***********************************************************************/
/************************  MISC. for MAIN CONTENT **********************/
/***********************************************************************/
/***********************************************************************/

h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing:1px;
	font-style:italic;
	font-size: 1.2em;
	color: #9e444c;
	font-weight:normal;
	padding: 0px 0px 10px 4px;
}

/************************************ UP for MAIN CONTENT  *****************************/ 

.up, .up-no-margin {
	clear:both;
	margin-left: 0.2em;
	margin-top: 0em;
	margin-bottom: .6em;
}

.up a:link, .up-no-margin a:link{
	display:block;
	width:13px;
	height: 16px;
	background-image: url(background-images/uphoversidebyside.jpg);
	background-repeat: no-repeat;
	background-position: 0px 4px;
	text-decoration: none;
	border: none;
}

.up a:hover,.up-no-margin a:hover{
	display:block;
	background-image: url(background-images/uphoversidebyside.jpg);
	background-position: -16px 4px;
	text-decoration: none;
	border: none;
}

.up-no-margin {
	clear:both;
	margin-top: 0em;
	margin-bottom: 0em;
}

/**************** CLEAR BOTH DIV ****************************/

.clearboth {
	clear: both;
}

.clearance {
	clear: both;
}

/******************************************************************************************/
/************************************ MISC DECORATION ************************************/
/******************************************************************************************/

/**************** LIGHT GRAY LINE ****************************/

.line {
	clear: both;
	border-top: solid 1px #cccccc;
	margin-bottom: 10px;
	width: 960px;
}
	


/****************************************************************************************************/
/****** PAGES WITH LARGE IMAGES AND IMAGE INFORMATION BOX (vermeer xxl, frames, dutch painters) *****/
/****************************************************************************************************/

#painting-info h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing:1px;
	font-style:italic;
	font-size: 1.3em;
	color: #9e444c;
	font-weight:normal;
	margin-bottom: .3em;
	margin-top: 0em;
}


#painting-info {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	background-color: #F4F4F2;
	font-size: 0.9em;
	padding: 3px 4px 5px 5px;
	float: left;
	width: 250px;
	border: solid 1px #cccccc;
	margin-bottom: 1.3em;
	margin-top: 1.3em;
	line-height: 1.4em;
}

#painting-info p{
	padding-bottom: 0em;
	padding-top: 0em;
	line-height: 1.3em;
}

/********************************  PICTURE MENU  **********************************/

.painting-menu-title{
	display: block;
	/*background-color:#dedede;*/
	color: #9e444c;
	text-transform:uppercase;
	font-size: .8em;
	text-align: left;
	padding: 0.4em 0.4em 0.4em .2em;
	margin-bottom: .1em;
	margin-right: 50px;	
	}
	
 #navigationinfo {
	float: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #F4F4F2;
	font-size: 0.9em;
	width: 250px;
	border-bottom: solid 1px #cccccc;
	border-top: solid 1px #cccccc;
	padding-top:0.2em;
	padding-left:0.5em;
	margin: 1.3em 1.3em 1.3em 0em;
}


#navigationinfo ul {
padding-bottom: .3em;
	padding-top: .4em;
}
	
#navigationinfo ul li {
   color: #ADADAD;
	margin-left: 1em;
	padding-bottom: .4em;
	background-repeat: no-repeat;
	background-position: 1px 6px;
	padding-left: 1em;
	background-image:url(background-images/small-square-bullet.jpg);
	list-style:none;
}

#navigationinfo a:link {
	color:#666666;
	text-decoration:none;
}

#navigationinfo a:visited {
	color:#666666;
	text-decoration:none;
}

#navigationinfo a:hover {
	text-decoration:none;
	color:#9e444c;
	text-decoration:underline;
}

.nav-previous {
	background-image: url(background-images/nav-previous-next.jpg);
	background-repeat: no-repeat;
	background-position: 1px 1px;
}

.nav-next {
	background-image: url(background-images/nav-previous-next.jpg);
	background-repeat: no-repeat;
	background-position: 3px -28px;
}

#forward {
	background-position: 0px 5px;
	padding-left: 1.3em;
	background-image:url(background-images/forward.jpg);
	list-style:none;
	background-repeat: no-repeat;
	padding: 0em 0em .2em 1.5em;	
}

#backward {
	background-position: 0px 5px;
	padding-left: 1.3em;
	background-image:url(background-images/backward.jpg);
	list-style:none;
	background-repeat: no-repeat;
}


/*************************** JQUERY TOOLTIP STYLE **************************************/

#main-content .tooltip {
	background-color:#fafafa;
	border:1px solid #cccccc;
	color:#666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height:14px;
	text-indent: 0em;
	padding: 6px 9px;
	position:absolute;
	text-align:left;
	z-index:2;
	display: none;
	-moz-border-radius: 5px;
	text-decoration: none;
	moz-box-shadow: 2px 2px 5px #cccccc;
	-webkit-box-shadow: 2px 2px 5px #cccccc;
	box-shadow: 2px 2px 5px #cccccc;
}



/***************************** MAIN HOLDER *******************/

.online {
	clear: both;
	/*background-image: url(images/arrows.jpg);
	background-repeat: no-repeat;
	background-position: 400px 100px;
	*/	
}

/*******************************************************************************/
/********************************** TOP SECTION *****************************/
/*******************************************************************************/

/************** CONTAINER THAT HOLDS FACT SHEET AND SPECIAL TOPIC CONTAINERS **************/

#cat_left {
	width: 293px;
	float: left;
	margin:  0px 20px 16px 0px;
	list-style-image: none;
	list-style-type: none;
}

/********************* LIST STYLES FOR FACT SHEET & SPECIAL TOPICS *******************/

#specialtopics #musicalnote {
    background-image: url(../catalogue/graphics/note.jpg);
	background-repeat:no-repeat;
	background-position: left;
	list-style-type: none;
	padding-left: 12px;
}

#cat_left li{
	margin-bottom: 3px;
	list-style-type: none;
	background-image: url(../catalogue/graphics/square_red.gif);
	background-repeat:no-repeat;
	background-position: left 5px;
	padding: 0em 0em 3px 10px;
}

#cat_left a:link {
	color: #666666;
	text-decoration: none;
	padding-bottom: 4px;
}

#cat_left a:hover {
	text-decoration: underline;
	color: #8D8D8D;
}

#cat_left a:visited {
	text-decoration: none;
	color: #666666;
}

/***************************** SLIDE IN CONTAINER FOR SPECIAL TOPICS AND FACT SHEET *******************/

#cat_right {
	background-color: #F1F2ED;
	height: 350px;
	width: 497px;
	float: right;
	margin: 10px 20px 10px 0px;
	border: 1px solid #C1AAAD;
	background-image: url(../catalogue/images/background-box-down.jpg);
	background-repeat: no-repeat;
}

/***************************** SLIDE IN CONTAINER FOR SPECIAL TOPICS AND FACT SHEET *******************/

#cat_right .description {
	margin: 4px;
	border: 1px solid #cccccc;
	display: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	background-color: #F4F4F2;
	padding: 4px 4px 0px 4px; 
}

#cat_right .description p{
	padding-bottom: 6px;
}

.description a:link {
	color: #B48181;
	text-decoration: none;
}

.description a:visited {
	text-decoration: none;
	color: #B48181;
}

.description a:hover {
	text-decoration: underline;
	color: #666666;
}

/***************************** CONTAINER FOR SPECIAL TOPICS LISTS*******************/

#specialtopics,  #factsheet {
	width: 293px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	padding: 10px 0px 4px 8px;
	border: 1px solid #C1AAAD;
	margin-top: 10px;
}

#factsheet {
}


/***************************** STYLE TO CLEAR *******************/
.clearance {
	clear: both;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 4px;
	height: 0px;
}

/*******************************************************************************/
/********************************** BOTTOM SECTION *****************************/
/*******************************************************************************/

/***************************** image and caption containers *******************/

.imagecaption {
	float: left;
	margin: 0px 8px 0px 0px;
	border: 1px solid #CCCCCC;
	text-align: center;
	padding: 3px 3px 0px 3px;
}

.imagecaption img{
	margin-bottom: 3px;
}

.imagecaption p{
	font-family: Arial;
	font-size: .85em;
	clear: both;
	padding-bottom: 0px;		
    margin-bottom: 0px;
}

.imagecaption-wide{
	float: left;
	margin: 0px 8px 6px 8px;
	border: 1px solid #CCCCCC;
	text-align: center;
	padding: 3px 3px 0px 3px;
}

.imagecaption-wide img{
	margin-bottom: 3px;
}

.imagecaption-wide p{
	font-family: Arial;
	font-size: .85em;
	clear: both;
	padding-bottom: 0px;		
    margin-bottom: 0px;
}




/******************** BOTTOM LEFT CONTAINER THAT HOLDS PAINTING IMAGE *******************/

#left {
	float: left;
	width: 450px;
}

#sharethiscatalogue {
	clear:none;
	float: left;
	width: 200px;
	margin: 0em 0em 7px 12px;
}

.sidebarcontainer{
    margin: 16px auto 16px auto;
	width: 85%;
}

/***************************** BOTTOM RIGHT CONTAINER THAT HOLDS SLIDING PICTURE IMAGE MAP INFORMATION *******************/

#right {
	float: left;
	width: 497px;
	background-color: #F1F2ED;
	height: 450px;
	border: 1px solid #C1AAAD;
	background-repeat: no-repeat;
	margin-left: 10px;
	background-image: url(../catalogue/images/writing-04.jpg);
}

/***************************** CONTAINER THAT HOLDS PICTURE SLIDE-IN INFORMATION *******************/

#right .description {
	margin: 4px;
	border: 1px solid #cccccc;
	display: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	background-color: #F1F2ED;
	padding: 4px 4px 0px 4px;
}

#right .description p{
	padding-bottom: 6px;
}



/***************************************************************************/
/*************************** MISC **************************************/
/***************************************************************************/

#hotspots {
	float: left;
	clear:both;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	text-align: center;
	margin-bottom: 1.3em;
	padding: .3em 1em .4em 1em;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	background-color: #F4F4F2;
	width: 240px;
}

#whereispicture {
	float: left;
	clear:both;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	text-align: center;
	margin-bottom: 1.3em;
	padding: .3em 1em .4em 1em;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	background-color: #F4F4F2;
	width: 240px;
}

#whereispicture a:link {
	color:#666666
	
}

#whereispicture a:visited {
	color:#666666
}


#whereispicture a:hover {
	color:#9e444c
}



#instructions-slide-down {
    clear:both;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
    width: 234px;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 0em 1em 0em 1em;
	margin-bottom: 1.3em;
	padding: .3em 1em .4em 1em;
	background-color: #F4F4F2;
}

#temporary-exhibit {
	background-image: url(background-images/asterix-large.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;	
	float: left;
	height: 100px;
	width: 160px;
	padding: 0em 0em 0em 2.5em;
	margin: 1em 0em 0em 2em;
}

#instructions {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float: left;
	font-size: .9em;
	font-style: italic;
	width: 430px;
	height: 10px;
	margin: 0em 0em 1em 220px;
}


.slant {
	font-style: italic;	
}

.slantandbold {
	font-style: italic;
	font-weight: bold;
	color: #926166;
}


#musicornot {
	float: right;
	width: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 85%;
	margin-left: 220px;
}

.relatedcenteralign {
	text-align: center;
	clear: both;
	padding-top: 4px;
}

.relatedcenteralign img{
	padding-bottom: 4px;
	margin-right: auto;
	margin-left: auto;
}

.clearandmargin {
	clear: both;
	height: 4px;
}

/*************************** PROVENANCE LIST **************************************/	
	
#provenancelist {
	margin: 4px 22px 4px 0px;
	padding: 4px;
}


#provenancelist li{
	margin-bottom: 6px;
	list-style-type: none;
	background-image: url(../catalogue/graphics/square.gif);
	background-repeat:no-repeat;
	background-position: left 5px;
	padding-left: 10px;
}

.downloadad {
	border: 1px solid #AF868A;
	margin-top: 8px;
	float: left;
	background-color: #EDE9E7;
	color: #666666;
	padding: 4px;
}

.floattable {
	float:left;
	margin-right: 8px;
}


table {
	border: 1px solid #bdbaa7;
	margin-right: 8px;
	margin-top: 4px;
	margin-bottom: 8px;
	float:left;
}


td {
	border:1px solid #bdbaa7;
	margin:0;
	padding: 4px;
}


#share  {
	
	background-image:none;
	margin-top: 12px;
	float: right;
	width: 255px;
	border:none;
	
}

/************** GOOGLE CUSTOM SEARCH ENGINE  *****************/

#google-search {
	background-color: none!important;
	width: 300px!important;
	float: right!important;
	margin: -7px -10px 0px 0px!important;*/
	*margin: -4px -20px 0px 0px!important;*/
	clear:both!important;

}	

/************** wrapper for entire search results page *****************/

.gsc-results-wrapper-visible {
    opacity: 1 !important;
    visibility: visible !important;
	background-color:#EEEFEA !important;
}

.gsc-adBlockVertical {
    position: relative;
    display: block;
    float: right;
    clear: right;
    width: 30%;
	background-color:#EEEFEA !important;
}

#adBlock{
    background: none repeat scroll 0px 0px #EEEFEA!important;
    margin: 0px!important;
    padding: 0px!important;
}

/************** Google ads *****************/

.gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
    border-color: #cccccc !important;
    background-color: #F5F7F2!important;
}


.gsc-resultsHeader {
    width: 2%;
    clear: both;
	border:none!important;
}

.gsc-control-cse .gsc-table-result {
    width: 100%;
    font-family: Arial,sans-serif;
    font-size: 13px;
	border:none!important;
}

.gsc-table-cell-thumbnail, .gs-promotion-image-cell {
    vertical-align: top;
	border:none!important;
	border-style: none!important;
}

.gsc-table-cell-snippet-close, .gs-promotion-text-cell {
    vertical-align: top;
    width: 100%;
	border:none!important;
	border-style: none!important;
}

/************** top box around how many results in how much time  *****************/
.gsc-above-wrapper-area-container {
    width: 100%;
	border:none!important;
	border-style: none!important;
}

.gsc-resultsHeader td.gsc-configLabelCell {
    text-align: right;
    width: 75%;
	border:none!important;
	border-style: none!important;
}

.gsc-resultsHeader td.gsc-twiddleRegionCell {
    width: 75%;
	border:none!important;
	border-style: none!important;
}

/************** holds how many results in how much time *****************/

.gsc-result-info-container {
    text-align: left!important;
	float: left!important;
	padding: 3px!important;
	border:none!important;
	border-style: none!important;
}

/************** wrapper for entire search results page *****************/

table.gsc-search-box {
    border-style: none!important;
    border-width: 0px!important;
    border-spacing: 0px!important;
	border-color:#33FF00!important;
    width: 100%!important;
    margin-bottom: 2px!important;
	border-collapse: collapse!important;
	padding: 20px!important;
}

/************** box which contains search bar, button and close *****************/

.gsc-control-cse {
    font-family: Arial,sans-serif!important;
	font-weight:normal!important;
    border-color: none!important;
	padding:0px!important;
	width: 0px!important;
	height:0px!important;
}

.gsc-control-cse td {
    border:none!important;
	border-style: none!important;
	padding:0px!important;
}
	
	
/************** input box *****************/	
	
input.gsc-input {
	border-color: none!important;
	background-color:#F5EFEF!important;
	background-image:none!important;
	width:180px!important;
	height:14px!important;
	color:#666666!important;
	font-size: .82em!important;
	margin-right: 6px!important;
	*margin:-right: 0px!important;
	border-top: 1px solid #777777 !important;
	border-left: 1px solid #aaaaaa !important;
}
  
/************** search button *****************/
  
  
input.gsc-search-button {
	
	border-top: 1px solid #F1F2ED !important;
	border-left: 1px solid #F1F2ED !important;
	border-bottom: 1px solid #666666 !important;
	border-right: 1px solid #666666 !important;
	background-color: #9e444c!important;
	width:20px!important;
	height:19px!important;
	font-weight:normal!important;
	color:#F1F2ED!important;
	font-size: .86em!important;
	padding-bottom:3px!important;
}
  
  /************** clear button *****************/
 
.gsc-clear-button {
	border:none!important;
	border-style: none!important;
	background-image:none!important;
	background-repeat:no-repeat!important;
	background-position: 0px 0px!important;
	width:0px!important;
	height:0px!important;	
}

.gs-result .gs-title, .gs-result .gs-title * {
    color: #9e444!important;
    text-decoration: underline!important;
}

/************** Google results in number of seconds  *****************/

.gs-spelling a {
    color: #666666 !important;
    cursor: pointer;
}