/** 
   CSS OVERRIDES

   We attempt to allow as much customisability through the interface as possible by overriding the default CSS with your own,
   if used in tangent with the HTML editor, you can completly transform the colour and / or style of the TRAVELfusion website.
   
   We have attempted to use a lot of images where possible, even if it's just for table borders, this design desision allows
   for much greater flexibility when re-coloring the site, you can choose to subsiquently add patterns or possibly unusual styles
   to the elements of the page.
   
   In this example, we will replace the standard rounded blue interface with a flattened green interface, and add two boxes to
   either side of the search box. This file will include overrides to the default TRAVELfusion style, as well as a few custom style
   definitions, and should hopefully give a feel for how things behave.
   
   Although you could go crazy with image replacements (by design!) in this example, I will try to keep things as simple as possible
   and document exactly where you should see changes to the interface when you replace a certain piece of CSS with your own custom
   version, and use as few different images as possible.
   
   Enjoy customising TRAVELfusion 2.0!

  */




/* The 'Travel Modes' Box, we don't need to do much with this box, just flatten it out and change
   the background colour. This box has 3 elements, The top, middle and bottom. We can simply replace
   the background images.
 */
#cat_top {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/home-top.gif);
	
	/* Our image is smaller than the original, modify the height of the element to match. */
	height: 7px;
}

.main_table {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/home-top-mid.gif);
}

/* This element changes the colour of the category links */
.cat_header {
	color: #F6791C;
	text-decoration:none;
}

#cat_bottom {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/home-top-bottom.gif);
}


/* This is the main 'Search Form', all form elements are contained inside this, we need to set the
   basic design first, and then we'll move onto the content. This box has 4 different elements inside it,
   along with the traditional top / middle / bottom, there's a 'hint' background. I'll describe it more
   when we reach it!
 */
.main_top {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/home-top.gif);
}

.main_hint_bg {
	/* When you view http://www.travelfusion.com, this image is used at the top of the search form, and
	   contains the text 'Place your cursor over the small icons to see more details', here i'm replacing
	   the box with a blank background
	 */
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/home-top-mid.gif);
}


.main_bg {
	/* The main background of the box */
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/home-top-mid.gif);
}


#main_bottom {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/home-top-bottom.gif);
	
	/* Override the height, as our image is smaller than the default */
	height: 16px;
}

/* These are related to the Small blue boxes surrounding the form fields, again, top, header (similar to hint)
   Background and Bottom.
 */
.small_box_top {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/smallbox-top.gif);
}

.small_box_header {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/smallbox-middle.gif); color: #656565; font-weight: bold; font-size:14px; font-family:Calibri;
}

/* The following two correct a bug in IE / Opera, assigning a background-image to a table row
   is supposed to cause the background of the entire row to have a background, however, in IE
   Opera, the style is applied to cells inside the row, and has the same (incorrect) behaviour as:
   .small_box_header td {
		background-image: url(images/smallbox-middle.gif);
   }
   
   What the following two element definitions do, is force the background position of the TDs
   into the correct position, and make it appear to have a single row background.
 */
.small_box_header td {
	background-position: right;	
}

.small_box_header .small_box_icons {
	background-position: left;	
}

/* Back to the normal CSS for these boxes */
.small_box_bg {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/smallbox-middle.gif);
}
 
 .small_box_bottom {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/smallbox-bottom.gif);
}


/* The following definitions are similar to the ones above, except
   span the entire search field, rather than half of it. (Specifically
   for Adults / Children / Infants / Class / etc. box)
 */
.big_box_top {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/bigbox-top.gif);
}

.big_box_bg {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/bigbox-middle.gif);
}
 
.big_box_bottom {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/bigbox-bottom.gif);
}

/* You can re-style the advanced box if you wish, in this example, we're
   just going to make it look like the previous adults / children etc box.
 */
.advanced_box_bottom {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/bigbox-bottom.gif);
}

.advanced_box_top {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/bigbox-top.gif);
}

.advanced_box_bg {
	background-image: url(http://bilgi.seyahatix.com/imagesseyahatix/bigbox-middle.gif);
}


/* This is simply the search button, for this demo, we'll re-colour it, and
   remove the background image.
 */
input.search {
	background-image:  url(http://bilgi.seyahatix.com/imagesseyahatix/ara.gif);
	background-color: #ffffff;
	width:120px;
	border:none;
}

/* This changes the generic 'Small Text' colour */
.smalltext {
	color: #F6791C;
}

/* This is our custom CSS for putting boxes to the side of the content. */
.side_box {
	background-color: #b2dd98;
	border: 1px solid #F6791C;
	padding: 3px;
	margin: 0px 3px 0px 3px;
}
.inactiveCaption
{
	PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px; FONT: 10px/13px geneva  verdana  sans-serif; COLOR: #696550; TEXT-DECORATION: none;
}
.small_box_top
{
	PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px; FONT: 10px/13px geneva  verdana  sans-serif; COLOR: #696550; TEXT-DECORATION: none;
}