/*  CSS (that's the thing that makes your website look the way it does.  
 *  Designed for Roxanne D. Palmer by Peter J. Haas
 *
 *  
 *  */

body {
	background: white;					/* makes the background white */
	font-family: Georgia, serif;
}



#container {							/* creates the short width of the content */
		width: 750px;
		background: white;
		margin-left: auto;
		margin-right: auto;
		margin-top: -30px;
		height: 90%;
		padding-bottom: 5px;

}

#header {							/*where the graphic header goes */
		margin: 0px;
		padding-top: 10px;
		text-align: center;
		height: 150px;
}

/* NAVIGATION ======================================================== */
#nav {
		width: 100%;
		background:;
		height: 50px;
		text-align: center;
		padding-top: 3px;
		float: left;
		

}
/* this creates all the special link styles */

		.navistuff	{ 			/* these are needed for the top bar to be properly formated*/
			display: inline; 		/* makes the navigation links horizontal*/
			padding-right: ;		/* added some spacing to the right side */
				}
/* These elements change the navigational elements on the top bar ======================= */
.nav_blog 	{ 	
		background:  url('img/menu_bloga.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_blog:hover {
		text-decoration: none;
		background:  url('img/menu_blogb.png') center top no-repeat;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_blog:visited {
		background:  url('img/menu_bloga.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
}

.nav_store 	{ 	
		background:  url('img/menu_storea.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_store:hover {
		text-decoration: none;
		background:  url('img/menu_storeb.png') center top no-repeat;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_store:visited {
		background:  url('img/menu_storea.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
}





.nav_comics 	{
		background:  url('img/menu_comicsa.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_comics:hover {
		background:  url('img/menu_comicsb.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_comics:visited {
		background:  url('img/menu_comicsa.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
}
.nav_comicsON 	{
		background:  url('img/menu_comicsb.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_comicsON:hover {
		background:  url('img/menu_comicsb.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_comicsON:visited {
		background:  url('img/menu_comicsa.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
}
.nav_ilo {
		background: url('img/menu_illoa.png') center top no-repeat;		/* makes the standard background image */
		padding-right: 225px;
		padding-bottom: 60px;
		}
.nav_ilo:hover {
		background:  url('img/menu_illob.png') center top no-repeat;		/* makes the standard background image */
		padding-right: 225px;
		padding-bottom: 60px;
	}

.nav_iloON {
		background: url('img/menu_illob.png') center top no-repeat;		/* makes the standard background image */
		padding-right: 225px;
		padding-bottom: 60px;
		}
.nav_iloON:hover {
		background:  url('img/menu_illob.png') center top no-repeat;		/* makes the standard background image */
		padding-right: 225px;
		padding-bottom: 60px;
	}

.nav_fineart {
		background:  url('img/menu_finearta.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_fineart:hover {
		background:  url('img/menu_fineartb.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;		
		}
.nav_fineart:visited {}
.nav_fineartON {
		background:  url('img/menu_fineartb.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;
		}
.nav_fineartON:hover {
		background:  url('img/menu_fineartb.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 175px;
		padding-bottom: 60px;		
		}
		
/* ======================	These elements change the navigational elements on the top bar ======================= */



#comics {
	width: 100%;
	background: ;
	float: left;

	}
#imgBOX {
	
	width: auto; 
	padding-top: 10px; 
	padding-bottom: 10px;

	}
	
/* .imgnail { float:left; } */
.imgtxt { padding-top: 10px; }

h2 {margin-bottom: 3px;}

#about{
		width: 300px;
		background: ;
		float: left;
		padding-left: 30px;
		padding-top: 50px;  /* CHANGE THIS NUMBER TO MOVE THE "ABOUT TEXT" TEXT DoWN ON THE FRONT PAGE  */
}

#selfportrait {
		width: 400px;
		background: ;
		float: left;
		padding-left: 10px;
}



/* ================			SOCIAL MEDIA SECTION 			==================================================*/ 

#socialmedia{
		float: left;
		background-color:;
		height: 60px;
		padding-top: 10px;
		color: purple;
		text-align: center;
		width: 100%;
}

.socialstuff { 
		display: inline; 		/* makes the navigation links horizontal*/
		padding-right: 60px;		/* added some spacing to the right side */
	
}



.facebook {
		background:  url('img/testicon_fba.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;
		}

.facebook:hover {
		background:  url('img/testicon_fbblike.gif') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;
}


.twitter {
		background:  url('img/testicon_twittera.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;
		}

.twitter:hover {

		background:  url('img/testicon_twitterbflap.gif') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;

}
.tumblr {
		background:  url('img/testicon_tumblra.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;
		}
.tumblr:hover {
		background:  url('img/testicon_tumblrbani.gif') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;

}
.instagram {
		background:  url('img/testicon_instagrama.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;
		}
.instagram:hover {
		background:  url('img/testicon_instagramani.gif') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;

}


#contact {
		text-align: center;

}

.emailher 	{
		background:  url('img/icon_mail.png') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;
		}

.emailher:hover 	{
		background:  url('img/testicon_mailani.gif') center top no-repeat;		/* makes the standard background image */
		background-position:;
		padding-right: 75px;
		padding-bottom: 60px;
		}		
		
		
#footer{

	padding-top: 10px;
	font-size: smaller;
	text-align: center;

}

/* ================-  LightBOX SECTION !!!!!!   =-=-==-=-=-=-=-=-=--=-=-=-=-=-=-==-=-=-- */

/* to be continued... */











/* ================-=-=-==-=-=-=-=-=-=--=-=-=-=-=-=-==-=-=-- */


li {
        width: 200px;
        min-height: 250px;
        border: 0px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }














/* ================-=-=-==-=-=-=-=-=-=--=-=-=-=-=-=-==-=-=-- */
/* Illustration section */


#illoSECT {
		padding-bottom: 80px;
		padding-top: 80px;
		width: 100%;

}

#illothm {
		
		width: 200px;
		height: 250px;
		border: 1px solid black;
		padding-right: 50px;
	}


h2.illoTITLE {

		padding-top: 40px;
		color: black;
		text-transform: uppercase;

		}

img.illoFULL { 
		margin-top: 10px;
		margin-bottom: 10px;
		border: 1px solid lightgrey; 
		float: left;
	}

p.illoCAP {
		padding-bottom: 40px;
		margin-bottom: 30px;
		float: left;
	}


/* ================-=-=-==-=-=-=-=-=-=--=-=-=-=-=-=-==-=-=-- */
#artSECT {
		padding-bottom: 80px;
		padding-top: 80px;
		width: 100%;

}


/* ================================================================== 
This is the corrections for the comics display page
*/

#comic_box 
{
	width: 100%;
	background-color: none;
	vertical-align:middle;
	padding-bottom: 10px;
	padding-top: 10px;
	float: left;
}

#comic_thm
{
	width: 250px;
	height: 150px;
	overflow: hidden;
	background-color: red;
	float: left; 
	margin-right: 25px;
}

#comic_text
{
	font-weight: lighter;
}

a.comictitle { 
				text-decoration: none; 
				text-transform: uppercase;
				color: black;
				font-weight: 900;				
} 

#comic_space { min-height: 150px; color: white; }

a.comictitle:hover {
			color: red;
			}


/* 
Here is the new code for the illo section ====================================================
 */

#illo_CONTENT
{
	width: 520px;
 	margin-left: auto;
    margin-right: auto;

	margin-top: 65px;
}

#illo_ITEM
	{
		width: 250px;
		height: 250px;
		margin-top: 30px;
		margin-right: 10px;
		background-color: none;	

		float: left;

		
	}

/* 
Create a custom heading for the images
 */
 
 .ill_THM_PIX
 {
 background-color: none;
 position: relative; 
 width: 100%;
 }
 
 
	h2.illo_TITLE 
	{ 
		/* position: relative; */
		font-size: small;
		font-weight: normal;
		color: black;
		text-transform: uppercase;
		line-height: 50%;
		text-align: center;
/* 
		top: -40px;
 */
		width: 90%;
/* 
		background: rgba(0, 0, 0, 0.7);
 */
		padding: 3px;
		
	}

	p.illo_TEXT

	{
		font-size: small;
		color: black;
		line-height: 105%;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	a.illo {
				text-decoration: none; 
				text-transform: uppercase;
				color: black;
				font-weight: 900;	
				font-size: small;
	}

	a.illo:hover { color: red; }

/* 
Create the thumbnail for the image
 */
/* 
	#illo_THM
	{
		width: 250px;
		height: 150px;
		overflow: hidden;
		background-color: red;
		float: left; 
		margin-right: 25px;
	}
 */