/*
    Name: Reset Stylesheet
    Description: Resets browser's default CSS
    Author: Eric Meyer
    Author URI: http://meyerweb.com/eric/tools/css/reset/     
	MONKEYED WITH BY: dean cameron
*/

/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

body {line-height: 1; position: relative;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* -------------------------------------
			MY STYLES FOR EVENTS
---------------------------------------- */      
body{            
	/*border:1px solid #000;*/
	font: 16px sans-serif;  
	height: 100%;           
	margin: 0 auto;      
	position: absolute;   
	text-align: center;
	top:1px;
	width: 100%;
} 
#containment{      
	bottom: 0px;       
	margin: 0 auto;  
	position: relative;
	text-align: center;    
	top: 20px;
	width: 700px;
}                        
p{                             
	line-height: 1.4em;     
	margin: 0 auto;
	width: 500px;
}
h1{
	font-size: 200%;
}

code{           
	background: #e9e9e9;
	font-size: 85%;
}
.bind,
.individual,
.pattern{
	height: 100px;   
	margin: 0 auto;    
	width: 300px;  
}                 

div.bind div,
div.individual div,
div.pattern div{
	float: left;
	background:  url('../images/chameleon.png') 0 0 no-repeat; 
	border:1px solid rgb(200, 200, 200);
	height: 88px;
	margin: 0 3px;
	width: 88px;	
}     

body div.exampleOver{
	background:  url('../images/chameleon1.png') -0 0 no-repeat;   
}                       

body div.exampleOn{
	background: url('../images/chameleon2.png') 0 0 no-repeat;;
}

.ta{color:red;}       
textarea.focused{
	background: #e1e1e1;
	color: #000;
} 
    

.trigger textarea{
	margin-bottom: 100px;
}

#return a{      
	background: #c1c1c1;   
    border: 1px solid #000;  
	color: blue;
	display: block;           
	height: 20px;
    left: -10px;         
	outline: 1px solid red;
    position: relative;
    text-align: center;
    top: -400px;
    width: 200px;        
	-webkit-transform: rotate(-90deg);	
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}          

#return a:hover{
	color: #fff;
}