/* CSS Document */



/*Body image with "elina mer" and email address*/

Body {

	background-image:  url(images/bg2.png);

	background-repeat: no-repeat;

	background-color: #fff;

}





/*main container with "navleft" and "monitor"*/

#container {

	margin: 0;

	padding: 10px;

	border-top: 1px dotted #999;

	border-left: 1px dotted #999;

	position: absolute;

	width: 835px;

	height: 480px;

	top: 60px;

	left: 15px;

	font-family: verdana, sans-serif;

	font-size: 12px;

	color: #999;

	font-weight: bold;

	background: url(images/butterfly_1.png) no-repeat bottom left;

}





/* this is navigation on the left inside the dotted lines 

ILLUSTRATION, PORTRAITS, PROJECTS, and ABOUT ARTIST

The size of the titles with butterflies 150 x 24 */

#navleft {

	float: left;

	width: 160px;

	margin-left: 5px;

	margin-top: 0;

	padding: 5px 5px 20px 5px;

	border-right: 1px dotted #999;

	border-bottom: 1px dotted #999;

}



#navleft ul {

	margin: 0;

	padding: 0;

	list-style-type: none;

}



#navleft li {

	margin: 0;

	padding-top: 0;

}



#navleft a {

	margin: 0;

	color: #007579;

	text-decoration: none;

	border-decoration: none;

}



#navleft a:hover {

	color: #999;

	text-decoration: none;

}





/*smaller navigation DESIGN and INDEPENDENT*/

#nav_small {

	width: 100px;

	margin-left: 25px;

	margin-top: 0;

	padding: 0;

}



#nav_small ul {

	margin: 0;

	padding: 0;

	list-style-type: none;

	font-family: verdana, serif;

	font-size: 13px;

	color: #898989;

	font-weight: normal;

}



#nav_small li {

	margin: 0;

	padding-top: 2px;

	font-family: verdana, serif;

	font-size: 13px;

	color: #898989;

	font-weight: bold;

}





/* the monitor is to the right of the dotted line */

#monitor {

	position: absolute;

	left: 15px;

	top: 10px;

	width: 650px;

	margin: 0 0 10px 180px;

	background-color: #fff;

	padding-left: 10px;

}





/* nav_2nd is the top navigation on the ILLUSTRATION page */

 

#nav_2nd {

	width: 590px;

	margin: 0 0 10px 0px;

	background-color: #fff;

	padding-left: 10px;

	left: 270px;

	top: 90px;

	font-family: verdana, sans-serif;

	color: #000;

	font-weight: normal;

	font-size: 12px;

}



#nav_2nd ul {

	margin: 0;

	padding: 0;

	list-style-type: none;

	font-family: verdana, sans-serif;

	color: #000;

	font-weight: normal;

	font-size: 12px;

}



#nav_2nd li {

	margin: 0 10px 5px 0;

	padding: 0 10px 0 0;

	display: inline;

	border-right: solid 1px #999;

	font-family: verdana, sans-serif;

	color: #000;

	font-weight: bold;

	font-size: 12px;

	text-decoration: normal;

}



#nav_2nd a {

	margin: 0;

	color: #007579;

	text-decoration: none;

	border-decoration: none;

	font-weight: normal;

	font-size: 10px;

}



#nav_2nd a:hover {

	color: #999;

	text-decoration: none;

}





/* the screen is where the actual images appear*/

#screen {

	float: left;

	width: 400px;

	margin: 0px 5px 10px 0px;

	list-style-type: none;

	background-color: #fff;

	padding: 10px;

	border: 1px solid #555;

	text-decoration: none;



}



#screen ul {

	margin: 0;

	padding: 0;

	list-style-type: none;

	font-family: verdana, sans-serif;

	color: #555;

	font-weight: normal;

	font-size: 10px;

	text-decoration: none;

}



#screen li {

	margin: 0 1px 5px 0;

	padding: 5px;

	display: block;

	border-bottom: solid 1px #000;

	text-decoration: none;

	list-style-type: none;





}



#screen a {

	margin: 0;

	color: #007579;

	text-decoration: none;

}



#screen a:hover {

	color: #999;

	text-decoration: none;

}











/* the explanation is the writing on the right

that includes news and updates as well as the further

explanations and navigation in the individual pages*/



#explanation {

	position: absolute;

	left: 440px;

	top: 20px;

	width: 190px;

	margin-left: 5px;

	background-color: #fff;

	padding: 5px 0px 20px 10px;

	font-family: verdana, sans-serif;

	color: #555;

	border-left: 1px dotted #999;

    border-bottom: 1px dotted #999;

}



#explanation ul {

	margin: 0;

	padding: 0;

	list-style-type: none;

	font-family: verdana, sans-serif;

	color: #555;

	font-weight: normal;

	font-size: 10px;

}



#explanation li {

	margin: 0 1px 5px 0;

	padding: 5px;

	display: block;

	border-bottom: solid 1px #000;

}



#explanation a {

	margin: 0;

	color: #007579;

	text-decoration: none;

}



#explanation a:hover {

	color: #999;

	text-decoration: none;

}





/*the titles are the bolding of the writing on the very right */

.titles {

font-weight: bold;

font-size: 11px;

color: #CC3366;

}