/* Romanlife CSS.*/






/******  NEW Add more text function!!! - remember TO PAY VERY SPECIAL ATTENTION TO BEGIN AND END OF DIV "OUTER" POSITION   ******/

#outer .holder {padding:1em; border:2px solid #D5E3FD; margin:0 0px 10px 0; width:550px;}
#outer .holder p {padding:5px 0 0 0; margin:0;}
#outer .holder p.bold {font-weight:bold;}
#outer .holder h2 {margin:0; padding:0;}

/* unclicked style div.more */
#outer div.more i {float:left; margin-right:-10px 10px 0 0; cursor:pointer; color:#4110B0; font-weight:bold; width:550px}
#outer div.more i.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}

/* clicked style div.click */
#outer div.click i.show {display:none;}
#outer div.click i.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:0px;}

/******  NEW Add more text function!!! - remember TO PAY VERY SPECIAL ATTENTION TO BEGIN AND END OF DIV "OUTER" POSITION   ******/




/******** this is the old  "Add more text function" - remember it uses the "Em" html code so you can't use EM elsewhere****

.holder {width:590px; margin:2px; padding:5px; border:2px solid #D5E3FD; float:left;}
.holder h2 {text-align:left;}
a.hid {color:#000; text-decoration:none; outline-style:none;}
a.hid em {display:none;}
a.hid:hover {text-decoration:none;}
a.hid:active, a.hid:focus {background:#fff;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em {display:block; color:#120499; width:100%; font-style:normal; cursor:default;}
.clear {clear:both;}

**** FINISH Add more text function - remember it uses the "Em" html code so you can't use EM elsewhere*************/



/*** NEW BOOKBUTTON:<p><a href="http://www.romanlife-romeitaly.com/rome-bus-tour.html" class="bookbutton"><b>BOOK</b></a></p>****/

a.bookbutton {
background-color: #0946A8; /**change back to #D5E3FD**/

display: block;

/**below is to change the text colour of the navigation "buttons".**/
color: #FFFFFF;  /**change back to #020A3C**/
font-size: 100%;
border-style: outset;  /**change back to groove**/
text-decoration:none;
padding: 3px 3px 3px 4px; /* down right up left*/
background-repeat: no-repeat;
width: 48px;
height: 16px;
}

a.bookbutton:hover {

background-repeat: no-repeat;
border-style: groove;   /**change back to groove**/
color: #020A3C; /** re-insert:   color: #FFFFFF;    **/
font-size: 100%;
text-decoration: bold;
background-color: #D5E3FD;  /** change back to #0946A8 **/
width: 48px;
height: 16px;
}

a.bookbutton:visited {

background-repeat: no-repeat;
width: 48px;
height: 16px;
}

a.bookbutton:active {
}

/********    END   NEW      BOOKBUTTON          *************/




/********          NEW      BOOKBUTTON     ITALIAN    
<p><a href="http://www.romanlife-romeitaly.com/rome-bus-tour.html" class="bookbuttoni"><b>PRENOTA</b></a></p> 

REMEMBER TO CHANGE THE VALUES TO THE ITALIAN BOOK BUTTON!!!!!!!!!!!!!   *************/


a.bookbuttoni {
background-color: #D5E3FD;


display: block;

/**below is to change the text colour of the navigation "buttons".**/
color: #020A3C;
font-size: 100%;
border-style:groove;
text-decoration:none;
padding: 3px 3px 3px 4px; /* down right up left*/
background-repeat: no-repeat;
width: 71px;
height: 16px;
}

a.bookbuttoni:hover {

background-repeat: no-repeat;
border-style:groove;
color: #FFFFFF; 
font-size: 100%;
text-decoration: bold;
background-color: #0946A8;
width: 71px;
height: 16px;
}

a.bookbuttoni:visited {

background-repeat: no-repeat;
width: 71px;
height: 16px;
}

a.bookbuttoni:active {
}

/********    END      NEW      BOOKBUTTON          *************/






body {
background-color: #ffffff; 
font-family: Arial, Verdana, sans-serif;
font-size: 90%;   /** ---------------       CHANGE BACK  TO 90% IF YOU LIKE      ---------------------- */
color: #000;
margin:auto;
padding:0;
text-align:center;
}

/** link-text and headings, change the font type and size, the color of each of them
as well as the a:hover (text for a link, once the pointer passes over it) */

a { font-family: Arial, Verdana, sans-serif; 
font-size: 100%; color: #3F4DFC; text-decoration: none;
}

a:hover { font-family: Arial, Verdana, sans-serif;
 font-size: 100%; 
 color: #4110B0;
 }

h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #070236}
h2 { font-family: Arial, Verdana, sans-serif; font-size: 120%;  color: #070236}
h3 { font-family: Arial, Verdana, sans-serif; font-size: 100%;  color: #070236}


/***for this table based layout all the content text is inside a table e quindi, quest'e la zona dove si puo cambiare
size, color and font family .***/
table {
	font-family: Arial, Verdana, sans-serif;
	font-size: 100%;
	color: #010012;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


/*** Table cells' background colors. Con questa si puo effetuare un cambiamento per tutte le pagine 
o anche si puo inserire un imagine, alora cambia the background-color:#fff;  with this, and upload your image to the graphics library....
background-image: url('http://www.romanlife-romeitaly.com/images/your-image.gif');
background-repeat: repeat; ***/

td.headerbg {
width: 960px;
background-color:#fff;
}

td.spacerbg {
height:1px;
background-color:#fff; 
width:165px;
padding:5px;
}

td.contentbg {
width:600px;
background-color:#fff; 
font-size: 105%;   /** ---------------       REMOVE IF YOU LIKE      ---------------------- */
padding:9px;
}


td.rightbg {
width:165px;
font-family: Arial, Verdana, sans-serif;
font-size: 93%;
color: #000;
background-color:#fff; /***change the colour back here to #fff from #D5E3FD if you want***/
padding:5px;

}

td.leftbg {
width:157px;
font-size: 93%;
margin-left: 0px;
margin-right: 0px;
background-color:#fff; 
padding:0px;
}

td.footerbg {
font-size: 93%;
background-color:#fff; 
padding:0px;
}


/***link styling for anchor links ***/

a.jumplink{
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
}

a:hover.jumplink  {
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
} 

/***Images and a centered box, anything can go into the boxes- text or whatever***/

.image-left {
	float: left;
	padding: 2px;
	
	margin-right: 5px;
	border: 1px solid #000;
}

.image-right {
	float: right;
	padding: 2px;
  
	margin-left: 5px;
	border: 1px solid #000;
}
.box{
padding: 3px;
border: 1px solid #000;

}

/***left side navigation panel***/

#navigator {

}

.navbutton {
line-height: 85%;             /*****************                   back   TO    95%        *********************/
text-decoration: bold;   /*****       CHANGE       BACK    IF     WRONG       LATEST   CHANGE         **************/
}

.navbutton a {
font-size: 93%;
font-family:  Verdana, sans-serif;
}

.navbutton a:hover {
font-size: 94%;
font-family:  Verdana, sans-serif;
}


/***color on the background surrounding the buttons - I call them buttons, 
but they are not actually buttons,they are just text with some mouse over functions, change the color, 
and the border, if you like. The border can be solid, dashed, or dotted, but I prefer no border, 
for different border colours JUST CHANGE THE BACKGROUND COULOUR BELOW***/

#navigator {

background-color: #D5E3FD;

border: none;


width: auto;

margin-top: auto;

margin-left: auto;

margin-right: auto;

padding: 2px;           


text-align: left;


}

/**** below is if you want to increase or decrease the space between your "buttons", 
simply increase the margins from 1px. Font weight can be normal, 
I prefer bold, if it's too big I would reduce the 'font size' percentage***/

.navbutton {

font-weight: normal;
text-align: left;

text-decoration: bold;   /*****    CHANGE       BACK    IF     WRONG**************/

/**below is to change the font size of the menu tier 2 links **/

color: #010812;
margin-bottom: 0px;
margin-top: 0px;
}


/* below are the codes for the navbuttons when the mouse is NOT hovering over the button, 
so the codes for the actual normal button, I call it "button", but it's not a button.*/

.navbutton a {

padding: 4px;

/**below is to change the font from 'bold' to 'none', remember if you change to 'none' the text colour
goes to blue.**/

text-decoration: bold;

display: block;

/**below is to change the text colour of the navigation "buttons".**/
color: #020A3C;

background-color: transparent;

border-top: none;

border-left: none;

border-bottom: none;

border-right: none;

}

/****** Below is how the buttons look when the mouse passes over***/

.navbutton a:hover {

color: #120499; 

background-color: #7093CB;

text-decoration: bold;     /********* CHANGE         BACK         IF        WRONG         LAST CGHANGE***************/


border-top:  none;

border-left: none;

border-bottom:  none;

border-right: none;

}


/****navigation headings  (I WOULD USE THIS INSTEAD FOR THE
ACTUAL NAVIGATION BUTTONS, INSERT THE MARBLE IMAGE BETWEEN THE BRACKETS)***/
.nav{
white-space:nowrap;
font-size: 100%;
color: #fff;
text-align: center;

/*background-color:#990000; */
/*border-top:1px solid #820f36;
border-bottom:1px solid #820f36;*/
width: 99%;
padding-left:0px;
padding-right:0px

}

.nav a:hover {

color: #0946A8; /*-----this is where you change the button font color, when the button is hovered over*/

/*background-color: #ff0000; /* <---- Change this to change the hover color */

border-top:  none;

border-left: none;

border-bottom:  none;

border-right: none;

text-decoration:underline;  /******CHANGE BACK                 IF    WRONG       !!****************/

}





/****delete everything below if RSS feed doesn't work***/



#addSiteTo {
width:90%;
font-size:85%;
text-align:center;
padding:8px 0;
border:0px;
margin:12px auto;
background-color: ;
}

#addSiteTo p {
padding:2px 2px 4px;
margin:0;
}

#addSiteTo img {
border:0;
padding:1px 0;
}