/* Imelda Franklin Bogue Website, January 2007 - Darin Reid 
www.darinreid.com
darinreid@gmail.com */

/********** building blocks ***************************************************/

html		{ /* forces scrollbars */
			height: 101%;
			}

body		{
			margin: 0;
			background: url(images/wallpaper.jpg) center top;
			}
			
#whitestripe { /* top white stripe */
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 8em;
			background: #FFF;
			}
			
#ribbon		{ /* colored ribbon under white stripe */
			position: absolute;
			top: 8em;
			left: 0;
			width: 100%;
			height: 15px;
			background: url(images/ribbon.jpg) center;
			}
			
#container	{ /* contains all centered elements */
			position: relative;
			margin: 0 auto;
			width: 800px;
			height: 100px;
			}
			
#topcontent { /* contains the signature and navigation */
			position: absolute;
			top: 1em;
			left: 150px;
			width: 610px;
			}
			
#signature	{ /* "Imelda Franklin Bogue..." */
			margin: 0 0 10px 120px;
			width: 262px;
			height: 54px;
			background: url(images/ifb.gif);
			}
			
#content	{ /* holds the individual page content */
			position: absolute;
			top: 11em;
			left: 160px;
			width: 460px;
			background: #FFF;
			border: 10px solid #FFF;
			z-index: 0;
			}
			
#content.home {
			width: 300px;
			height: 375px;
			left: 130px;
			}
			
#homequote	{
			position: absolute;
			top: 11em;
			margin-top: 100px;
			right: 110px;
			width: 220px;
			}
			
#content.resume {
			background: url(images/paper.jpg);
			padding: 10px;
			width: 520px;
			left: 120px;
			}
			
#content.listen {
			padding: 30px 10px;
			}
			
#photobox	{ /* holds the upper left photo */
			position: absolute;
			top: 2em;
			left: 0;
			width: 100px;
			height: 350px;
			z-index: 2;
			}
			
#photobox img { /* the upper left photo */
			padding: 5px;
			border: 1px solid #111;
			background: #FFF;
			}
			
/********** navigation ********************************************************/

ul, ul li	{
			margin: 0;
			padding: 0;
			}

ul#nav		{
			list-style-type: none;
			margin: 0 0 0 68px;
			}
			
ul#nav li	{
			display: inline;
			margin: 10px 8px 0 0;
			padding: 0 8px 0 0;
			border-right: 1px solid #DDD;
			}
			
ul#nav li.last {
			margin: 0;
			padding: 0;
			border: 0;
			}
			
ul#nav li a.selected {
			text-decoration: underline;
			}
			
ul#nav a	{
			text-decoration: none;
			color: #111;
			}
			
ul#nav a:hover {
			color: #999;
			}
			
			
/********** links *************************************************************/

a			{
			color: #771A1B;
			}

a img		{
			border: 0;
			}
			
/********** typography ********************************************************/

body		{
			font-family: "Gill sans", Verdana, Arial, sans-serif;
			font-size: 13px;
			line-height: 16px;
			color: #111;
			word-wrap: break-word;
			}
			
h1		{
			font-family: "Times New Roman", Times, serif;
			text-align: center;
			font-weight: normal;
			margin-bottom: 5px;
			}
			
h2, h3		{
			margin: 5px 0 20px;
			font-family: Georgia, "Times New Roman", serif;
			text-align: center;
			font-weight: normal;
			}
			
h3		{
			text-align: left;
			text-decoration: underline;
			}
			
h2			{
			font-style: italic;
			font-size: 12px;
			}
			
#content.listen p {
			text-align: center;
			}
			
p.center {
			text-align: center;
			font-style: italic;
			font-size: 18px;
			margin-top: 0;
			margin-bottom: 10px;
			padding-top: 0;
			font-family: "Times New Roman", Times, serif;
			}
			
/********** corners ***********************************************************/

#tl, #tr, #br, #bl {
			position: absolute;
			width: 20px;
			height: 20px;
			z-index: 2;
			}
			
#tl			{
			top: -14px;
			left: -14px;
			background: url(images/tl.gif);
			}
			
#tr			{
			top: -14px;
			right: -14px;
			background: url(images/tr.gif);
			}
			
#br			{
			bottom: -14px;
			right: -14px;
			background: url(images/br.gif);
			}
			
#bl			{
			bottom: -14px;
			left: -14px;
			background: url(images/bl.gif);
			}
			
/********** tables ************************************************************/

table		{
			margin: 0 0 50px;
			border-collapse: collapse;
			max-width: 520px;
			}

td			{
			vertical-align: top;
			margin: 0;
			padding: 4px;
			}
			
td.work		{
			width: 150px;
			}
			
thead		{
			text-transform: uppercase;
			}
			
/********** page specific stuff ***********************************************/

#resumetitle {
			margin: 0 auto;
			width: 269px;
			height: 45px;
			background: url(images/imelda.gif);
			}
			
#secrettitle {
			margin: 0 auto;
			width: 460px;
			height: 209px;
			background: url(images/secret.gif);
			}
			
.hline		{
			margin: 10px auto;
			width: 460px;
			height: 1px;
			border-top: 1px solid #BBB;
			}
			
#secretquotes {
			float: left;
			margin: 10px 0;
			width: 120px;
			border: 1px solid #BBB;
			padding: 0 10px 10px;
			}
			
#secrettext	{
			float: right;
			margin: 0;
			width: 300px;
			}
			
#secrettext p {
			max-width: 200px;
			}
			
#secrettext p.secret {
			max-width: 300px;
			font-size: 13px;
			line-height: 22px;
			}
			
#content.secret ul {
			margin: 0 0 0 15px;
			padding: 0;
			}
			
#content.secret ul li {
			padding-bottom: 5px;
			}
			
#atoz		{
			margin: 0 auto;
			width: 248px;
			height: 133px;
			background: url(images/atoz.gif);
			}
			
.center		{
			text-align: center;
			margin: 0;
			}
			
#footer		{
			position: absolute;
			bottom: -50px;
			left: 100px;
			width: 400px;
			letter-spacing: 1px;
			color: #FFF;
			font-size: 10px;
			}
			
#footer a	{
			color: #FFF;
			}
			
.clearboth	{
			clear: both;
			}
			
#radiobox	{
			margin: 10px 0;
			width: 440px;
			border: 1px solid #BBB;
			padding: 0 10px 10px;
			}