/* CSS Document */
* {
margin:0;
padding:0;
}

body {
background: #FFFFFF url(images/BackgroundImages/background.jpg) no-repeat;
color:#000033;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.9em;
}

/* Iris logo links to reciprocate links with other websites:
<a href="http://www.katherinesgallery.com/" target="_blank" title="Katherine's Gallery. Art and art classes"> <img src="images/BackgroundImages/IrisLogo130.jpg" alt="Katherine's Gallery. Artist Katherine Milns paints in oils and watercolours. She teaches art classes and life drawing. She offers painting demonstrations, art workshops and private art tuition." width="108" height="130" border="0"/></a> 
*/

/* The folloing instructions control the headers*/
h1,h2, h3, h4,h5, h6 {
color:#660066;
}

h1#header {
height:130px;
background-image:url(images/BackgroundImages/KatherinesGalleryHeader.gif);
background-repeat:no-repeat;
text-indent:-9000px;
}

h2 {
margin-bottom:.3em;
font-size:1.7em;
}

h3 {margin-bottom:.5em;
font-size:1.2em; }
 
h4 {margin-bottom:.2em;
font-size:1em;
font-weight:420;
}

h5 {margin-bottom:.2em;
font-size:1em;
}

#body text links; {font-color:#000033;}

/* Main paragraph instructions*/
P {
margin-bottom:1.0em;
line-height:1.4em
}
/*style of links*/
ul {list-style:none;
}
/* Main container*/
.container {
width:900px;
position:absolute;
margin:10px auto 0 auto
}

/* the class and id instances below control the main decorative element */

.flower {
position:absolute;
top:80px;
width:450px;
height:600px;
}

/* the id instances below produce Iris and Orchid, etc, images as decorative image on pages */

#iris {background:url(images/BackgroundImages/Iris.gif) no-repeat;}
#orchid_pink {background:url(images/BackgroundImages/OrchidPink&White.gif) no-repeat;}
#orchid_purple {background:url(images/BackgroundImages/OrchidPurple.gif) no-repeat;}
#blue_flower {background:url(images/BackgroundImages/BlueFlower.gif) no-repeat;}
#orchid {background: url(images/BackgroundImages/orchid.gif) no-repeat;}
#tattoo_tool {background:url(images/BackgroundImages/TattooTool.gif) no-repeat;}
#pandion {background:url(images/BackgroundImages/Pandion500.gif) no-repeat;}
#cervinia {background:url(images/BackgroundImages/Cervinia.gif) no-repeat;}
#seascape {background:url(images/BackgroundImages/Seascape.gif) no-repeat;}
#seascapes {background:url(images/BackgroundImages/Seascapes.gif) no-repeat;}
#seascape1 {background: url(images/BackgroundImages/Seascape1.gif) no-repeat;}
#tundra {background:url(images/BackgroundImages/Tundra.gif) no-repeat;}
#alex {background:url(images/BackgroundImages/Alex.gif) no-repeat;}
#abbie {background:url(images/BackgroundImages/Abbie.gif) no-repeat;}
#alleyway {background:url(images/BackgroundImages/YellowAlleyway.gif) no-repeat;}
#puffin {background:url(images/BackgroundImages/Puffin.gif) no-repeat;}
#pepper {background:url(images/BackgroundImages/Pepper.gif) no-repeat;}
#jungfrau {background:url(images/BackgroundImages/Jungfrau.gif) no-repeat;}
#oranges {background:url(images/BackgroundImages/Oranges.gif) no-repeat;}
#tomato {background:url(images/BackgroundImages/Tomato.gif) no-repeat;}
#strawberries {background:url(images/BackgroundImages/strawberries.gif) no-repeat;}
#nude {background:url(images/BackgroundImages/Nude3.650.gif) no-repeat;}
#nude1 {background:url(images/BackgroundImages/Nude11.650.gif) no-repeat;}
#nude2 {background:url(images/BackgroundImages/Nude9.650.gif) no-repeat;}
#sketching {background:url(images/BackgroundImages/OutdoorSketching.gif) no-repeat;}
#Demo {background:url(images/BackgroundImages/Demo.gif) no-repeat;}
#tuition {background:url(images/BackgroundImages/PrivateTuition.gif) no-repeat;}

/* this next section controls the look and feel of the navigation bar and buttons.
 Each button has an associated brushstroke image attached through an id instance. */

.navigation {
display:block;
width:108px;
float:right
}

.navigation li {
display:block;
line-height:40px;
text-align:center;
}
/* Brush Strokes Buttons*/
#brush1 {
background-image:url(images/Buttons/button-1.gif);
}
#brush2 {
background-image:url(images/Buttons/button-2.gif);
}
#brush3 {
background-image:url(images/Buttons/button-3.gif);
}
#brush4 {
background-image:url(images/Buttons/button-4.gif);
}
#brush5 {
background-image:url(images/Buttons/button-5.gif);
}
#brush6 {
background-image:url(images/Buttons/button-6.gif);
}
#brush7 {
background-image:url(images/Buttons/button-7.gif);
}
#brush8 {
background-image:url(images/Buttons/button-8.gif);
}


/* this next section controls the set up of the various areas within the webpage, ie. Navigation,
	content, the footer and logo. */

.content {
width:630px;
margin-left:150px;
}

/*this sends the image to the left so that the text sits to the right.*/
.text_wrap {
float:left;
padding-right:10px;
padding-bottom:15px;
}

.clear_wrap {
clear:left
}

.footer {
clear:both;
text-align:right;
font-size:.7em;
padding-top:5px;
}

.logo {
position:absolute;
top:0;
right:0;
height:130px;
width:108px;
}
/* Image padding */
/* This moves the image so that 3 images are central on the index page.  */
#Index_padding {
padding-left:80px;
}
/*Art Classes padding */
#Art_Class_padding {
padding-left:450px;
}

/* This SPAN class is to highlight words within a sentence.  */
.katherine {
font-size:.9em;
font-style:italic;
font-weight:bold;
color:#660066; 
}
/* This SPAN class is to highlight words in a smaller text within a sentence.  */
.kat {
font-size:.9em;
font-style:italic;
}


/* This SPAN class highlights Welcome to Katherine's Gallery.  */
.Welcome {
font-size:4.2em;
font-family:"Bickley Script", Verdana, Arial, Helvetica, sans-serif;
color:#660066
}