CSS Validation

/* link img {
  border: none;
}
 */
a img {
	text-decoration: none;
	border: 0 none;
	}
 
body {
max-width: 1080px;
min-width: 760px;
background-color: #94C0FC; /*  B0D3F3   */
font-family: Verdana, Arial, sans-serif;
font-size: 90%; 
color: #000000;
margin: auto;
padding: 0;
text-align: center;
}
 
 
 
/* Top Yellow Horizontal navigation buttons*/
 
#topnav {
	clear: both;	
	padding: 0;			
}
#topnav ul {
 
	float: left;
	list-style: none;
	background: url(<a href="http://www.thingstodoint.com/image-files/navtabbg.gif" rel="nofollow">http://www.thingstodoint.com/image-files/navtabbg.gif</a>) /* S#E4E4E4 url(../images/nav.jpg)*/ repeat-x;	
	width: 540px;		/* Set Navigation width here i.e. total width of horizontal navigation tabs.*/
	padding: 0;	margin: 95px 0 0 217px;   /* Set left margin here - distance that navigation tabs stand from the left.*/
	height: 30px;
	display: inline;
	text-transform: uppercase;
 
}
#topnav ul li {
margin-left:50px;
	display: inline;
	margin: 0; padding: 0;
}
 
#topnav ul li a {
 
	display: block;
	float: left;
	width: auto;
	margin: 0;
	padding: 0 15px;	
	border-right: 1px solid #dadada;
	border-left: 1px solid #fafafa;	
	border-bottom: none;
	color: #555;
	font: bold 10px/30px  Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
}
#topnav ul li a:hover {
background: url(<a href="http://www.thingstodoint.com/image-files/navtabbghover.gif" rel="nofollow">http://www.thingstodoint.com/image-files/navtabbghover.gif</a>) /* S#E4E4E4 url(../images/nav.jpg)*/ repeat-x;
color: #0033ff; 
}
 
/*
#topnav ul li a:current {
background: url(<a href="http://www.thingstodoint.com/image-files/navcurrent.gif" rel="nofollow">http://www.thingstodoint.com/image-files/navcurrent.gif</a>) repeat-x;
}
*/
 
#topnav ul li.current a:visited {
background: url(<a href="http://www.thingstodoint.com/image-files/navcurrent.gif" rel="nofollow">http://www.thingstodoint.com/image-files/navcurrent.gif</a>) repeat-x;
}
 
 
/*
#topnav ul li#current a {	
background: url(<a href="http://www.thingstodoint.com/image-files/navcurrent.gif" rel="nofollow">http://www.thingstodoint.com/image-files/navcurrent.gif</a>) repeat-x;		
}
*/
 
 
/*	End of Top horizontal nav bars  */
 
 
 
 
.max-width {
width:expression(document.body.clientWidth < 762? "760px" :document.body.clientWidth > 1082? "1080px": "auto" );
}
 
/*the font size is 100% of the body font setting So while it says 100%, this is actually 100% of whatever we set in the body selector. By default, that is 85%. No need to touch this if you dont want to */
table {
font-size:100%; /*leave this font size, change the individual cells below, if the default size isnt to your liking*/
color: inherit;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: left;
}
 
table.border{ /*this sets the border around your main content table*/
border: none;
width:100%; /*this sets how wide your content table will be. Change to 100% for full screen width*/
}
 
 
 
/* ----   this is a custom class for using graphics as bullets. Replace the image with your own. 
If you prefer to have stock standard bullets instead, simply delete  The 2 classes below,
and your bullets will show as normal. In that case, of course you need to remove the class name from the lists on
your actual html page ------   */
ul {
list-style-type: none;
padding-left: 0;
margin-left: 30px;
}
 
li.custom {
background: url(<a href="http://www.thingstodoint.com/image-files/arrow-bullet.gif" rel="nofollow">http://www.thingstodoint.com/image-files/arrow-bullet.gif</a>) left top no-repeat; 
padding-left: 20px;
margin-bottom: 10px;
margin-right: 20px;
padding-right: 20px;
background-position:left;
}
 
 
 
 
/* this area below is for your  Link-text and headings. You can change the font type and size, the color of each of them
as well as the a:hover, which is the text for a link, once the pointer passes over it*/
 
a { font-family: Verdana, Arial, sans-serif; 
font-size: 100%; 
color: blue; 
text-decoration: none;
}
 
a:visited { font-family: Verdana, Arial, sans-serif;
 font-size: 100%; 
 background-color: transparent;
 color: #888FF0;
 }
 
a:hover { font-family: Verdana, Arial, sans-serif;
 font-size: 100%; 
 background-color: transparent;
 color: blue;
 text-decoration: underline;
 }
 
 
 
/*these are your headings. Note that if you use the hbg class in your headings, then these styles may not apply
to those H tags */
h1 { font-family: Verdana, Arial, sans-serif; font-size: 170%;  color: #ff0000; text-align:center; margin-top:0}
h2 { font-family: Verdana, Arial, sans-serif; font-size: 116%;  color: #000; text-align:center; margin-top:0}
h3 { font-family: Verdana, Arial, sans-serif; font-size: 108%;  color: #000000; text-align:center}
 
/* This is for the heading background color....your H1, H2, and H3 tags*/
.hbg{
background-color:#0033cc; 
color: #ffffff;
width: auto;
padding: 3px 0px 3px 0px;
}
 
 
/* Below, is the background colors and styling for your table cells.*/
 
 
.header {
background-color: #fff;
background-image: url('../image-files/website-header.jpg');
background-position: top left;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
 
.spacer {
background-color: #fff;
width: 20%;
}
 
.content {
background-color: #fff;
border-left: 1px solid #cccccc;
border-right: none;
border-top: none;
border-bottom: none;
font-size: 100%; 
color: inherit;
padding: 9px;
/* width: 75%; */ 
}
 
.right {
font-family: Verdana, Arial, sans-serif;
font-size: 92%;
color: inherit;
background-color: #FEF8D9;
padding: 5px;
/* width: 180px; */  /*  width: 18%;  */ 
}
 
.left {
font-size: 90%;
color: inherit;
background-color: #fff;
padding: 3px; 
/* width: 200px; */
}
 
 
.footer {
font-size: 86%;
color:#DDF4FF;
background-color:#013781;
padding: 5px;
}
 
.footer a {font-family: Verdana, Arial, sans-serif; 
font-size: 100%; 
color:#DDF4FF;
text-decoration: none;
}
 
.footer a:visited { font-family: Verdana, Arial, sans-serif;
 font-size: 100%; 
 background-color: transparent;
color:#DDF4FF;
 }
 
.footer a:hover { font-family: Verdana, Arial, sans-serif;
 font-size: 100%; 
 background-color: transparent;
 color:#A0C7FB;
 text-decoration: underline;
 
}
 
.bottom-strip {
background-color: #0066ff;
font-size: 86%;
color: #ffffff;
text-align: center;
}
 
 
 
/* THE NAVIGATOR CAN BE APPLIED TO ALL THE LEFT NAVIGATION LINKS , BUT I PREFER TO USE THE -NAVLINK- style below */
 
.navigator {                        /*the navigator is the area surrounding your link buttons. Basically a box that you can style*/
background-color: transparent;
border: transparent;
width: auto;
padding: 2px;
text-align: left;
}
 
 
/* THIS SECTION IS FOR YOUR LEFT NAVIGATION LINKS*/
 
.navlink a {
font-family: Verdana, Arial, san-serif;
margin-top: 3px; /*sets the gap between your nav panel links. */
margin-right: 0px;
margin-bottom: 0px; /* if both top and bottom margins are set to 3px, then you have a total gap of 6 px between each link*/
margin-left: 0px;
}
 
/* this sets the font weight, which will be inherited by all of the different links states.
Main choices are bold, normal, and light. We don't
have to add this property/value to each individual link state*/
 
.navlink {
font-weight: bold;
}
 
 
/* this part is for the colors of your buttons "at rest".*/
 
.navlink a {
padding: 2px;
text-decoration: none;
display: block;
color: #000099; /*this is where you change the link font color*/
background-color: #FEEFA6;  /*   FFE466  */
/* border: 1px solid #000;  */
}
 
/*this part is how the links look, once the pointer passes over them. */
 
.navlink a:hover {
padding: 2px;
color: #0033ff; 
background-color:#FFDD3F;
}
 
.navlink a:visited {
padding: 2px;
color: #0033ff; 
background-color:#FDF3C2;
}
 
 
/* ----- THIS SECTION CONTROLS THE EXPANDING MENU ---------- */
 
a.dsphead{
   text-decoration:none;}
a.dsphead:hover{
   text-decoration:none;}
a.dsphead span.dspchar{
   font-family:monospace;
   font-weight:normal;}
.dspcont{
   display:none;}
/*.style1 {font-weight: normal}
//.style2 {font-weight: normal}  */
 
/* .dspcont{display:block;}
//.style2 {font-weight: normal}  */
 
 
 
/* ---- THIS SECTION IS THE BOOKING.COM  SEARCH BOX 
 
 	* {
                margin: 0;
        }
 
 
 
	a img {
		border: 0;
	}
 
	#searchboxInc {
		font: 12px/1.5 Arial, Helvetica, sans-serif;
                color:  #003580;
		width: 192px;
	}
 
        #searchboxInc form {
                background: #feba02;
        }
	#searchboxInc fieldset, #searchboxInc img {
		border: 0;
	}
 
	#searchboxInc fieldset {
		padding-right: 0px;
		padding-left:6px;
	}
 
	#searchboxInc #inout h3 {
		background-color:transparent;
		font-size:1.1em;
	}
 
	#searchboxInc h3 {
		margin-bottom:0.2em;
		position:static;
		font-size:118%;
		font-weight:bold;
		margin: 0;
	}
 
	#searchboxInc p {
		font-size: 2em;
		margin: 0;
	}
 
	#homein, #homeout {
		float: left;
		padding: 0.5em 1em 0 0;
        }
 
	.avail {
		padding-top: 1em;
		clear: left;
	}
 
	#searchboxInc a.calender {
		vertical-align: -4px;
	}
 
	#searchboxInc a.calender img {
		background: #0896ff;
	}
 
	.blur {
		color: #999;
	}
 
	button {
		float: center;
		margin-top:2px;
		margin-bottom:2px;
		-moz-border-radius: 8px;
		background-color: #0896ff;
		border: 2px solid #fff;
		color: #fff;
		letter-spacing: 1px;
		padding: 0.15em 0.75em;
 
		font: bold 1.133em/1 Arial, Helvetica, sans-serif;
	}
 
	#calendar {
		font: 12px/1.5 Arial, Helvetica, sans-serif;
		color: #003580;
	    display: none;
	    position: absolute;
	    background-image: url(<a href="http://q.bstatic.com/static/img/shadow3.png" rel="nofollow">http://q.bstatic.com/static/img/shadow3.png</a>)
	}
 
 
	.caltable {
	    border: 1px solid #003580;
	    background-color: #fff;
	}
	.caltable a:link, .caltable a:visited {
	    color: #0896ff !important;
	}
	.caltable a:hover {
	    color: #feba02 !important;
	    border-color: #feba02 !important;
	}
	.caltable a:active {
	    color: #b30000 !important;
	    border-color: #b30000 !important;
	}
	.caltable td {
	    text-align: center;
	}
	.caltable td a {
	    display: block;
	    text-decoration: none;
	}
	.caltable td.calheader a {
	    display: inline;
	    vertical-align: -.4em;
	}
	.caltable td.calheader img.calNoPrevMonth {
	    background: white url(<a href="http://r.bstatic.com/static/img/butPrevMonth.png" rel="nofollow">http://r.bstatic.com/static/img/butPrevMonth.png</a>) 0 -72px no-repeat;
	    vertical-align: -.4em;
	}
	.caltable td.calheader img.calNoNextMonth {
	    background: white url(<a href="http://s.bstatic.com/static/img/butNextMonth.png" rel="nofollow">http://s.bstatic.com/static/img/butNextMonth.png</a>) 0 -72px no-repeat;
	    vertical-align: -.4em;
	}
	.caltable td.calheader .calNextMonth img {
	    background: white url(<a href="http://r.bstatic.com/static/img/butNextMonth2.png" rel="nofollow">http://r.bstatic.com/static/img/butNextMonth2.png</a>) 0 0 no-repeat;
	}
	.caltable td.calheader .calPrevMonth img {
	    background: white url(<a href="http://q.bstatic.com/static/img/butPrevMonth2.png" rel="nofollow">http://q.bstatic.com/static/img/butPrevMonth2.png</a>) 0 0 no-repeat;
	}
	.caltable td.calheader .calNextMonth:hover img, .caltable td.calheader .calPrevMonth:hover img {
	    background-position: 0 -24px;
	}
	.caltable td.calheader .calNextMonth:active img, .caltable td.calheader .calPrevMonth:active img {
	    background-position: 0 -48px;
	}
	.calheader {
	    padding: .4em;
	    white-space: nowrap;
	}
	.calheader select {
	    margin: 0 .6em;
	}
	.monthYear {
	    background-color: #ffffff;
	    color: white;
	}
	.dayNames td {
	    border-bottom: 1px solid #003580;
	    background-color: #e6edf6;
	}
	.days td {
	    color: #779bca;
	    background-color: #e6edf6;
	    padding: .2em;
	    border: 2px solid #e6edf6;
	}
	.days td.weekend {
	    background-color: #c5d4e9;
	    border-color: #c5d4e9;
	}
	.days td.past {
	    text-decoration: line-through;
	}
	.days td.today, .days td.future {
	    border: none;
	    padding: 0;
	}
	.days td a {
	    padding: .2em;
	    border: 2px solid #e6edf6;
	}
	.days td.weekend a {
	    border-color: #c5d4e9;
	}
	.days td.today a {
	    background-color: #fff;
	}
	.days td.selected {
	    font-weight: bold;
	}
	.days td.selected a {
	    border-color: #0896ff;
	}
 
---------------------------------------------- */
 
 
/* THIS SECTION IS FOR STYLING ALL THE BOXES. */
 
 
div.center-box {
   width: 60%;
   background-color: #ffffcc;
	 margin:5px auto;	
	 padding: 15px;
   border: 1px dotted #000066;
	}
 
 
div.full {
   background-color: #ccccff;
	 margin: 15px 10px 10px 10px;
	 padding: 15px;
   border: 1px solid #000;
	}
 
div.full2 {
   background-color: #ffffaa;
	 margin: 15px 0px 10px 0px;
	 padding: 15px;
   border: 1px solid #000066;
	}
 
 
 div.half-left {
  background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #000066;
	padding: 10px;
	width: 50%;
	float: left;
	}
 
 
div.half-right {
  background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #000066;
	padding: 10px;
	width: 50%;
	float: right;
}
 
 
 
/* the border of the image  can be changed.
Its set to #000066 at the moment. You can also change the solid
to either dashed or dotted if you want to*/
 
/*** 2 classes to float an image to the right or left ***/
.img-left {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: 2px solid #000066;
}
.img-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: transparent;
}
 
/*** Clearing of a float ***/
div.clear {
	clear: both;
	width: 100%;
	height: 1px;
}