/* THIS CODES ARE FOR THE MAIN BODY OF THE PAGE */

body {
	
	font-family: Arial, Helvetica, sans-serif; /*this governs the settings for the page, but will be superceded by a specific class or subclass for a tag - example in the nav section*/
	font-size: medium;
	text-align: left;
	color: #000000;
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
    }


.bodysmall { /* apply this style to make the text smaller than the default text */
	font-family: Arial, Helvetica, sans-serif; 
	font-size: small;
    }

.bodysmallBold { /* apply this style to make the text smaller than the default text and in bold style*/
	font-family: Arial, Helvetica, sans-serif; 
	font-size: small;
	font-weight: bold;
   }

.copyright { /* text for the copyright */
	font-family: Arial, Helvetica, sans-serif; 
	font-size: x-small;
	 
    }

a:link {
	text-decoration: underline; /*the other parameters will default to the standard colours and inherit the page font sizes WHICH MEANS that if you have a link within a paragraph that has its own different font size allocated, then you'll have to create a specific css class for the link to make it match the font size - examples are down in the nav section*/
   }
   
a:visited { /* automatically applied on links. if the link is visited the link will be in purple color except for the nav section or menu */
	text-decoration: #551A8B;
   }
   
a:hover { /* putting the cursor above the link will have an underline effect, you'll notice this on the nav menu since other links are already underlined as default specifically on the body section of the page*/
	text-decoration: underline;
    }
	
a:active {
	text-decoration: none;

    }

h1 { /* This setting is applied in the main header of the page */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #21698d;
	font-weight: normal;
	font-style: normal;
    }
	
h2 { /* This is the header for each article on the page */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #21698d;
	font-weight: normal;
	font-style: normal;
	}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #21698d;
	font-weight: normal;
	font-style: normal;
	}
	
.thumborder { /* the background color for the table containg the thumbnails on the photo album main pages */
	background-color: #425164;
}

.blueitalic { /* for the part of  headings that are in large blue italics! */
	color: #21698D;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	font-style: italic;
	font-weight: bold;
    }
	
.boldred { /* text style is bold and color is red. Applied specifically to the metro line text - Red Line, L7 */
	color: #CC1F23;
	font-weight: bold;
    }

.redtext { /* applies the color red in texts, used specifically on tip sections */
	color: #CC1F23;
	}


.boldgreen { /* text style is bold and color is green. Applied specifically to the metro line text - Green Line, L3 */
	color: #006600;
	font-weight: bold;
   }

.boldorange {
	color: #CC6600;
	font-weight: bold;
	}
	

.boldblue { /* text style is bold and color is Blue. Applied specifically to the metro line text - Blue Line, L1 */
	color: #003048;
	font-weight: bold;
   }
   
.boldbluehotel { /* text style is bold and color is Blue. Applied specifically to the metro line text - Blue Line, L1 */
	color: #0000FF;
	font-weight: bold;
   }
   
.boldgrey { 
	color:#666666;
	font-weight: bold;
   }	

.bolddarkblue { /* text style is bold and color is dark blue. applied specifically to the metro line text. - Dark Blue Line, L6. */
	color:#003048;
	font-weight: bold;
   }
   
.bolddarkbluesmall {
	color:#003048;
	font-size:x-small;
	font-weight: bold;
   }

.boldlightblue { /* text style is bold and color is ligh blue. Applied specifically to the metro line text - Light Blue Line, L5 */
	color:#33ccff;
	font-weight: bold;
   }
   
.boldbrown { /* text style is bold and color is brown. applied specifically to the metro line text - Brown Line, L7 */
	color:#996600;
	font-weight: bold;
   }

.boldbluesmall {
	color: #003048;
	font-size: x-small;
	font-weight: bold;
   }

.boldpurple { /* text style is bold and color is purple. applied specifically to the metro line text - Purple Line, L2 */
	color: #720072;
	font-weight: bold;
    }


.boldyellow { /* text style is bold and color is yellow. Applied specifically to the metro line text - Yellow Line, L4 */
	color: #FFCC00;
	font-weight: bold;
    }
	
.boldpink { /* text style is bold and color is pink. applied specifically to the metro line text - Pink Line, L8 */
	color:#FF66CC;
	font-weight: bold;
   }

.boldwhite { /* text style is bold and color is white */
	color: #FFFFFF;
	font-weight: bold;
    }
	
.white { /* text color is white */
	color: #FFFFFF;
    }	
	
	
.picborder { /* applied to pictures, creates a border for the pictures*/
	border: 1px groove; 
	margin: 5px; 
	border-color: 256485 256485 256485 256485;
	}

.mappicborder { /* applied to pictures, creates a border for the pictures*/
	border: 1px groove; 
	margin: 0px; 
	border-color: 256485 256485 256485 256485;
	} 

.picbordersmall { /* same as picborder. the difference is the margin */
	border: 1px groove; 
	margin: 1px; 
	border-color: 256485 256485 256485 256485;
	} 

td.maincontent { /*The main content of  page sits in one cell. This class, applied to that cell ensures left and right "margins" from adjoining cells */
	padding-right: 5px;
	padding-left: 5px;
}

.boxtitle { /*for the title text in the small boxes or text that describe a picture or image. Also applied on text at the SSI footer */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #21698d;
}

.boxtitle a:hover { /* applied usually on the SSI footer of the page */
	color: #21698d; 
	text-decoration: underline;
	}
	
.boxtitle a:link {
	color: #21698d; 
	text-decoration: none;
	}
	
.boxtitle a:visited {
	color: #21698d; 
	text-decoration: none;
	}
	
.boxtitle a:active {
	color: #21698d; 
	text-decoration: underline;
	}

.boxtitle a:hover {
	color: #21698d; 
	text-decoration: underline;
	}

.boxtext {  /*for the inside text in the small boxes */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #21698d;
	}
	
.whitebold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	}
.whitebold2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	}
	
.linkswhite {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: underline;
	}

/*Right Column*/
td.rightcol{ bgcolor: #FFFFFF; } 


/*Navigation Panel*/


td.menu, td.menu_1, td.menu_2{ /*this sets the background colour for the menu cells */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	background-color: #3795C5;
}

td.menu_3 { /*this sets the background colour for the menu cells*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	background-color: #2C7FA9;
}

.menu a {        /* first navigation level*/       
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
}

.menu a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.menu a:link {
	color: #FFFFFF; 
	text-decoration: none;
	}
	
.menu a:visited {
	color: #FFFFFF; 
	text-decoration: none;
	}
	
.menu a:active {
	color: #FFFFFF; 
	text-decoration: underline;
	}

.menu a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}

.menu_1 a {     /* 2nd navigation level*/       
	font-size: 13px;
	font-weight: bold;
	color:#FFFFFF;
}

.menu_1 a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	}
	
.menu_2 a {     /* 3th navigation level*/         
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	}
	
.menu_2 a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}


.menu_3 a {     /* 4th navigation level*/         
	font-size: 11px;
	font-weight: bold;
	color:#FFFFFF;
}

.menu_3 a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}

.langs {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	align: centre;
	}

hr {
	color: #ffffff;   /* dotted line to seperate one article from another*/
	border-top: 1px dotted #21698d;
	width: 100%;
	height: 2 px;
	}

td.nav, td.nav1 { /*this sets the background colour for the menu cells and ensures  black headings are the same font and size as the links; note that the BLACK text colour is inherited from the BODY settings. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	background-color: #3795C5;
	}

.nav a {	/* "regular" nav links*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color:#FFFFFF;
	}

.nav a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.nav a:link {
	color: #FFFFFF; 
	text-decoration: none;}
	
.nav a:visited {
	color: #FFFFFF; 
	text-decoration: none;
	}
	
.nav a:active {
	color: #FFFFFF; 
	text-decoration: none;
	}

.nav a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.nav1 a { /*bolder nav links*/
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	}

.nav1 a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.nav1 a:link {
	color: #FFFFFF; text-decoration: none;
	}
	
.nav1 a:visited {
	color: #FFFFFF; 
	text-decoration: none;
	}
	
.nav1 a:active {
	color: #FFFFFF; 
	text-decoration: none;
	}


.nav1 a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}

.nav2 a { /* copyright.*/
	font-size: 9px;
	font-weight: normal;
	color:#FFFFFF;
	}
	
.nav2 a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}

.table
{
    border-right: silver thin double;
    border-top: silver thin double;
    border-left: silver thin double;
    border-bottom: silver thin double;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 5px;
    margin: 1px;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #83BDDB;
}

.gobutton { /* this is the style for the search button on the header */
	color:#ffffff;
	font-weight:bold;
	border-width: 2px;
	border-color:#85bddf;
	background-color:#85bdde;
	cursor:pointer; /* change the cursor to a pointing hand when on top of button */ 
	}

.hoteltable {
border:1px solid;
border-color:#cfe1eb;
}

.hoteltable th{
border:1px solid;
border-color:#cfe1eb;
background-color:#3795c5;
color:#FFFFFF;
font-weight:bold;
font-size:smaller;
}

.hoteltable td{
border:1px solid;
border-color:#cfe1eb;
padding-left: 2px;
padding-right: 2px;
padding-top: 4px;
padding-bottom: 4px;
font-size:small;
}

/*BOOKING button styles*/

.buttoncss {
border-style: outset;
border-color: #336600;
border-width: 2px;
background-color: #00CC33;
padding: 1px 4px;
color: #FFFFFF;
text-decoration: none;
font: bold smaller Arial, Helvetica, sans-serif;
}

.buttoncss:visited {
border-style: outset;
border-color: #336600;
border-width: 2px;
background-color: #00CC33;
padding: 1px 4px;
color: #FFFFFF;
text-decoration: none;
font: bold smaller Arial, Helvetica, sans-serif;
}

.buttoncss:hover {
border-style: inset;
color: #FFFFFF;
border-color: #bde6f3;
background-color:#00FF00;
text-decoration:none;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

.buttoncss:active {
}

/*DE BUTTON*/

a.bookbutton-de {
background-image: url(http://www.salou-tourist-guide.com/icon/book-de1.gif);
border-style:none;
text-decoration:none;
padding: 10px 83px 1px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-de:hover {
background-image: url(http://www.salou-tourist-guide.com/icon/book-de2.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-de:visited {
background-image: url(http://www.salou-tourist-guide.com/icon/book-de1.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-de:active {
}

a.sponsoredbutton-de {
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-de1.gif);
border-style:none;
text-decoration:none;
padding: 0px 108px 0px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

a.sponsoredbutton-de:hover {
background-color: transparent;
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-de2.gif);
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

/*EN BUTTON*/

a.bookbutton {
background-image: url(http://www.salou-tourist-guide.com/icon/book-en1.gif);
border-style:none;
text-decoration:none;
padding: 10px 70px 1px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton:hover {
background-image: url(http://www.salou-tourist-guide.com/icon/book-en2.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton:visited {
background-image: url(http://www.salou-tourist-guide.com/icon/book-en1.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton:active {
}

a.sponsoredbutton {
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-en1.gif);
border-style:none;
text-decoration:none;
padding: 0px 85px 0px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

a.sponsoredbutton:hover {
background-color: transparent;
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-en2.gif);
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

/*FR BUTTON*/

a.bookbutton-fr {
background-image: url(http://www.salou-tourist-guide.com/icon/book-fr1.gif);
border-style:none;
text-decoration:none;
padding: 10px 75px 1px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-fr:hover {
background-image: url(http://www.salou-tourist-guide.com/icon/book-fr2.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-fr:visited {
background-image: url(http://www.salou-tourist-guide.com/icon/book-fr1.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-fr:active {
}

a.sponsoredbutton-fr {
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-fr1.gif);
border-style:none;
text-decoration:none;
padding: 0px 88px 0px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

a.sponsoredbutton-fr:hover {
background-color: transparent;
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-fr2.gif);
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

/*IT BUTTON*/

a.bookbutton-it {
background-image: url(http://www.salou-tourist-guide.com/icon/book-it1.gif);
border-style:none;
text-decoration:none;
padding: 10px 88px 1px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-it:hover {
background-image: url(http://www.salou-tourist-guide.com/icon/book-it2.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-it:visited {
background-image: url(http://www.salou-tourist-guide.com/icon/book-it1.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-it:active {
}

a.sponsoredbutton-it {
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-it1.gif);
border-style:none;
text-decoration:none;
padding: 0px 108px 0px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

a.sponsoredbutton-it:hover {
background-color: transparent;
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-it2.gif);
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

/*SP BUTTON*/

a.bookbutton-sp {
background-image: url(http://www.salou-tourist-guide.com/icon/book-sp1.gif);
border-style:none;
text-decoration:none;
padding: 10px 88px 1px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-sp:hover {
background-image: url(http://www.salou-tourist-guide.com/icon/book-sp2.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-sp:visited {
background-image: url(http://www.salou-tourist-guide.com/icon/book-sp1.gif);
background-repeat: no-repeat;
width: 84px;
height: 27px;
}

a.bookbutton-sp:active {
}

a.sponsoredbutton-sp {
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-sp1.gif);
border-style:none;
text-decoration:none;
padding: 0px 111px 0px 20px; /* down right up left*/
background-repeat: no-repeat;
width: 100px;
height: 16px;
}

a.sponsoredbutton-sp:hover {
background-color: transparent;
background-image: url(http://www.salou-tourist-guide.com/icon/sponsored-sp2.gif);
background-repeat: no-repeat;
width: 100px;
height: 16px;
}


/*Styles for the right margin or menu*/

.tablernav { /*this sets the background colour for the menu cells and ensures  black headings are the same font and size as the links; note that the BLACK text colour is inherited from the BODY settings. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	border:1px solid;
	border-color:#cfe1eb;
	background-color: #3795C5;
	}

td.tablernav, td.tablernav1 { /*this sets the background colour for the menu cells and ensures  black headings are the same font and size as the links; note that the BLACK text colour is inherited from the BODY settings. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	background-color: #3795C5;
	border-color:#cfe1eb;
	}

.tablernav a {	/* "regular" nav links*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color:#FFFFFF;
	}

.tablernav a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.tablernav a:link {
	color: #FFFFFF; 
	text-decoration: none;}
	
.tablernav a:visited {
	color: #FFFFFF; 
	text-decoration: none;
	}
	
.tablernav a:active {
	color: #FFFFFF; 
	text-decoration: none;
	}

.tablernav a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.tablernav1 a { /*bolder nav links*/
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	}

.tablernav1 a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.tablernav1 a:link {
	color: #FFFFFF; text-decoration: none;
	}
	
.tablernav1 a:visited {
	color: #FFFFFF; 
	text-decoration: none;
	}
	
.tablernav1 a:active {
	color: #FFFFFF; 
	text-decoration: none;
	}


.tablernav1 a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
/* End of Styles for the right menu*/

/*Styles for the left margin or menu*/

.tablenav { /*this sets the background colour for the menu cells and ensures  black headings are the same font and size as the links; note that the BLACK text colour is inherited from the BODY settings. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 13px;
	border:1px solid;
	border-color:#cfe1eb;
	background-color: #3795C5;
	color:#FFFFFF;
	}

td.tablenav, td.tablenav1 { /*this sets the background colour for the menu cells and ensures  black headings are the same font and size as the links; note that the BLACK text colour is inherited from the BODY settings. */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	background-color: #3795C5;
	border-color:#cfe1eb;
	}

.tablenav a {	/* "regular" nav links*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color:#FFFFFF;
	}

.tablenav a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.tablenav a:link {
	color: #FFFFFF; 
	text-decoration: none;}
	
.tablenav a:visited {
	color: #FFFFFF; 
	text-decoration: none;
	}
	
.tablenav a:active {
	color: #FFFFFF; 
	text-decoration: none;
	}

.tablenav a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
/* End of Styles for the left menu*/

.iconborder { /* same as picborder. the difference is the margin */
	border-color:#000000;
	border-width: 1px;
	} 

.nlfield {
	background-color: rgb(255, 255, 160);
	color:#000000;
	font-size:13px;
	}
	
.menuhead {
	color:#000000;
	font-size:13px;
	font-weight:bold;
	}

.name2 {
	display:none;
	visibility:hidden;
}

/*STYLE FOR THE LINK TEXT ON THE HEADER SSI*/

.header-txt {
	font-size:19px;
	color:#FFFFFF;
	text-decoration:none;
}

.header-txt a {
	font-size:19px;
	color:#FFFFFF;
	text-decoration: underline;
	}

.header-txt a:link {
	color: #FFFFFF; 
	text-decoration: underline;}

.header-txt a:hover {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.header-txt a:visited {
	color: #FFFFFF; 
	text-decoration: underline;;
	}
	
.header-txt a:active {
	color: #FFFFFF; 
	text-decoration: underline;
	}
	
.tablecontact {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 13px;
	border:1px solid;
	border-color:#cfe1eb;
	background-color: #3795c5;
	color:#ffffff;
	font-weight:bold;
	}

td.tablecontact { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	background-color: #3795c5;
	border-color:#cfe1eb;
	}
	
.tablecontacthead {
	font-size:medium;
}

    .gsmsc-mapDiv {
      height : 400px;
    }

    .gsmsc-idleMapDiv {
      height : 400px;
    }

    #mapsearch {
      width : 500px;
      margin: 10px;
      padding: 4px;
    }