/***********************************************************************/
/* Template specifies the structure: 1 header, 2 columns and a footer. */
/***********************************************************************/
/* Added col_tainer_1_div: A coltainer should contain 2 columns,
 * Each col_tainer has 2 column<div> blocks in it. */

/**********************************************************************************************/
/* GENERAL SETTINGS VALID FOR ALL HTML ELEMENTS AND BACKGROUND COLORS FOR THE NOT USED AREA'S */
/**********************************************************************************************/
body,html {
;	background-color:gray
;	          margin:0
;	         padding:0
;
}

/********************************************************************************/
/* OUTER AREA LIMITING THE BORDERS ON LEFT AND RIGHT AND MAIN BACKGROUND COLOR */
/********************************************************************************/
#wrap_div {
;	background-color: blue
;	          margin: 0px auto
;	           width: 1024px /* 1024 pixels width is very common for a monitor these days. */
;
}

/********************/
/* HTML PAGE HEADER */
/********************/
#header_div {
;	background-color: green
;	           clear: both /* no floating elements are allowed on the left and the right side of this element */
;
}

/**********************************/
/* HTML WEBPAGE CONTENT - COLUMNS */
/**********************************/
/* !! NOTE - IMPORTANT !!         */
/* When using 3 columns this set- */
/* tings will be overwritten by   */
/* CSS_EXT.add_column3.           */
/**********************************/
#col_tainer_1_div {
;	background-color: purple
;	           clear: both /* no floating elements are allowed on the left and the right side of this element */
;
}

	#column_1_div {
	;	background-color: yellow
	;	           clear: left
	;	           float: left
	;	           width:  50%
	;
	}

	#column_2_div {
	;	background-color: orange
	;	           clear: right
	;	           float: right
	;	           width:  50%
	;
	}

/****************************************************************************/
/* HTML PAGE HONEY AREA                                                     */
/* HONEY is an indication for invisible elements in html pages that provide */
/* useful information for the indexing mechanism of search engines.         */
/****************************************************************************/
#honey_div {
;	clear: both
;	   display: none
;	visibility: hidden
;	 font-size:  0px
;	    margin:  0px
;	   padding:  0px
;	    border:  0px
;
}

/*****************************************************************************/
/* CLASS HONEY                                                               */
/* The class honey contains settings for invisible text elements on the html */
/* pages. The aim for text and elements classified with "honey" is providing */
/* search engines with suitable information for indexing the html page.      */
/*****************************************************************************/
.honey {
;	   display: none
;	visibility: hidden
;	 font-size:  0px
;	    margin:  0px
;	   padding:  0px
;	    border:  0px
;	
}

/********************/
/* HTML PAGE FOOTER */
/********************/
#footer_div {
;	background-color: red
;	           clear: both /* no floating elements are allowed on the left and the right side of this element */
;
}

/*************************************************************************************************************/
/* Info derived from: http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/ */
/* Easy clearing of floats (see http://positioniseverything.net/easyclearing.html)                           */
/* Added 'class="cf" to header<div>, footer<div>. This styling information solves compatibility issue with   */
/* with older IE versions.                                                                                   */
/*************************************************************************************************************/
.cf:after { /* When closing each member of a class marked with 'cf', the next
             * properties are applied. In case some other style sheets override
             * very important settings, they will be overruled in the end. */
;	display:block
;	clear:both /* In fact this is redundant information. This property is already
;	             * set in this stylesheet when needed.  */
;	height:0
;	visibility:hidden
;	content:" "
;	font-size:0
}
/* Does not validate, use conditional comments for this bit if you want valid CSS */
.cf {*zoom:1;}