/* CSS Document */
A:link {color:#d2232a}
A:active {color:#d2232a}
A:visited {color:#d2232a}

table {font-family: Verdana; font-size: 10pt; color: #333333; text-align:justify}

H1 {font-family: Verdana; font-size: 12pt; color: #gray}
H2 {font-family: Verdana; font-size: 10pt; font-style:italic; font-weight:normal; color: #d2232a; text-align:right}
H3 {font-family: Verdana; font-size: 10pt; font-weight:normal; font-style:italic; color: #333333}
H4, H5 {font-family: Verdana; font-size: 10pt; font-weight:normal; color: #333333}
H6 {font-family: Verdana; font-size: 10pt; font-weight:normal; color: #333333}
	  
#ticker {
	width: 600px;
	height: 5.4em;
	border: 1px dashed #000;
	padding: 5px;
	background-color: lightyellow;
	margin:10px 0;
	text-align:left;
}

#box {
	width:200px;
	height: 100px;
	border: 1px solid #000;
	padding: 5px;
	background-color: #F0F0F0;
	margin: 10px 0;
	text-align: left;
	font-size: 11px;
}

.rssclass .rssdate {
	color: gray;
	font-family: Verdana;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	text-align: justify;
	margin right: 20px;
	padding right: 20px;
}

.rsstitle {
	font-weight: bold;
	color: #d2232a;
	margin: 4px 0;
}
.rssclass a {
	text-decoration: none;
}
/*
  +------------------------------------------------------------------+
  | MikeCherim.com                                                   |
  | CSS: Photo Showcase                                              |
  | Cascading Style Sheet                                            |
  | Copyright April 2006                                             |
  | Use with attribution by visible link please!                     |
  | Attribute to: <a href="http://green-beast.com/">Mike Cherim</a>  |
  +------------------------------------------------------------------+
*/ 

/* this holds it all. set width for allowable space (20px wider than shown image) */
div#ps {
  padding : 0;
  width : auto; 
  margin : auto;
  width : 280px;  /* set width to allow for all the boxes in a row and adjust this when changing thumbnail sizes*/
}

/* this hides the accessible links from view but keeps 'em available */
.ps_offset {
  position : absolute;
  margin-left : -2000px;
  margin-top : -2000px;
}

/* for h2 heading, but an option if h2 is pre-styled (note width) */
div#ps h2 { 
  margin : 60px 0 15px 4%;
  font-weight : normal;
  color : #669900; 
  width : 260px;
}

/* this the same as h2 above, may be optional (do note the width) */
div#ps p { 
  margin : 15px 0 15px 4%;
  font-size : 0.85em; 
  width : 260px; 
}

/* style the unordered list (note height) */
div#ps ul {
  margin : 5px 0 70px 4%;
  height : 40px;
}

/* make the list items show horizontally */
div#ps ul li {
  display : inline; 
}

/* set the links as blocks, size in px (must be floated) */
div#ps ul a {
  display : block;
  float : left;
  border : 1px solid #cd7000;
  text-decoration : none;
  margin : 0 5px 5px 0;
  width : 60px;
  height : 40px;
  cursor : pointer;   /* this is for Opera only */
}

/* set hover state border */
div#ps ul a:hover {
  border : 1px solid #000;
}

/* but remove border from images */
div#ps a img {
  border : 0;
}

/* set fous position (width and height will match big photo size and list row width */
div#ps ul a#psa1:focus, div#ps ul a#psa1:active, div#ps ul a#psa2:focus, div#ps ul a#psa2:active, div#ps ul a#psa3:focus, div#ps ul a#psa3:active, div#ps ul a#psa4:focus, div#ps ul a#psa4:active, div#ps ul a#psa5:focus, div#ps ul a#psa5:active, div#ps ul a#psa6:focus, div#ps ul a#psa6:active, div#ps ul a#psa7:focus, div#ps ul a#psa7:active, div#ps ul a#psa8:focus, div#ps ul a#psa8:active { 
  margin-top : -207px; 
  width : 260px; /* adjust this only when changing thumbnail sizes */
  height : 200px;
  position : absolute;
  cursor : crosshair;   /* because I like it, if you don't, do use "cursor : default" */
}

/* set backgrounds for each state */
div#ps ul a#psa1 {
  background : #000 url(images/ps_fish.jpg) no-repeat 0 0;
}
div#ps ul a#psa1:hover {
  background : #222 url(images/ps_fish_over.jpg) no-repeat 0 0;
}
div#ps ul a#psa1:focus, div#ps ul a#psa1:active {
  background : #444 url(images/ps_fish_on.jpg) no-repeat 0 0;
}

/* set backgrounds for each state */
div#ps ul a#psa2 {
  background : #000 url(images/ps_dog.jpg) no-repeat 0 0;
}
div#ps ul a#psa2:hover {
  background : #222 url(images/ps_dog_over.jpg) no-repeat 0 0;
}
div#ps ul a#psa2:focus, div#ps ul a#psa2:active {
  background : #444 url(images/ps_dog_on.jpg) no-repeat 0 0;
}

/* set backgrounds for each state */
div#ps ul a#psa3 {
  background : #000 url(images/ps_man.jpg) no-repeat 0 0;
}
div#ps ul a#psa3:hover {
  background : #222 url(images/ps_man_over.jpg) no-repeat 0 0;
}

div#ps ul a#psa3:focus, div#ps ul a#psa3:active {
  background : #444 url(images/ps_man_on.jpg) no-repeat 0 0;
}

/* set backgrounds for each state */
div#ps ul a#psa4 {
  background : #000 url(images/ps_halo.jpg) no-repeat 0 0;
}
div#ps ul a#psa4:hover {
  background : #222 url(images/ps_halo_over.jpg) no-repeat 0 0;
}
div#ps ul a#psa4:focus, div#ps ul a#psa4:active {
  background : #444 url(images/ps_halo_on.jpg) no-repeat 0 0;
}

/* set backgrounds for each state */
div#ps ul a#psa5 {
  background : #000 url(images/ps_mars.jpg) no-repeat 0 0;
}
div#ps ul a#psa5:hover {
  background : #222 url(images/ps_mars_over.jpg) no-repeat 0 0;
}
div#ps ul a#psa5:focus, div#ps ul a#psa5:active {
  background : #444 url(images/ps_mars_on.jpg) no-repeat 0 0;
}

/* set backgrounds for each state */
div#ps ul a#psa6 {
  background : #000 url(images/ps_girl.jpg) no-repeat 0 0;
}
div#ps ul a#psa6:hover {
  background : #222 url(images/ps_girl_over.jpg) no-repeat 0 0;
}
div#ps ul a#psa6:focus, div#ps ul a#psa6:active {
  background : #444 url(images/ps_girl_on.jpg) no-repeat 0 0;
}

/* set backgrounds for each state */
div#ps ul a#psa7 {
  background : #000 url(images/ps_bones.jpg) no-repeat 0 0;
}
div#ps ul a#psa7:hover {
  background : #222 url(images/ps_bones_over.jpg) no-repeat 0 0;
}
div#ps ul a#psa7:focus, div#ps ul a#psa7:active {
  background : #444 url(images/ps_bones_on.jpg) no-repeat 0 0;
}

/* set backgrounds for each state */
div#ps ul a#psa8 {
  background : #000 url(images/ps_shroom.jpg) no-repeat 0 0;
}
div#ps ul a#psa8:hover {
  background : #222 url(images/ps_shroom_over.jpg) no-repeat 0 0;
}
div#ps ul a#psa8:focus, div#ps ul a#psa8:active {
  background : #444 url(images/ps_shroom_on.jpg) no-repeat 0 0;
}

/* rinse and repeat as needed */

/* this needs to be in conditional comment for IE only */
div#ps ul a#psa1:focus, div#ps ul a#psa1:active, div#ps ul a#psa2:focus, div#ps ul a#psa2:active, div#ps ul a#psa3:focus, div#ps ul a#psa3:active, div#ps ul a#psa4:focus, div#ps ul a#psa4:active, div#ps ul a#psa5:focus, div#ps ul a#psa5:active, div#ps ul a#psa6:focus, div#ps ul a#psa6:active, div#ps ul a#psa7:focus, div#ps ul a#psa7:active, div#ps ul a#psa8:focus, div#ps ul a#psa8:active {
  margin-top : -254px; /* adjust this only when changing thumbnail sizes */
  margin-left : -201px; /* adjust this as rows get longer */
}

/* End Styles */