.heading_sub {
	font-size:smaller;
	font-weight:normal;
}

#demo_table { margin: 2em 0; }
#demo_table th { background-color:#dddddd; text-align: center; }
#demo_table th.col-spec { width:108px; }
#demo_table td { font-family:  'Courier New', Courier, fixed; padding: 0 20px; border-bottom: solid 1px silver; }
#demo_table td.wrong-whitebox { background-color:white; border: 4px solid #ff9999; }
#demo_table td.fixed-webkit { border: 4px solid lightgreen; }
#demo_table td.code { white-space:pre; font-size: 12px; }
#demo_table  tbody tr { height: 80px; vertical-align: middle; }

#demo_table th .chrome_name { border: 2px solid lightgreen; background-color:lightgreen; }

.example_image { text-align: center; }

.wrong { background-color:#ff9999; }
.warning { background-color:#ffff99; }
.maybe { background-color:#99ff99; }
.equivalent { background-color:#e7eeff; }
.unclear { background-color:#aaaaaa; }
.ticky-tack { background-color:#ffdd77; }

.borderDemo {
	width:60px; 
	height: 60px; 
	border-width: 1px; 
	border-style:solid; 
	border-color:black;
	background-color:white;
}

.thick_corner_demo {
	border-style:none;
	border-color: black;
	background-color:#e5e5e5;
}

#legend p { margin:0; padding-top: 0.5em; padding-left: 25px; }
#legend .fixed-webkit { border: 2px solid lightgreen; }
.legend_box {
	clear:both;
	float: left;
	margin-top: 0.5em;
	margin-bottom: 5px;
	margin-right: 0.7em;
	width: 15px;
	height: 15px;
	border:solid thin black;
}
	


/* this is just here until I can update the example png images */
.multicolor_corner_demo {
	border-style:none;
	border-color: black;
}

/******* BORDER_RADIUS PAGE ********/

.br15px {
	border-radius: 15px;
}
.br15px-pfx {
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}
.br20px10px {
	border-radius: 20px 10px;
}
.br20px10px-pfx {
	-moz-border-radius: 20px 10px;
	-webkit-border-radius: 20px 10px;
	border-radius: 20px 10px;
}
.br20px_10px {
	border-radius: 20px / 10px;
}
.br20px_10px-pfx {
	-moz-border-radius: 20px / 10px;
	-webkit-border-radius: 20px / 10px;
	border-radius: 20px / 10px;
}
.br20px10px_20px10px {
	border-radius: 20px 10px / 20px 10px;
}
.br20px10px_20px10px-pfx {
	-moz-border-radius: 20px 10px / 20px 10px;
	-webkit-border-radius: 20px 10px / 20px 10px;
	border-radius: 20px 10px / 20px 10px;
}
.br20px10px5px30px {
	border-radius: 20px 10px 5px 30px;
}
.br20px10px5px30px-pfx {
	-moz-border-radius: 20px 10px 5px 30px;
	-webkit-border-radius: 20px 10px 5px 30px;
	border-radius: 20px 10px 5px 30px;
}
.br20px15px5px40px_10px25px {
	border-radius: 20px 15px 5px 40px / 10px 25px;
}
.br20px15px5px40px_10px25px-pfx {
	-moz-border-radius: 20px 15px 5px 40px / 10px 25px;
	-webkit-border-radius: 20px 15px 5px 40px / 10px 25px;
	border-radius: 20px 15px 5px 40px / 10px 25px;
}
.brtr20px {
	border-top-left-radius: 20px;
}
.brtr20px-pfx {
	-moz-border-radius-topleft: 20px;
	-webkit-border-top-left-radius: 20px;
	border-top-left-radius: 20px;
}
.brtr40px20px {
	border-top-left-radius: 40px 20px;
}
.brtr40px20px-pfx {
	-moz-border-radius-topleft: 40px 20px;
	-webkit-border-top-left-radius: 40px 20px;
	border-top-left-radius: 40px 20px;
}
.four_corners {
	border-top-left-radius: 20px 10px;
	border-top-right-radius: 15px 25px;
	border-bottom-right-radius: 5px 10px;
	border-bottom-left-radius: 40px 25px;
}
.four_corners-pfx {
	-moz-border-radius-topleft: 20px 10px;
	-moz-border-radius-topright: 15px 25px;
	-moz-border-radius-bottomright: 5px 10px;
	-moz-border-radius-bottomleft: 40px 25px;
	
	-webkit-border-top-left-radius: 20px 10px;
	-webkit-border-top-right-radius: 15px 25px;
	-webkit-border-bottom-right-radius: 5px 10px;
	-webkit-border-bottom-left-radius: 40px 25px;

	border-top-left-radius: 20px 10px;
	border-top-right-radius: 15px 25px;
	border-bottom-right-radius: 5px 10px;
	border-bottom-left-radius: 40px 25px;
}

.tl40_TL20 {
	border-left: solid 20px;
	border-top: solid 20px;
	border-top-left-radius:40px;
	width: 40px;
	height: 40px;
}
.tl40_TL20-pfx {
	border-left: solid 20px;
	border-top: solid 20px;
	-moz-border-radius-topleft:40px;
	-webkit-border-top-left-radius:40px;
	border-top-left-radius:40px;
	width: 40px;
	height: 40px;
}

.tl40_TL20-white {
	border-left: solid white 20px;
	border-top: solid white 20px;
	border-top-left-radius:40px;
	width: 40px;
	height: 40px;
	background-color:darkBlue;
}
.tl40_TL20-white-pfx {
	border-left: solid white 20px;
	border-top: solid white 20px;
	-moz-border-radius-topleft:40px;
	-webkit-border-top-left-radius:40px;
	border-top-left-radius:40px;
	width: 40px;
	height: 40px;
	background-color:darkBlue;
}

.tl20_TL30 {
	border-left: solid 30px;
	border-top: solid 30px;
	border-top-left-radius:20px;
	width: 30px;
	height: 30px;
}
.tl20_TL30-pfx {
	border-left: solid 30px;
	border-top: solid 30px;
	-moz-border-radius-topleft:20px;
	-webkit-border-top-left-radius:20px;
	border-top-left-radius:20px;
	width: 30px;
	height: 30px;
}

.tl20_T30-L4 {
	border-left: solid 4px;
	border-top: solid 30px;
	border-top-left-radius:20px;
	width: 56px;
	height: 30px;
}
.tl20_T30-L4-pfx {
	border-left: solid 4px;
	border-top: solid 30px;
	-moz-border-radius-topleft:20px;
	-webkit-border-top-left-radius:20px;
	border-top-left-radius:20px;
	width: 56px;
	height: 30px;
}

.tl30_T15-L4 {
	border-left: solid 4px;
	border-top: solid 15px;
	border-top-left-radius:30px;
	width: 56px;
	height: 45px;
}
.tl30_T15-L4-pfx {
	border-left: solid 4px;
	border-top: solid 15px;
	-moz-border-radius-topleft:30px;
	-webkit-border-top-left-radius:30px;
	border-top-left-radius:30px;
	width: 56px;
	height: 45px;
}

.tl30_T15-L0 {
	border-top: solid 15px;
	border-top-left-radius:30px;
	width: 56px;
	height: 45px;
}
.tl30_T15-L0-pfx {
	border-top: solid 15px;
	-moz-border-radius-topleft:30px;
	-webkit-border-top-left-radius:30px;
	border-top-left-radius:30px;
	width: 56px;
	height: 45px;
}

.br30-30-5-5_15-15-5-5 {
	border-radius: 120px 120px 20px 20px/ 60px 60px 20px 20px;
}
.br30-30-5-5_15-15-5-5-pfx {
	-moz-border-radius: 120px 120px 20px 20px/ 60px 60px 20px 20px;
	-webkit-border-radius: 120px 120px 20px 20px/ 60px 60px 20px 20px;
	border-radius: 120px 120px 20px 20px/ 60px 60px 20px 20px;
}

.br200p-200p-33p-33p_100p-100p-33p-33p {
	border-radius: 200% 200% 33% 33%/ 100% 100% 33% 33%;
}
.br200p-200p-33p-33p_100p-100p-33p-33p-pfx {
	-moz-border-radius: 200% 200% 33% 33%/ 100% 100% 33% 33%;
	-webkit-border-radius: 200% 200% 33% 33%/ 100% 100% 33% 33%;
	border-radius: 200% 200% 33% 33%/ 100% 100% 33% 33%;
}

.tl40-20_dashed {
	border-left: dashed 2px;
	border-top: dashed 2px;
	border-top-left-radius: 40px 20px;
	width: 60px;
	height: 60px;
}
.tl40-20_dashed-pfx {
	border-left: dashed 2px;
	border-top: dashed 2px;
	-moz-border-radius-topleft:40px 20px;
	-webkit-border-top-left-radius: 40px 20px;
	border-top-left-radius: 40px 20px;
	width: 60px;
	height: 60px;
}

.tl40-20_dotted {
	border-left: dotted 10px;
	border-top: dotted 15px;
	border-top-left-radius: 40px 20px;
	width: 50px;
	height: 45px;
}
.tl40-20_dotted-pfx {
	border-left: dotted 10px;
	border-top: dotted 15px;
	-moz-border-radius-topleft:40px 20px;
	-webkit-border-top-left-radius: 40px 20px;
	border-top-left-radius: 40px 20px;
	width: 50px;
	height: 45px;
}

.tl40-20_Tred-Lblue {
	border-left: solid 15px blue;
	border-top: solid 15px red;
	border-top-left-radius: 50px 25px;
	width: 45px;
	height: 45px;
}
.tl40-20_Tred-Lblue-pfx {
	border-left: solid 15px blue;
	border-top: solid 15px red;
	-moz-border-radius-topleft:50px 25px;
	-webkit-border-top-left-radius: 50px 25px;
	border-top-left-radius: 50px 25px;
	width: 45px;
	height: 45px;
}

.tl40-20_Tred30-Lblue30 {
	border-left: solid 30px blue;
	border-top: solid 30px red;
	border-top-left-radius: 40px 20px;
	width: 30px;
	height: 30px;
}
.tl40-20_Tred30-Lblue30-pfx {
	border-left: solid 30px blue;
	border-top: solid 30px red;
	-moz-border-radius-topleft:40px 20px;
	-webkit-border-top-left-radius: 40px 20px;
	border-top-left-radius: 40px 20px;
	width: 30px;
	height: 30px;
}

.br50p {
	border-radius:50%;
}
.br50p-pfx {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius:50%;
}

/******** COLOR PAGE *********/
td.example_live { /*vertical-align: top;*/ }
.redbox {
	position:relative;
	top: 10px;
	left: 20px;
	width: 40px;
	height: 40px;
}
.greenbox {
	position:relative;
	top: -10px;
	left: 0px;
	width: 40px;
	height: 40px;
}
.transparent { background-color:transparent; }
.rgb.r100 { background-color:rgb(255, 0, 0); }
.rgb.g100 { background-color:rgb(0, 255, 0); }
.rgba.r100 { background-color:rgba(255, 0, 0, 1); }
.rgba.g100 { background-color:rgba(0, 255, 0, 1); }
.rgba.r50 { background-color:rgba(255, 0, 0, 0.5); }
.rgba.g50 { background-color:rgba(0, 255, 0, 0.5); }
.hsl.h0s100l50 { background-color:hsl(0, 100%, 50%); }
.hsl.h120s100l50 { background-color:hsl(120, 100%, 50%); }
.hsla.h0s100l50a1 { background-color:hsla(0, 100%, 50%, 1); }
.hsla.h120s100l50a1 { background-color:hsla(120, 100%, 50%, 1); }
.hsla.h0s100l50a_5 { background-color:hsla(0, 100%, 50%, 0.5); }
.hsla.h120s100l50a_5 { background-color:hsla(120, 100%, 50%, 0.5); }

.spectrum_cell { width:30px; height:30px; position:relative; }
.spectrum_cell.small { width:15.714285714286px; height:30px; position:relative; }
.spectrum_container { width:330px; height:30px; border: solid black 2px; margin-left:60px; margin-bottom:15px;}
.grey_back { background-color:gray; width:100%; height: 15px;}

.cell_0 { top:-0px; left:0px; }
.hsla.h216s0l50a1 { background-color:hsla(216, 0%, 50%, 1); }
.hsla.h216s100l0a1 { background-color:hsla(216, 100%, 0%, 1); }
.hsla.h216s100l50a_0 { background-color:hsla(216, 100%, 50%, 0); top:-15px; }
.cell_1 { top:-30px; left:30px; }
.hsla.h216s10l50a1 { background-color:hsla(216, 10%, 50%, 1); }
.hsla.h216s100l10a1 { background-color:hsla(216, 100%, 10%, 1); }
.hsla.h216s100l50a_1 { background-color:hsla(216, 100%, 50%, 0.1); top:-45px; }
.cell_2 { top:-60px; left:60px; }
.hsla.h216s20l50a1 { background-color:hsla(216, 20%, 50%, 1); }
.hsla.h216s100l20a1 { background-color:hsla(216, 100%, 20%, 1); }
.hsla.h216s100l50a_2 { background-color:hsla(216, 100%, 50%, 0.2); top:-75px; }
.cell_3 { top:-90px; left:90px; }
.hsla.h216s30l50a1 { background-color:hsla(216, 30%, 50%, 1); }
.hsla.h216s100l30a1 { background-color:hsla(216, 100%, 30%, 1); }
.hsla.h216s100l50a_3 { background-color:hsla(216, 100%, 50%, 0.3); top:-105px; }
.cell_4 { top:-120px; left:120px; }
.hsla.h216s40l50a1 { background-color:hsla(216, 40%, 50%, 1); }
.hsla.h216s100l40a1 { background-color:hsla(216, 100%, 40%, 1); }
.hsla.h216s100l50a_4 { background-color:hsla(216, 100%, 50%, 0.4); top:-135px; }
.cell_5 { top:-150px; left:150px; }
.hsla.h216s50l50a1 { background-color:hsla(216, 50%, 50%, 1); }
.hsla.h216s100l50a1 { background-color:hsla(216, 100%, 50%, 1); }
.hsla.h216s100l50a_5 { background-color:hsla(216, 100%, 50%, 0.5); top:-165px; }
.cell_6 { top:-180px; left:180px; }
.hsla.h216s60l50a1 { background-color:hsla(216, 60%, 50%, 1); }
.hsla.h216s100l60a1 { background-color:hsla(216, 100%, 60%, 1); }
.hsla.h216s100l50a_6 { background-color:hsla(216, 100%, 50%, 0.6); top:-195px; }
.cell_7 { top:-210px; left:210px; }
.hsla.h216s70l50a1 { background-color:hsla(216, 70%, 50%, 1); }
.hsla.h216s100l70a1 { background-color:hsla(216, 100%, 70%, 1); }
.hsla.h216s100l50a_7 { background-color:hsla(216, 100%, 50%, 0.7); top:-225px; }
.cell_8 { top:-240px; left:240px; }
.hsla.h216s80l50a1 { background-color:hsla(216, 80%, 50%, 1); }
.hsla.h216s100l80a1 { background-color:hsla(216, 100%, 80%, 1); }
.hsla.h216s100l50a_8 { background-color:hsla(216, 100%, 50%, 0.8); top:-255px; }
.cell_9 { top:-270px; left:270px; }
.hsla.h216s90l50a1 { background-color:hsla(216, 90%, 50%, 1); }
.hsla.h216s100l90a1 { background-color:hsla(216, 100%, 90%, 1); }
.hsla.h216s100l50a_9 { background-color:hsla(216, 100%, 50%, 0.9); top:-285px; }
.cell_10 { top:-300px; left:300px; }
.hsla.h216s100l50a1 { background-color:hsla(216, 100%, 50%, 1); }
.hsla.h216s100l100a1 { background-color:hsla(216, 100%, 100%, 1); }
.hsla.h216s100l50a_10 { background-color:hsla(216, 100%, 50%, 1); top:-315px; }
.small.cell_0 { top:-0px; left:0px; }
.hsla.h0s100l50a1 { background-color:hsla(0, 100%, 50%, 1); }
.small.cell_1 { top:-30px; left:15.714285714286px; }
.hsla.h18s100l50a1 { background-color:hsla(18, 100%, 50%, 1); }
.small.cell_2 { top:-60px; left:31.428571428571px; }
.hsla.h36s100l50a1 { background-color:hsla(36, 100%, 50%, 1); }
.small.cell_3 { top:-90px; left:47.142857142857px; }
.hsla.h54s100l50a1 { background-color:hsla(54, 100%, 50%, 1); }
.small.cell_4 { top:-120px; left:62.857142857143px; }
.hsla.h72s100l50a1 { background-color:hsla(72, 100%, 50%, 1); }
.small.cell_5 { top:-150px; left:78.571428571429px; }
.hsla.h90s100l50a1 { background-color:hsla(90, 100%, 50%, 1); }
.small.cell_6 { top:-180px; left:94.285714285714px; }
.hsla.h108s100l50a1 { background-color:hsla(108, 100%, 50%, 1); }
.small.cell_7 { top:-210px; left:110px; }
.hsla.h126s100l50a1 { background-color:hsla(126, 100%, 50%, 1); }
.small.cell_8 { top:-240px; left:125.71428571429px; }
.hsla.h144s100l50a1 { background-color:hsla(144, 100%, 50%, 1); }
.small.cell_9 { top:-270px; left:141.42857142857px; }
.hsla.h162s100l50a1 { background-color:hsla(162, 100%, 50%, 1); }
.small.cell_10 { top:-300px; left:157.14285714286px; }
.hsla.h180s100l50a1 { background-color:hsla(180, 100%, 50%, 1); }
.small.cell_11 { top:-330px; left:172.85714285714px; }
.hsla.h198s100l50a1 { background-color:hsla(198, 100%, 50%, 1); }
.small.cell_12 { top:-360px; left:188.57142857143px; }
.hsla.h216s100l50a1 { background-color:hsla(216, 100%, 50%, 1); }
.small.cell_13 { top:-390px; left:204.28571428571px; }
.hsla.h234s100l50a1 { background-color:hsla(234, 100%, 50%, 1); }
.small.cell_14 { top:-420px; left:220px; }
.hsla.h252s100l50a1 { background-color:hsla(252, 100%, 50%, 1); }
.small.cell_15 { top:-450px; left:235.71428571429px; }
.hsla.h270s100l50a1 { background-color:hsla(270, 100%, 50%, 1); }
.small.cell_16 { top:-480px; left:251.42857142857px; }
.hsla.h288s100l50a1 { background-color:hsla(288, 100%, 50%, 1); }
.small.cell_17 { top:-510px; left:267.14285714286px; }
.hsla.h306s100l50a1 { background-color:hsla(306, 100%, 50%, 1); }
.small.cell_18 { top:-540px; left:282.85714285714px; }
.hsla.h324s100l50a1 { background-color:hsla(324, 100%, 50%, 1); }
.small.cell_19 { top:-570px; left:298.57142857143px; }
.hsla.h342s100l50a1 { background-color:hsla(342, 100%, 50%, 1); }
.small.cell_20 { top:-600px; left:314.28571428571px; }
.hsla.h360s100l50a1 { background-color:hsla(360, 100%, 50%, 1); }

tr.sweet {
	height:111px !important;
}
#demo_table .sweet_cell {
	color:white;
	height:111px;
	padding:0;
	overflow:hidden;
	background:url(http://muddledramblings.com/wp-content/uploads/2009/07/panorama_shrunk-1024x117.jpg);
}
.sweet_container {
	width:540px;
	overflow: hidden;
	height:111px;
	padding-left:1em;
}
#demo_table .sweet_cell p.sweet_info {
	margin:0;
	white-space:pre;
}
.sweet_text {
	font-family:cursive;
	font-size:190px;
	font-weight:bold;
	margin:0px 0 -30px 50px;
	color:hsla(216, 100%, 50%, 0.3);
	position:relative;
	top:-60px;
}

.spectrum_cell div.tip {
	display:none;
	background-color:#ddd;
	padding:2px 3px;
	margin-top:33px;
	margin-left:8px;
	width:200px;
	border:1px solid #999;
	color:hsl(0, 0, 10%);
	font-size:120%;
}
.spectrum_cell div.tip .varying {
	color:hsl(0, 100%, 30%);
	font-weight:bold;
}
.spectrum_cell:hover div.tip {
	display:inline;
	position:absolute;
}