/*
Customized CSS for CBDWeb Alpine Booking System
created by Greg Arnott

=================================================================================
 INSTRUCTIONS
=================================================================================

This stylesheet has been setup to customize the Alpine Booking System to your requirements.
Throughout this stylesheet shall be guides on where to change values, such as entering colour values.

For complex alterations, sample(s) and copy&paste code has been offered.

I have included some optional graphics to add some extra style to your site.
This includes gradient and shader effects.

*********** GRAPHICS **************************************************************
a dark vertical shade effect:
	background: #xxxxxx url([URL of Alpine Booking hosting]/stylesheet/images/shade0.gif) bottom repeat;

a light vertical shade effect:
	background: #xxxxxx url([URL of Alpine Booking hosting]/stylesheet/images/shade9.gif) bottom repeat;

a tight gradient of light at top to dark at bottom:
	background: #xxxxxx url([URL of Alpine Booking hosting]/stylesheet/images/grad9to0.gif) bottom repeat;

a medium gradient of light at top to dark at bottom:
	background: #xxxxxx url([URL of Alpine Booking hosting]/stylesheet/images/grad9to0spc2.gif) bottom repeat;

a loose gradient of light at top to dark at bottom:
	background: #xxxxxx url([URL of Alpine Booking hosting]/stylesheet/images/grad9to0spc3.gif) bottom repeat;
***********************************************************************************

To use:
- copy the whole line of the effect you want.
- paste where I have specified
- replace the colour detail
  - #xxxxxx where xxxxxx is the hexadecimal colour you are after, ie: #19952c is a dark green.
- fill in the URL detail, replacing "[URL of Alpine Booking hosting]"
  - "URL of Alpine Booking hosting" is the location of the Booking System's Hosting, which will access these graphics.
  		eg: background: #00cc99 url(http://www.summer-ski-lodges.com/stylesheet/images/grad9to0spc2.gif) bottom repeat;
  
 To add a solid background colour, use the following:
 	background: #xxxxxx;
	
A hexadecimal colour finder tool can be found at:
   http://www.colorschemer.com/online.html
	
 */

div#header {
	border-bottom: 2px solid black;
	overflow: hidden;

/*	**************************************************************************************
A BACKGROUND CAN BE USED HERE.
Use a graphic shader such as:
   background: #xxxxxx url(stylesheet/images/shade0.gif) bottom repeat;

Or the following for a solid colour:
   background: #xxxxxx;

The #xxxxxx in this case shall the the primary colour of the web site.
This colour is the main header background.
===== PASTE BELOW THIS LINE ==========================================================	*/

   background: #cc9;

/* === PASTE ABOVE THIS LINE ========================================================= */
	height: 100px;
	}
/*	**************************************************************************************
The height value 3 lines above sets the HEIGHT of the header.
If you are including a logo, this value must be larger than the height of the logo.
The height and line-height values 3 and 4 lines below must be 3px smaller than the value above.
*/
div#header div#site-name {
	height: 97px;
	line-height: 97px;

	
/*	**************************************************************************************
A SECONDARY COLOUR CAN BE USED HERE.

Copy this line:
	border-bottom: 5px solid #xxxxxx;

The #xxxxxx in this case should be the secondary or tertiary colour of the web site.
This will apply a solid line across the bottom of the header.
===== PASTE BELOW THIS LINE ==========================================================	*/

	border-bottom: 5px solid #AB9F85;

/* === PASTE ABOVE THIS LINE ========================================================= */


/*	**************************************************************************************
The following 5 details below affect the main header text.

TEXT DETAILS:
	color: #b7ff00;
	font-size: 465%;
	font-weight: bold;
	font-family: "arial black",tahoma,verdana,sans-serif;
	letter-spacing: 2px;


OPTIONS FOR THE 5 VALUES:
	COLOR - self-explanatory
	FONT-SIZE - self-explanatory
	FONT-WEIGHT - bold or normal
	FONT-FAMILY - order of preference of font to be shown from first to last. Multi-word fonts require " " as per example. Separate fonts with a comma.
	LETTER-SPACING - 0 is standard spacing. A positive number spreads the letters. A negative number compresses.

===== PASTE BELOW THIS LINE ==========================================================	*/

	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-style: normal;
	line-height: 95px;
	font-weight: bold;
	color: #333333;

/* === PASTE ABOVE THIS LINE ========================================================= */


	margin: 0;
	padding-left: 30px;
	width: 100%;

/*	**************************************************************************************
	To add a LOGO to the header of the site copy the '### COPY LINE ###' below, and paste where shown.
	
	The part of that line:
		url(LOCATION OF IMAGE/IMAGE NAME)
	needs to be altered to something like:
		url(images/logo.jpg)
	where 'images' is the image directory of the main site, or an absolute path such as "http://www.mywebsite.com/images/mycompanylogo.gif"
	
### COPY LINE ###:		
	background: transparent url(LOCATION OF IMAGE/IMAGE NAME) 80% 50% no-repeat;	

===== PASTE BELOW THIS LINE ==========================================================	*/

background: transparent url(http://www.skipegasus.com.au/peg_pics/pegasus_logo.gif) 90% 50% no-repeat;	

/* === PASTE ABOVE THIS LINE ========================================================= */
	}
	

a,a:link,a:link,a:link,a:hover {
/*	**************************************************************************************
 LINKS
 These two values affect only links. 
 
### COPY LINES ###:	
   color:#xxxxxx;
	text-decoration: none;

Choose either or both values, if desired, to change colour of all links, or to remove the underline effect of links.

===== PASTE BELOW THIS LINE ==========================================================	*/



/* === PASTE ABOVE THIS LINE ========================================================= */
	}

	
table.table1 th, table.table2 tbody th, table.availability tbody th.season {

/*	**************************************************************************************
The following 2 values affect table heading text. Copy, Paste and Alter if required.
		color:#fff;
		font-size:145%;
===== PASTE BELOW THIS LINE ==========================================================	*/



/* === PASTE ABOVE THIS LINE ========================================================= */


/*	**************************************************************************************
A BACKGROUND CAN BE USED HERE.
Use a graphic shader such as:
   background: #xxxxxx url(stylesheet/images/shade0.gif) bottom repeat;

Or the following for a solid colour:
   background: #xxxxxx;

The #xxxxxx in this case should be the primary colour of the web site.
This colour is the main title background of tables on the site.
===== PASTE BELOW THIS LINE ==========================================================	*/

   background: #cc9;

/* === PASTE ABOVE THIS LINE ========================================================= */

		} 

table.table2 th, table.availability tbody th, table.table1 tbody th.season {
/*	**************************************************************************************
The following 2 values affect table heading text. Copy, Paste and Alter if required.
		color:#fff;
		font-size:145%;
===== PASTE BELOW THIS LINE ==========================================================	*/



/* === PASTE ABOVE THIS LINE ========================================================= */

/*	**************************************************************************************
A BACKGROUND CAN BE USED HERE.
Use a graphic shader such as:
   background: #xxxxxx url(stylesheet/images/shade0.gif) bottom repeat;

Or the following for a solid colour:
   background: #xxxxxx;

The #xxxxxx in this case should be the secondary colour of the web site.
This colour is the secondary title background of tables on the site.
===== PASTE BELOW THIS LINE ==========================================================	*/

   background: #AB9F85;

/* === PASTE ABOVE THIS LINE ========================================================= */
		}

table.availability th, table.table1 tbody th, table.table2 tbody th.season {

/*	**************************************************************************************
The following 2 values affect table heading text. Copy, Paste and Alter if required.
		color:#fff;
		font-size:145%;
===== PASTE BELOW THIS LINE ==========================================================	*/

		color:#000;
		font-size:105%;

/* === PASTE ABOVE THIS LINE ========================================================= */

/*	**************************************************************************************
A BACKGROUND CAN BE USED HERE.
Use a graphic shader such as:
   background: #xxxxxx url(stylesheet/images/shade0.gif) bottom repeat;

Or the following for a solid colour:
   background: #xxxxxx;

The #xxxxxx in this case should be the tertiary colour of the web site.
This colour is the sub title background of tables on the site.
===== PASTE BELOW THIS LINE ==========================================================	*/

   background: #898681;

/* === PASTE ABOVE THIS LINE ========================================================= */
		}

.table1, .table2, .availability {
/*	**************************************************************************************
Table Border. The copy line example would change the border to a solid black line.

### COPY LINE ###:	
	border: 2px solid #000000;
===== PASTE BELOW THIS LINE ==========================================================	*/

	border: 2px solid #000000;

/* === PASTE ABOVE THIS LINE ========================================================= */

}

div#content form.f-wrap-1, div#content div.featurebox {
/*	**************************************************************************************
	To change the default concentric circle image with the folded red corner, copy the '### COPY LINE ###' below, and paste where shown.
	
	The part of that line:
		url(LOCATION OF IMAGE/IMAGE NAME)
	needs to be altered to something like:
		url(images/logo.jpg)
	where 'images' is the image directory of the main site, or an absolute path such as "http://www.mywebsite.com/images/coolbackground.gif"
	
	The #xxxxxx value is the background colour of these where the image doesn't cover. 
	
### COPY LINE ###:
	background: #xxxxxx url(images/featurebox_bg.gif) no-repeat 100% 100%;
	
### ALTERNATIVELY ###:
   background: #xxxxxx;

(This alternative is if you would like a solid colour background of a particular colour, and to remove the concentric circle image from showing)

===== PASTE BELOW THIS LINE ==========================================================	*/

	background: #f5f5f5 url("pegasus_wm.gif") no-repeat 100% 100%;

/* === PASTE ABOVE THIS LINE ========================================================= */

}

body {
	background: #fff url("pegasus_ft.gif") repeat-x 0 100%;
} 

.featurebox h3 {
	border-bottom: 1px solid #000;
}