/*
Gary Hollands - solriche - 2009
This stylesheet is available under the terms of the GNU General Public License as published by
the Free Software Foundation - Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 */
 .return_to_grid{
	clear: both;
	padding: 0.5em 0 0.5em 1em;
}
/*------------------------------Box Model------------------------------*/
#box_model_example{
	clear: both;
	width: 24em;
	height: 9.6em;
	margin: 0.5em 0 0.5em 0;
	border: 1px dashed rgb(180,180,180);
}
#box_model_example p{
	text-align: center;
	font-size: 80%;
}
#box_model_example .box_content{
	width: 96%;
	height: 2.5em;
	margin: 0 auto 0 auto;
	background-color: rgb(230,255,191);
	outline: rgb(180,180,180) dotted 1px;
}
#box_model_example .box_content p{
	padding: 0.5em 0 0 0;
}
#box_model_example .box_content_padding{
	width: 96%;
	height: 5em;
	margin: 0 auto 0 auto;
	background-color: rgb(191,255,255);
	border: 1px solid rgb(10,10,10);
}
#box_model_example .box_content_border{
	width: 96%;
	height: 7.4em;
	margin: 0 auto 0 auto;
	background-color: rgb(125,125,125);
	border: 1px solid rgb(10,10,10);
}
#box_model_example .white_text{
	color: rgb(255,255,255);
}
#box_model_example .box_content_margin{
	height: 100%;
	background-color: rgb(218,191,255);
	outline: rgb(180,180,180) dotted 1px;
}
/*------------------------------CSS Examples------------------------------*/
#background_example{
	width: 150px;
	height: 100px;
	background: rgb(100,120,180) url("street.png") no-repeat scroll 50% 50%;
}
.border_example{
	width: 10em;
	text-align: center;
	margin: 0.25em 0.25em 0.25em 0;
	padding: 0.25em;
	border: 1px dotted rgb(180,180,180);
}
.clear_example_container{
	float: left;
	clear: both;
	width: 100%;
	margin: 0.25em 0.25em 0.25em 0;
}
.clear_example_box1, .clear_example_box2{
	float: left;
	width: 12em;
	text-align: center;
	margin: 0.25em 0.25em 0.25em 0;
	padding: 0.25em;
	border: 1px dotted rgb(180,180,180);
}
.clear_example_box1{
	clear: both;
}
.clear_example_box2{
	clear: none;
}
.clip_example{
	width: 122px;
	height: 96px;
	border: 1px dotted rgb(180,180,180);
}
.clip_example img{
	position: absolute;
	clip: rect(10px, 80px, 90px, 10px);
	/*opacity:0.4; CSS 3*/
}
.color_example{
	color: rgb(200,100,50);
}
.content_example:before{
	content: "Some text before ";
	color: rgb(200,100,50);
}
.content_example:after{
	content: ", some text after";
	color: rgb(200,100,50);
}
.counter-increment_example h4{
	counter-increment: section;
	counter-reset: sub-section;
}
.counter-increment_example h4:before{
	content: "Section " counter(section) " ";
}
.counter-increment_example p{
	text-indent: 1em;
	counter-increment: sub-section;
}
.counter-increment_example p:before {
	content: counter(section) "." counter(sub-section) " ";
}
#cursor_example .crosshair{
	cursor: crosshair;
}
#cursor_example .help{
	cursor: help;
}
#cursor_example .nw-resize{
	cursor: nw-resize;
}
#cursor_example .crosshair, #cursor_example .help, #cursor_example .nw-resize{
	color: rgb(200,100,50);
	font-weight: bold;
	margin: 0 0.5em 0 0.5em;
}
.direction_example{
	width: 15em;
	direction: rtl;
}
#display_example_container  .inline ul li{
	display: inline;
	color: rgb(200,100,50);
	margin: 0 0.5em 0 0;
}
#float_example_container, #height_example_container, #line-height_example{
	clear: both;
	float: left;
	width: 50%;
}
#float_example_container .left_float_box, #float_example_container .right_float_box{
	width: 10em;
	border: 1px dotted rgb(180,180,180);
	text-align: center;
	color: rgb(200,100,50);
}
#float_example_container .left_float_box{
	float: left;
}
#float_example_container .right_float_box{
	float: right;
}
#font_example p{
	font: small-caps bold 80%/1.8 "lucida sans unicode",arial,"bitstream vera sans",sans-serif;
}

#height_example_container .height_box_1, #height_example_container .height_box_2{
	float: left;
	width: 12em;
	border: 1px dotted rgb(180,180,180);
	text-align: center;
	color: rgb(200,100,50);
}
#height_example_container .height_box_1{
	height: 2em;
	margin-right: 0.5em;
}
#height_example_container .height_box_2{
	height: 3em;
}
#letter-spacing_example .more_letter_spacing{
	letter-spacing: 0.25em;
	color: rgb(200,100,50);
}
#line-height_example .line-height_para_1, #line-height_example .line-height_para_2{
	float: left;
	border: 1px dotted rgb(180,180,180);
	color: rgb(200,100,50);
	margin-right: 0.25em;
	padding: 0.25em;
}
#line-height_example .line-height_para_1{
	line-height: 2;
}
#line-height_example .line-height_para_2{
	line-height: 3;
}
#list-style_example ul{
	margin: 0.5em 0 0 1em;
	list-style: disc inside url("bee.png");
}
#outline_example{
	width: 25em;
	outline: rgb(0,0,0) dotted 1px;
	border: 1px solid rgb(80,80,180);
	text-align: center;
	color: rgb(200,100,50);
}
.overflow_example{
	width: 12em;
	height: 4.8em;
	border: 1px dotted rgb(180,180,180);
	color: rgb(200,100,50);
	padding: 0.25em;
	overflow: hidden;
}
#position_example_box{
	position: relative;
	width: 25em;
	height: 6em;
	border: 1px dotted rgb(180,180,180);
	color: rgb(200,100,50);
	margin: 0.75em 0 0.75em 0;
	padding: 0.25em;
}
#position_example_box p{
	margin: 1em 0 0 0;
}
#position_example_box .hope{
	position: relative; top: -1em; left: 1.5em;
}
#position_example_box .dispair{
	position: absolute; top: 4.75em; right: 10em;
}
.quotes_example q{
	quotes: "'" "'" '"' '"';
}
.text-decoration_example{
	text-decoration: line-through;
}
.text-transform_example{
	text-transform: capitalize;
}
#unicode-bidi_example_container, #white-space_example_container{
	width: 15em;
	border: 1px dotted rgb(180,180,180);
}
.unicode-bidi_example{
	direction: rtl;
	unicode-bidi: embed;
}
.vertical_align_sub{
	vertical-align: sub;
}
.vertical_align_super{
	vertical-align: super;
}
.visibility_example{
	visibility: hidden;
}
#white-space_example_container .white-space_example{
	white-space: nowrap;
}
.word-spacing_example{
	word-spacing: 0.5em;
	color: rgb(200,100,50);
}

#z-index_example_container{
	width: 32.4em;
	height: 20em;
	margin: 0 0 0.5em 0;
	border: 1px dotted rgb(18,18,18);
	background-color:  rgb(250,250,250);
}
#z-index_example_container .z-box-1, #z-index_example_container .z-box-2, #z-index_example_container .z-box-3, #z-index_example_container .z-box-4 {
	width: 8.1em;
	height: 5em;
	border: 1px dotted rgb(180,180,180);
}
#z-index_example_container p{
	margin: 0.5em 0 0 0;
	text-align: center;
}
#z-index_example_container .z-box-1{
	position: relative; top: 1em; left: 1em;
	z-index: 40;
	background-color: rgb(255,242,191);
}
#z-index_example_container .z-box-2{
	background-color: rgb(230,255,191);
	position: relative; top: 0.25em; left: 8.5em;
	z-index: 30;
}
#z-index_example_container .z-box-3{
	background-color: rgb(191,255,255);
	position: relative; top: -0.5em; left: 16em;
	z-index: 20;
}
#z-index_example_container .z-box-4{
	background-color: rgb(218,191,255);
	position: relative; top: -1.25em; left: 23.5em;
	z-index: 10;
}
/*------------------------------Table examples------------------------------*/
#table_css_eg{
	margin: 0.5em 0 0 0;
	width: 100%;
}
#table_css_eg table, #table_css_eg td, #table_css_eg th{
	border: 1px dotted rgb(180,180,180);
}
#table_css_eg tfoot{
	text-align: center;
	font-weight: bold;
}
#border_collapse_example, #border_spacing_example, #caption_side_example, #empty-cells_example{
	float: left;
	margin: 1em 0 1em 0.5em;
}
#border_collapse_example .border_collapse_off, #border_collapse_example .border_collapse_on{
	float: left;
	border-collapse: separate;
	empty-cells: hide;
	border-spacing: 5px;
	caption-side: bottom;
}
#border_collapse_example .border_collapse_on {
	border-collapse: collapse;
	margin-left: 0.5em;
}
#border_spacing_example  .border_spacing_1, #border_spacing_example  .border_spacing_2{
	float: left;
	caption-side: bottom;
}
#border_spacing_example  .border_spacing_2{
	border-spacing: 5px;
}
#border_spacing_example  .border_spacing_2{
	border-spacing: 8px;
	margin-left: 0.5em;
}
#caption_side_example  .caption_side_top, #caption_side_example  .caption_side_bottom{
	float: left;
}
#caption_side_example  .caption_side_top{
	caption-side: top;
}
#caption_side_example  .caption_side_bottom{
	caption-side: bottom;
	margin-left: 0.5em;
}
#empty-cells_example .empty-cells_show, #empty-cells_example .empty-cells_hide{
	float: left;
	caption-side: bottom;
}
#empty-cells_example .empty-cells_show{
	margin-right: 0.5em;
}
#empty-cells_example .empty-cells_hide{
	empty-cells: hide;
}
#table-layout_example .table-layout_auto, #table-layout_example .table-layout_fixed{
	float: left;
	width: 10em;
	caption-side: bottom;
}
#table-layout_example .table-layout_auto td{
	width: 20%;
}
#table-layout_example .table-layout_auto{
	margin-right: 0.5em;
}
#table-layout_example .table-layout_fixed{
	table-layout: fixed;
}
#table-layout_example .table-layout_fixed td{
	width: 20%;
}
/*------------------------------Pseudo------------------------------*/

ul.pseudo_diff_list {
	margin: 0.5em 0 0.5em 1em;
	list-style: circle inside;
}
ul.pseudo_diff_list li{
	margin: 0.25em 0 0 0;
	font-size: 90%;
}
#links_example a:link{
	color: rgb(0,28,112);
	text-decoration: underline;
}
#links_example a:visited{
	color: rgb(112,101,0);
	text-decoration: underline;
}
#links_example a:focus{
	outline: none;
	color: rgb(245,245,245);
	background-color: rgb(180,200,220);
}
#links_example a:hover{
	color: rgb(112,23,0);
	text-decoration: none;
}
#links_example a:active{
	color: rgb(245,245,245);
	background-color: rgb(10,10,10);
	text-decoration: none;
}
#pseudo_lang_eg q:lang(fr){
	quotes: '« ' ' »';
}
#pseudo_lang_eg q:lang(en){
	quotes: '"' '"';
}
#first_letter_eg p:first-letter{
	font-size: 250%;
	font-family: serif;
}
#first_line_eg{
	width: 40em;
}
#first_line_eg p:first-line{
	font-size: 110%;
	color: rgb(100,80,180);
}
/*------------------------------Attribute selector------------------------------*/
#attributes_selector_example{
	clear: both;
	width: 100%;
}
#attributes_selector_example table, #attributes_selector_example td, #attributes_selector_example th{
	border: 1px dotted rgb(180,180,180);
}
#attributes_selector_example td, #attributes_selector_example th{
	padding: 0 0.25em 0 0.25em;
}
#attributes_selector_example .attributes_list{
	margin: 0.5em 0 0 0;
	border-collapse: collapse;
	empty-cells: hide;
	border-spacing: 5px;
	caption-side: bottom;
}
#attributes_selector_example .attributes_list caption{
	font-size: 80%;
	margin: 0.25em 0 0.5em 0.5em;
	text-align: left;
}
#attributes_patterns_examples ul{
	list-style: circle inside;
	margin: 0.5em 0 0.5em 0.5em;
}
#attributes_patterns_examples li{
	font-size: 85%;
}
.exact_value span[class="female"]{
	color: rgb(225,225,225);
	background-color: rgb(55,55,55);
}
.general_match span[class~="female"]{
	color: rgb(225,225,225);
	background-color: rgb(55,55,55);
}