/* NITEFLY STYLES - 2008
COLOURS:
DARK GREY - #333
MID GREY - #444
TEAL - #006C9C
*/

html, body {
height:100%;
}

* {
padding:0;
margin:0;
border:0;
list-style:none;
font-family:verdana, arial, courier, sans-serif;
}

body {
background:#444 url(images/body_bg.gif) repeat-x;
}

#wrap {
width:760px;
position:relative;
margin:auto;
min-height:100%;
background:#444 url(images/wrap_bg.gif) repeat-y;
}

* html #wrap {
height:100%;
}

#header {
width:760px;
height:200px;
background:#444 url(images/body_bg.gif) repeat-x;
}

#inner-wrap {
width:710px;
padding-bottom:80px;
background:transparent none;
margin:auto;
}

#inner-wrap:after {
content:" ";
display:block;
clear:both;
}

.clear {
clear:both;
margin-top:0;
height:1%;
width:100%;
overflow:hidden;
} 

#footer {
width:760px;
height:61px;
position:absolute;
bottom:0;
background:white url(images/footer_bg.gif) no-repeat;
}

#footer p {
color:#666;
text-align:center;
padding-top:15px;
padding-left:100px;
margin:5px;
line-height:15px;
font-size:11px;
}

#logo {
width:262px;
height:102px;
position:relative;
padding-top:18px;
}


/*
#menu {
height:25px;
position:relative;
}

#menu li {
float:left;
margin-right:15px;
text-align:center;
font-size:12px;
height:16px;
padding-top:9px;
}

#menu li a {
font-weight:bold;
color:white;
text-decoration:underline;
}

#menu li a:hover {
text-decoration:none;
}
*/

#menu {
height:20px;
padding-top:5px;
position:relative;
margin-left:25px;
}

#menu a {
text-decoration:none;
display:block;
height:25px;
}


#menu li {
float:left;
}

#menu li#home a { background-image:url(images/home_off.gif); }
#menu li#home a:hover { background:transparent; }
#menu li#home { background-image:url(images/home_roll.gif); height:25px; width:43px;}

#menu li#about a { background-image:url(images/about_off.gif); }
#menu li#about a:hover { background:transparent; }
#menu li#about { background-image:url(images/about_roll.gif); height:25px; width:82px;}

#menu li#services a { background-image:url(images/services_off.gif); }
#menu li#services a:hover { background:transparent; }
#menu li#services { background-image:url(images/services_roll.gif); height:25px; width:99px;}

#menu li#musicLibrary a { background-image:url(images/musicLibrary_off.gif); }
#menu li#musicLibrary a:hover { background:transparent; }
#menu li#musicLibrary { background-image:url(images/musicLibrary_roll.gif); height:25px; width:86px;}

#menu li#miWedding a { background-image:url(images/miWedding_off.gif); }
#menu li#miWedding a:hover { background:transparent; }
#menu li#miWedding { background-image:url(images/miWedding_roll.gif); height:25px; width:79px;}

#menu li#miParty a { background-image:url(images/miParty_off.gif); }
#menu li#miParty a:hover { background:transparent; }
#menu li#miParty { background-image:url(images/miParty_roll.gif); height:25px; width:58px;}

#menu li#QandA a { background-image:url(images/QandA_off.gif); }
#menu li#QandA a:hover { background:transparent; }
#menu li#QandA { background-image:url(images/QandA_roll.gif); height:25px; width:50px;}

#menu li#contact a { background-image:url(images/contact_off.gif); }
#menu li#contact a:hover { background:transparent; }
#menu li#contact { background-image:url(images/contact_roll.gif); height:25px; width:54px;}

#subLogo {
width:760px;
text-align:center;
height:25px;
margin-top:38px;
}

#subLogo p {
font-weight:bold;
color:white;
font-size:12px;
}

#flashBox {
width:320px;
height:240px;
float:left;
border:1px solid black;
margin-left:20px;
}

#leftBar {
float:left;
width:140px;
margin-left:5px;
text-align:center;
}

#leftBar p {
margin:5px;
margin-left:0;
color:white;
font-size:10px;
line-height:15px;
padding:2px;
text-align:left;
}

#leftBar p a {
color:white;
text-decoration:underline;
}

#leftBar p a:hover {
text-decoration:none;
}

.leftMenu {
float:left;
width:117px;
margin-left:12px;
}

h1 {
width:730px;
padding-left:30px;
height:30px;
padding-top:15px;
background:white url(images/h1_bg.gif) no-repeat;
margin-top:-18px;
color:white;
font-size:16px;
font-weight:bold;
}

h2 {
margin:5px 10px 5px 160px;
color:#006C9C;
font-size:14px;
font-weight:bold;
border-bottom:1px dotted #444;
padding:2px;
}

h3 {
font-size:13px;
font-weight:bold;
color:#444;
margin:8px 15px 8px 165px;
}

p {
font-size:12px;
margin:6px 20px 6px 165px;
padding:5px;
line-height:19px;
color:#444;
}

a {
color:#006C9C;
text-decoration:underline;
}

a:hover {
text-decoration:none;
}

.mainList {
margin:5px 40px 5px 200px;
}

.mainList li {
background:white url(images/listCheck.gif) no-repeat left top;
padding-left:28px;
padding-top:5px;
margin:2px;
font-size:11px;
height:22px;
color:#555;
}

.plusList {
margin:5px 40px 5px 200px;
}

.plusList li {
background:white url(images/listPlus.gif) no-repeat left top;
padding-left:28px;
padding-top:5px;
margin:0;
font-size:11px;
height:21px;
color:#555;
}

.staffBox {
margin:10px 20px 10px 165px;
min-height:200px;
border-bottom:1px dotted #ccc;
padding:2px;
}

* html .staffBox {
height:200px;
}

.staffBox img {
float:left;
vertical-align:bottom;
}

.staffBox p {
font-size:11px;
margin:5px;
line-height:17px;
}

.staffBox h3 {
text-align:right;
margin:5px;
}

#testimonies p {
background:white url(images/quote.gif) no-repeat top left;
padding-left:55px;
padding-top:20px;
border-bottom:1px dotted #ccc;
}

#questions p {
background:white url(images/questionMark.gif) no-repeat top left;
padding-left:55px;
padding-top:10px;
border-bottom:1px dotted #ccc;
}

#tunesTable {
margin-left:175px;
margin-right:25px;
width:506px;
padding:2px;
}

#tunesTable td {
font-size:11px;
color:#444;
width:249px;
padding:2px;
border-bottom:1px solid #ddd;
}

.rowB td {
background-color:#eee;
}


#tunesTableTwo {
float:right;
/*margin-left:32px;*/
margin-right:25px;
width:506px;
padding:2px;
}

#tunesTableTwo td {
font-size:11px;
color:#444;
width:249px;
padding:2px;
border-bottom:1px solid #ddd;
}
/* FORM STYLES */


.cssform {
position:relative;
margin:10px 50px;
float:left;
}

.cssform p {
width: 300px;
clear: left;
margin: 0;
border-top:1px solid #ddd;
padding: 5px 0;
padding-left: 155px; /*width of left column containing the label elements*/
height: 1%;
color:#444;
font-size:11px;
line-height:15px;
}

.cssform label{
float: left;
text-align:right;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
padding:2px;
border:1px solid;
border-color:#ccc;
color:#006C9C;
}

.cssform select { /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
padding:2px;
border:1px solid;
border-color:#ccc;
color:#006C9C;
}


.cssform input[type="password"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
padding:2px;
border:1px solid;
border-color:#ccc;
color:#006C9C;
}
.cssform textarea{
width: 250px;
height: 100px;
border:1px solid;
border-color:#ccc;
font-size:11px;
color:#006C9C;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

.submitbutton {
color:#444;
cursor:pointer;
background-color:#e1e9a1;
font-weight:bold;
padding:2px;
float:right;
border:1px solid;
border-color:#e5e5e5 #bbb #bbb #e5e5e5;
font-size:11px;
}

/* SLIDING FORM STYLES 
CHANGE 'EM */
.animationContainer{
	height: 220px;
	width:600px;
}

.animationContainer p {
margin:10px;
}

.demoDiv{
	background-color: #eee; 
	height: 200px; 
	overflow: hidden;
}

.hideInitially{
	visibility: hidden;
}

#galleryList {
width:555px;
float:right;
margin-right:3px;
}

#galleryList li {
float:left;
width:175px;
margin:2px;
padding:2px;
border:1px solid #ccc;
}

* html #galleryList li {
margin:1px;
}

#galleryList img {
vertical-align:bottom;
}