body { align:center; background: #0e0703 url(img/rainy-field.jpg) repeat-x; color:white; margin:0px; padding:0px; font-family:"Lucida Sans", "Sans Serif", "Trebuchet MS", "Verdana" }
#wrapper { align:center; margin:0 auto; }

#roscologo { float:left; width:210px; height:105px; background:url(img/card/rosco-logo.png); left:15px; top:0px; z-index:3; position:absolute; }
	
#card { float:left; width:150px; height:300px; margin-left:50px; z-index:1;}

	#rosco { width:150px; height:72px; background:url(img/card/rosco.png); }
	a:hover #rosco { width:150px; height:72px; background:url(img/card/hover/rosco.png); cursor:pointer; }
	
	#aim { width:150px; height:48px; background:url(img/card/AIM.png); }
	a:hover #aim { width:150px; height:48px; background:url(img/card/hover/AIM.png); cursor:pointer; }
	
	#gmail { width:150px; height:35px; background:url(img/card/Gmail.png); }
	a:hover #gmail { width:150px; height:35px; background:url(img/card/hover/Gmail.png); cursor:pointer; }
	
	#skype { width:150px; height:49px; background:url(img/card/Skype.png); }
	a:hover #skype { width:150px; height:49px; background:url(img/card/hover/Skype.png); cursor:pointer; }
	
	#facebook { width:150px; height:30px; background:url(img/card/Facebook.png); }
	a:hover #facebook { width:150px; height:30px; background:url(img/card/hover/Facebook.png); cursor:pointer; }
	
	#twitter { width:150px; height:66px; background:url(img/card/Twitter.png); }
	a:hover #twitter { width:150px; height:66px; background:url(img/card/hover/Twitter.png); cursor:pointer; }

#showcase1 { float:left; width:50px; height:300px; background:url(img/showcase/student-art-show.png); }
a:hover #showcase1 { float:left; width:50px; height:300px; background:url(img/showcase/student-art-show-hover.png); cursor:pointer; }

#showcase2 { float:left; width:50px; height:300px; background:url(img/showcase/digital-painting-1.png); }
a:hover #showcase2 { float:left; width:50px; height:300px; background:url(img/showcase/digital-painting-1-hover.png); cursor:pointer; }

#showcase3 { float:left; width:50px; height:300px; background:url(img/showcase/digital-painting-2.png); }
a:hover #showcase3 { float:left; width:50px; height:300px; background:url(img/showcase/digital-painting-2-hover.png); cursor:pointer; }

#showcase4 { float:left; width:50px; height:300px; background:url(img/showcase/dat-amsterdam.png); }
a:hover #showcase4 { float:left; width:50px; height:300px; background:url(img/showcase/dat-amsterdam-hover.png); cursor:pointer; }

#showcase5 { float:left; width:50px; height:300px; background:url(img/showcase/dcg-andrw.png); }
a:hover #showcase5 { float:left; width:50px; height:300px; background:url(img/showcase/dcg-andrw-hover.png); cursor:pointer; }

#showcase6 { float:left; width:50px; height:300px; background:url(img/showcase/dcg-justice.png); }
a:hover #showcase6 { float:left; width:50px; height:300px; background:url(img/showcase/dcg-justice-hover.png); cursor:pointer; }

#showcase7 { float:left; width:50px; height:300px; background:url(img/showcase/dcg-the-capitalists.png); }
a:hover #showcase7 { float:left; width:50px; height:300px; background:url(img/showcase/dcg-the-capitalists-hover.png); cursor:pointer; }

#body { width:900px; position:absolute; top:300px; left:30px; float:left; padding:25px; }
#col1 { float:left; width:260px; padding:20px; background:url(img/col1bak.png) no-repeat; }
	#cc { font-size:10px; color:grey; border:1px grey solid; padding:10px; margin-top:50px;}	
	#cc a { color:grey; text-decoration: none; }
	#cc a:hover { color:grey; }
#col2 { float:left; width:260px; padding:20px; }
	
	div#triggers { cursor:pointer; }
	
	div.zero { padding-left:10px; width:220px; }
	
	div.print { width:220px; height:150px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:30px; clear:both; }
	div.print:hover { background:url(img/hover.png) no-repeat; }
	
	div.web { width:220px; height:130px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:30px; clear:both; }
	div.web:hover { background:url(img/hover.png) no-repeat; }
	
	div.motion { width:220px; height:140px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:30px; clear:both; }
	div.motion:hover { background:url(img/hover.png) no-repeat; }
			
	div.title { float:left; width:90px; }
	div.sub { float:left; width:130px; }
	
#col3 { float:left; width:260px; padding:20px; }
	
	.galleria { margin-bottom:10px; margin-top:20px; display:block; }
	#col3 a { text-decoration:none; display:block; }

h1 { font-size:28px; }
h2 { font-size:20px; color:#ffe6c2; }
p { font-size:14px ; color:#f9f7f1; line-height:20px; }
a { text-decoration:underline; color:#ccffc8; }
a:hover { color:#d2ced1; text-decoration:none; }
.comma { color: grey;}

img { border:0px; }
img.right { float:right; padding-left:10px; }
img.left { float:left; padding-right:10px; }

ul.done { list-style:url(img/button.png); padding-left:20px; color:#b8fff6; }
li { margin-bottom:10px;}