/* CSS file for http://www.markedly-gartlandish-art.com */

/************************ Apply some general formatting to the entire site. ************************/
/*
  Palatte:
	yellow		 #fcff00;
	lightgray	 #b2b39d
	green			 #599935
	darkgray	 #848096
	blue 			 #5334e6
	
	Four quadrant locations:
	0,0    482,0
	0,482  482,482
*/

html, body {
  background-color: #1d1c26;
}
h1,h2 {
  text-align: center;
}
#container {
  background-image: url(../global/o_header_17d.gif);
  background-repeat: repeat;
  width: 950px;
  height: 950px;
  top: 0px;
  left: 0px;
}

/* This site is laid out as a grid of squares. Each square measures 436x436.
   It starts with a splash page/header block in the upper left corner.
   From this starting point, green blocks extend to the right. These contain
   examples of my web design work. Blue blocks extend downwards. These contain
   examples of my illustration work. One extra block provides text. */

/* The splash page/header block and all of the green blocks are contained
   within the horizontal-content div. */
#container div {
  width: 362px;
  height: 362px;
  position: absolute;
  margin: 60px;
  border: 0px solid red;
	padding: 0 0 0 10px;
}
.arrow {
  position: absolute;
}
.arrow:hover {
	cursor: pointer;
}


/************************ Format the gallery thumbnails. They occupy about half the home page. ************************/

.thumbNailCollection p {
  display: block;
  float: left;
  width: 80px;
  margin: 0px 10px 10px 0px;
  height: 80px;
  text-align: center;
}
.thumbNailCollection p img {
  top: 15px;
  left: 0px;
  border: 2px solid #b2b39d; /* light gray */
}
/* These manage the look and behavior of thumbnails. */
.client_name {
	font: normal 18px "Helvetica", "Verdana";
	line-height: 20px;
}
a:hover {
	color: #fcff00;
	text-decoration: none;
	cursor: pointer;
}



/************************ Format the banner quadrant. It starts in the upper right. ************************/
#bannerArrow {
	top: 462px;
	left: 217px;
}
#banner {
  left: 482px;
  top: 0px;
}
#banner .logo {
	position: relative;
	left: 10px;
}


/************************ Format the quadrant of web examples. It starts in the bottom left. ************************/
#web1 p img:hover 
{
  cursor: pointer;
  border: 2px solid #599935; /* green */
}
#web1Arrow {
	top: 474px;
	left: 692px;
}
#web1 {
  left: 0px;
  top: 482px;
}
#web1 div {
  position: static;
  clear: left;
  width: 362px;
	height: 80px;
	margin: 0;
	padding: 0;
}
/* Override some of the settings of .thumbNailCollection p for the blocks that contain
   descriptive text instead of thumbnails. */
#rbs_description {
	width: 260px;
	padding: 20px 0 0 0;
	text-align: left;
	height: 60px;
}
#school_work_description {
	padding: 30px 0 0 0;
	height: 60px;
}


/************************ Format the quadrant of art examples. It starts in the upper left. ************************/
#art1 p img:hover {
  cursor: pointer;
  border: 2px solid #5334e6; /* blue */
}
#art1Arrow {
	top: 701px;
	left: 461px;
}
#art1 {
  left: 0px;
  top: 0px;
}


/************************ Format the aboutThisSite quadrant. It starts in the lower right. ************************/
#descripArrow {
	top: 207px;
	left: 476px;
}
#aboutThisSite {
  left: 482px;
  top: 482px;
}
#aboutThisSite div {
  width: auto;
  height: auto;
  margin: 0px 20px;
}
#welcome {
  padding: 20px 0 0 0;
}
#footer {
  bottom: 0px;
  text-align: center;
  font-size: .8em;
}


/************************ Format the hidden art board. ************************/
/* The larger view of individual artworks is done inside a div called
   #zoomSpace. This space is managed by JavaScript functions in
   functions.js. */
#zoomSpace {
	text-align: center;
	border: 2px solid black;
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 10;
	background-color: #b0a8a0;
	visibility: hidden;
}
#zoomImg {
	background-image: url(../global/TransparentPixel.png);	
}

/* This is a pure CSS implementation of tool tips
   courtesy of PSACAKE (psacake.com).
   How it works: The text "Click on drawing to return" is held
   in a span inside the A that also contains the zoomImage.
   The text is only displayed when the user hovers over the
   zoomImage. */
a.info span
{
	display: none;
}
a.info:visited 
{
	color: #ddd;
}
a.info:hover span
{
	display: block;
	z-index: 24;
	position: absolute;
	text-align: center;
	top: 14em;
	left: 4em;
	padding: 1em;
	border: 4px solid #cc9966;
	background-color: #ffcc99;
	color: #000;
}


div {
	font: normal 12px "Helvetica", "Verdana"; 
	line-height: 15px; 
	color: #000;
	border: 0px solid black;
}