/* Broadleaf Business Solutions CSS Document */
/*CSS for Visionart-UK site*/

/**************************************************/
/*                                   Body and Wrapper                             */
/**************************************************/

body {
background: #000099 url(images/back.png) top center repeat-x; 
margin: 0;
padding: 0;
font: normal 15px verdana, arial, sans-serif;
}

#wrapper {
margin: 0 auto;
width: 800px;
padding: 0;
text-align: left;
}

/**************************************************/
/*                                       Top Piece                                        */
/**************************************************/

#top {
background: url(images/bgtop.png) top center no-repeat; 
width: 800px;
height: 78px;
}

/**************************************************/
/*                                       Content                                             
another wrapper that holds all the content                              */
/**************************************************/

#content {
background: url(images/bgmiddle.png) center repeat-y; 
width: 766px;
height: 100%;
padding: 0px 17px 0px 17px;
}

/**************************************************/
/*                               All the content                                        */
/**************************************************/

#header {
background: url(images/header.png) top center no-repeat; 
width: 738px; /*this was 746??*/
height: 106px;
margin: 0px 0px 10px 4px; /* This was  0px 0px 10px 0px */
padding: 60px 0px 0px 20px;
color: white;
font-size: 50px;
text-align: ;
}

#header  img {
position: relative;
bottom:50px;
left:0px;

}

.clear {
clear: both;
display:block;
}



/*                    Menu                   */
#menu {
width: 160px;
height: 100%;
margin-left: 10px;
float: left;
text-align: left;
}

#menu li a {
height: 37px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}	
	
#menu li a:link, #menu li a:visited {
color: navy;
display: block;
background:  url(images/off.png) top center no-repeat;
padding: 8px 0 0 15px;
height: 29px;
text-align: left;
}

#menu li a.currentpage{
background:  url(images/on.png) top center no-repeat;
}
	
#menu li a:hover {
color: blue;
background:  url(images/on.png) top center no-repeat;
padding: 8px 0 0 15px;
height: 29px;
text-align: left;
}	

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}


#main_panel {
background:  url(images/texttop.png) top left no-repeat;
width: 550px;
margin: 0px 0px 0px 190px;
padding-top: 55px;
border: 2px navy;
height: auto;
}

#main_panel p {
font: normal 15px verdana, arial,sans-serif;
text-align: justify;
padding-right: 10px;
}

#main_panel p.instruct {
padding-top: 10px;
font-style: italic;
font-size: 80%;
color:#0000CC;
}

.photolist li {
float:left;
width: 250px;
margin-bottom: 50px;
height:260px;
padding: 0 3px;
}

.photoparra {
padding:  15px 30px 15px 5px;
}

ul.photolist img {
display:block;
border: 2px navy;
}

img {
border: none;
} 

.music_control {
margin: 5px 30px 10px 5px;
float:right;
padding-left:10px;
}


.index_picture {
float:right;
margin:25px;
border: 5px navy;
}

.link_picture {
border: solid white 10px;
margin: 20px;
}
/**************************************************/
/*                         Contact Form
/**************************************************/

form.contact fieldset {
border: 2px solid navy;
padding: 10px;
}

form.contact legend {
font-weight: bold;
font-size: small;
color: navy;
padding: 5px;
}

form.contact label {
font-weight: bold;
font-size: small;
color: blue;
line-height: 150%;
}

form.contact label.fixedwidth {
display: block;
width: 240px;
float: left;
}

form.contact {
padding: 0;
margin: 0;
margin-top: -15px;
}

form.contact .buttonarea input {
background: navy;
color: white;
font-weight: bold;
padding: 5px;
border: 1px solid white;
}

form.contact .buttonarea {
text-align: center;
padding: 4px;
background-color: #0066ff
}

form.contact .form_notes p {
text-align:center;
}

/**************************************************/
/*                                       Bottom                                             */
/**************************************************/

#bottom {
background: url(images/bgbottom.png) bottom center no-repeat; 
width: 800px;
height: 50px;
text-align:center;
font-size:x-small
}

/****************************************************/
/*                                   CSS image enlargement on hover      */
/****************************************************/


.thumbnail:hover img { /* Define img under "hover" */
border: 1px solid blue;
}

.thumbnail span { /*CSS for enlarged image*/
position: fixed;
background-color: lightyellow;
padding: 5px;
left: -1000px; /* this is a positioning statement under "absolute positioning" */
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img { /*CSS for enlarged image*/
border-width: 0;
float:none;
padding: 5px;
}

.thumbnail:hover span { /*CSS for enlarged image*/
visibility: visible;
top: 25px; /* this is a positioning statement under "absolute positioning" */
left: 25px; /*position where enlarged image should offset horizontally -  this is a positioning statement under "absolute positioning" */
z-index: 50; /* this is a positioning statement under "absolute positioning" */
}