/* SET THE OVERALL PAGE SIZE AND ALIGNMENTS */
.container  {
width : 960px;
margin : 0 auto;
text-align : left;
position : relative;
}

/* EDIT BODY COLOUR AND MARGINS */
body  {
background-image :  url(images/base/background-pattern.gif);
margin-left : 5px;
margin-top : 10px;
margin-right : 0px;
margin-bottom : 20px;
} 

/* TEXT STYLES */


/* EDIT OVERALL FONT STYLE FOR BODY, 
TABLE DATA, TABLE HEADINGS*/
body, td, th  {
font-family: Arial, Helvetica, sans-serif;
font-size : 13px;
color : #666699;
line-height: 140%;
} 

p  {
margin-top: 0.3em;
}



h1  {
font-family : "Book Antiqua";
font-size : 2.3em;
margin-top: 0.4em;
font-style : normal;
font-weight : normal;
color : #666699;
text-decoration : none;
line-height : normal;
}




h2  {
font-family : "Book Antiqua";
font-size : 1.6em;
font-style : normal;
font-weight : bold;
color : #666699;
text-decoration : none;
line-height : normal;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

h2 a:hover {
color : #cc3300;
text-decoration : none;
font-weight:bold;
}

h3  {
font-family : "Book Antiqua";
font-size : 1.2em;
margin-bottom: 0px;
margin-top: 0.5em;
font-style : normal;
font-weight : bold;
color : #666699;
text-decoration : none;
line-height : normal;

}

h3 a:hover {
color : #cc3300;
text-decoration : none;
font-weight:bold;
}



/* TEXT STYLE for hover gallery layers to information headings */
font.h4  {
font-family : "Book Antiqua";
font-size : 1.3em;
margin-bottom: 2em;
margin-top: 1.0em;
font-style : normal;
font-weight : bold;
color : #666699;
text-decoration : none;
line-height : normal;
padding-bottom: 10px;
}

font.h4 a:hover {
color : #cc3300;
text-decoration : none;
font-weight:bold;
}


  a:link  {
color : #666699;
text-decoration : underline;
}
a:visited {
color : #666699;
text-decoration : underline;
}
a:hover {
color : #cc3300;
text-decoration : none;
font-weight:normal;
}
a:active {
color : #666699;
text-decoration : none;
} 



img.middle {
vertical-align:middle;
margin-bottom: 0em;
margin-right: 0.5em;
}

.floatleft 
{
float: left;
margin: 0.2em 1em 0px 0px;
}

.floatright 
{
float: right;
margin: 1em 0px 0px 1em;
}

.floatpriceimages 
{
float: left;
vertical-align: top;
margin: 1em 0.5em 1em 0;
}

.floatlm 
{
float: left;
vertical-align: middle;
margin: 0 0.5em 0 0;
}

.floatlb 
{
float: left;
vertical-align: bottom;
margin: 0 0 0 0;
}


.floatrm 
{
float: right;
vertical-align:middle;
margin: 0.0em 0px 0px 0em;
}


/* TABLE LAYOUTS */

#round_corners_table  {
border : 0;
width : 795px;
height : 560px;
border-collapse : collapse;
background-color : #ffffff;
position : absolute;
left : 0px;
top : 100px;

white-space : nowrap;
text-align : left;
z-index : 0;

}
#top-row {
height : 14px;
background-image : url(http://www.illustration-online.com/images/base/border-t.gif);
}
#bottom-row {
height : 14px;
background-image : url(http://www.illustration-online.com/images/base/border-b.gif);
}
#border-left {
width : 12px;
background-image : url(http://www.illustration-online.com/images/base/border-l.gif);
}

#border-right {
width : 12px;
background-image : url(http://www.illustration-online.com/images/base/border-r.gif);
}
#tl {
width : 12px;
background-image : url(http://www.illustration-online.com/images/base/border-tl.gif);
}
#tr {
width : 12px;
background-image : url(http://www.illustration-online.com/images/base/border-tr.gif);
}
#bl {
background-image : url(http://www.illustration-online.com/images/base/border-bl.gif);
}
#br {
background-image : url(http://www.illustration-online.com/images/base/border-br.gif);
} 




/* HEADER & LOGO LAYOUT */

#logo  {
position : absolute;
left : 22px;
top : 10px;
width : 500px;
white-space : nowrap;
text-align : right;
z-index : 3;

}

   #line  {
position : absolute;
left : -100px;
top : 63px;
width : 850px;
white-space : nowrap;
z-index : 53;
}

   #name  {
position : absolute;
left : 785px;
top : 30px;
width : 145px;
white-space : nowrap;
text-align :right;
z-index : 85;
}

   #title  {
position : absolute;
left : 25px;
top : 105px;
width : 300px;
white-space : nowrap;
text-align :left;
z-index : 85;
}

   #subtitle  {
position : absolute;
left : 35px;
top : 145px;
width : 300px;
white-space : nowrap;
text-align :left;
z-index : 85;
}

/* links to portrait options */
#portrait-options {
position : absolute;
left : 35px;
top : 173px;
width : 450px;
white-space : nowrap;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-align :left;
font-size: 85%;
z-index : 101;
} 



#galleryimage {
position : absolute;
left : 330px;
top : 130px;
width : 430px;
height: 430px;
padding : 10px;
margin-left: 10px;
white-space : wrap;
z-index : 2;
}

#links {
position : absolute;
left : 25px;
top : 105px;
width : 725px;
height: 430px;
padding : 0px;
margin-left: 10px;
margin-right: 10px;
white-space : wrap;
z-index : 51;
}

#info {
position : absolute;
left : 25px;
top : 680px;
width : 725px;
height: 430px;
padding : 0px;
margin-left: 10px;
margin-right: 10px;
white-space : wrap;
z-index : 51;
}



#footer {
position : absolute;
left : 30px;
top : 660px;
width : 745px;
white-space : nowrap;
text-align : left;
align: top;
z-index : 51;
font-size: 85%;
} 



 #pricelist1  {
position : absolute;
left : 25px;
top : 180px;
width : 715px;
height : 350px;
padding: 10px;
white-space : normal;
text-align : left;
z-index : 100
} 


 

/* GALLERY LAYOUT */

 #gallerycontainer  {
position : absolute;
left : 25px;
top : 190px;
width : 300px;
height : 450px; /* required to prevent offset when no gallerycontainer on page */
white-space : normal;
text-align : left;
border: 0px dashed #CC3300;
z-index : 200;
} 


.thumbnail:hover{ /*CSS for BOTH images on hover */
background-color: transparent;
text-decoration : none;
}

/*CSS for large image on hover */
.thumbnail:hover img  {
border : 0px solid gray;
} 

/*CSS 1 of 3 for enlarged image when hidden*/
.thumbnail span  {
position : absolute;
background-color : white;
padding : 10px;
border: 0px dashed #CC3300;
left : -1000px;
width : 425px;
height : 445px;
visibility : hidden;
color : #666699;
text-decoration : none;
text-align : left;
} 

/*CSS 2 of 3 for enlarged image*/
.thumbnail span img  {
padding : 0px 0px 0px 0px;
} 


.thumbnail:hover span  {/*CSS 3 of 3 for enlarged image when visible*/
visibility : visible;
top : -85px;/*position where enlarged image should offset...absolute position from container insert position*/
left : 315px;

} 


 #gallerycontainer  a:link  {
color : #666699;
text-decoration : underline;
}
 #gallerycontainer a:visited {
color : #666699;
text-decoration : underline;
}
 #gallerycontainer a:hover {
color : #cc3300;
text-decoration : none;
font-weight:normal;
}
 #gallerycontainer a:active {
color : #666699;
text-decoration : none;
} 


/* icon MENU --------------------*/

#translate {
position : absolute;
left : 802px;
top : 75px;
width : 100px;
white-space : nowrap;
text-align : left;
align: top;
z-index : 200;
font-size: 85%;
} 


/* main MENU --------------------*/


#menu {
position: absolute; 
top: 100px; 
left: 793px;
width: 14em; /* set width of menu */
font-size: 100%;
background: transparent;
z-index: 150;
} 



#menu ul { /* remove bullets and list indents, 
wide left border puches whole list to right */
list-style: none;
/* background: #E4ECC2; sub background */
border-left: 0px solid #E76A2A;
margin-left: 5px;
padding: 0 0 0 0;
line-height: 1.8em;}

#menu ul ul{ /* remove bullets and list indents, 
wide left border puches whole list to right */
list-style: none;
background: #E4ECC2; /* sub sub background */
background-image: url(http://www.portraits-online.com/images/base/info-button.png);
background-repeat: repeat-x, repeat-y ;
border-left: 0px solid #E76A2A;
margin-left: 5px;
padding: 0 0 0 0;
line-height: 1.8em;

}


/* style, color and size links and headings to suit */

#menu li a {
display: block;
font-family: verdena, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color : #666699;
text-decoration: none;
background-color: transparent;
border-bottom: 1px dashed #C39C4E;
margin: 2px 0 0 0; /* margin between a elements*/
padding: 3px 6px;
}

.menuspace {
background-image :  url(http://www.portraits-online.com/images/base/background-pattern.gif);
}


.line{
border-bottom: 1px solid #cc3300;
}


#menu h5 {
font-family: "Book Antiqua";
font-size: 1.2em;
font-style: normal;
font-weight: bold;
text-decoration: none;
color: #666699;
display: block;
background-color: transparent;
border-width: 1px;
border-style: none;
border-color: transparent;
margin: 0.5em 0 0 5px;
padding: 2px 0px 2px 2px;
/*text-transform: uppercase;*/

}

#menu a:hover {
color: #a00;
font-weight: bold;
background: #ffffff; /*text on hover*/
background-image: url(http://www.portraits-online.com/images/base/inforepeatover.gif);
background-repeat: repeat-x;
}

/* position pop-outs ---------*/

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;

} 

#menu ul ul ul {
position: absolute;
right: 100%; /* to position them to the right of their containing block */
top: 0em;/* to move position down */
width: 15em; /* width is based on the containing block */

}


/* Hiding and Revealing using :hover ---------*/

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;
}

/* END ---------*/










/* HORZONTAL MENU */

#menuhorizontal {
position: absolute; 
top: 65px; 
left: 25px; 
width: 750px;
align: right;
font-size: 90%;
z-index: 50;}

#menuhorizontal ul.hor {
float:right;
width:750px;
height : 800px;
margin:0px;
list-style-type:none;
padding: 0 0 0 0; 
font-family : Verdana, Arial, Helvetica, sans-serif;
list-style-type:none;
}


#menuhorizontal a.hor
{
float:left;
text-decoration:none;
color:#666699;
width:170px;
background-image: url(http://www.portraits-online.com/images/base/inforepeatover.gif);
background-repeat: repeat-x;
border-top: 1px solid #C39C4E;
border-bottom: 1px solid #C39C4E; 
padding: 0.3em 0.6em 0.5em 0.6em;
text-align: center;
margin:1px;
}

#menuhorizontal a:hover {
background-image: url(http://www.portraits-online.com/images/base/inforepeatover.gif);
background-repeat: repeat-x;
border-top: 1px solid #CC3300;
border-bottom: 2px solid #CC3300; 
padding:  0.3em 0.6em 1.5em 0.6em;
text-align: center;
margin:1px;
}


#menuhorizontal li a:link  {color : #666699;text-decoration : none;font-weight:bold}
#menuhorizontal li a:visited {color : #666699;text-decoration : none;font-weight:bold}
#menuhorizontal li a:hover {color : #CC3300;text-decoration : none; font-weight:bold}
#menuhorizontal li a:active {color : #666699;text-decoration : none;font-weight:bold} 

#menuhorizontal li.hor {display:inline}