/*  =MAIN CONTAINERS 
----------------------------------------------------------------------------*/
* {
	padding: 0px;
	margin: 0px;
}

/* body element is included exclusively to repeat the nocturnal_upper_right_sky.jpg */
body{
	background: url("/home/images/nocturnal_upper_right_sky.jpg");
	background-color: #224960; /*  #224960 the lightest green on the page */
	background-repeat: repeat-x;
	background-position: top;
	height: 100%;
	
}

h5{
color:white;
padding-left: 20px;
}

html{
	height: 100%;
}

#flash_slideshow{
margin-bottom: 10px;
}

#swapper{
margin-left: 15px;
}

#mainContent p {
padding-bottom: 10px;
padding-left: 18px;
}

#suppressBuffer p{
padding: 0px;
}

#mainContent a{
color: #99CC00;
}

#secondaryNav a{
color: #99CC00;
}



/* defines the entire screen */
#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;

	
}

/* #container defines all the content including background.  */
#container {
	position: absolute;
	width: 884px;	
	height: auto;
	float: left;
	border: 0;
	margin: 0px;
	padding: 0px;

}

/* =LOGO AND MENU CONTAINERS
---------------------------------------------------------------------------*/

/*  Contains 3 columns: a flash banner, logo, and some repeating graphic */
#logoAndflashBanner{
	float: left;
	width: 882px;
	height: 123px;
	margin: 0px;
	padding: 0px;
}

#flashBanner{
	float: left;
	width: 485px;
	height: 123px;
}

#logo{
	float: left;
	width: 173px;
	height: 123px;
}


#tiledImage{
	float: left;
	width: 226px;
	height: 123px;
}


/* require: should be the same width as #logoAndflashBanner */
#mainMenu{
	float: left;
	width: 882px;
	height: 25px;
	margin: 0px;
	padding: 0px;
}


/* require: should be the same width as #flashBanner */
#buttons{
	float: left;
	width: 485px;
	height: 25px;
	
}



/* =CONTENT CONTAINERS
----------------------------------------------------------------------- */

/* require:  #contentContainer's width == #logoFlashBanner */
#contentContainer{
	float: left;
	width: 882px;
	height: 100%;
	background-color: #09202d;  /*a darker green */
	background: url("/home/images/bkgrd_contentContainer.jpg") repeat-y;
}


/* most of the important content such as news as artist spotlight goes
   inside #mainContent.  This container encapsulates #featuredArtist,
   #latestNews, and #newsItem. in the same stacked column
   require: #mainContent width == #flashBanner width 
*/
#mainContent{
	float: left;
	width: 485px;
	height: 100%;
	background-color: #142C3A; /* green */
	padding-bottom: 50px;
}

/* require: width + L,R padding == width #mainContent */
#featuredArtist{
	/* background-color: #142C3A;  */
	background-color: #224960; /* the lightest green on the page */
	background: url("/home/images/bkgrd_featuredartist.gif") no-repeat;
	float: left;
	width: 455px;
	height: 100%;
	padding: 40px 20px 5px 10px;
	border-bottom: 1px dotted black;
}

.header{
	float: left;
	padding-bottom: 10px;
	width: 455px;
}

/* require: width + L,R padding == width #mainContent */
#latestNews{
	/* background-color: #142C3A;  */
	background-color: #224960; /* the lightest green on the page */
	background: url("/home/images/bkgrd_latestnews.gif") no-repeat;
	float: left;
	width: 455px;
	height: 100%;
	padding: 10px 20px 30px 10px;
	border-bottom: 1px dotted black;
}

/* require: width = width #latestNews */
#latestNews .header{
	float: left;
	width: 455px;
}

.newsItem{
	float: left;
	width: 455px;
	height: 100%;
	padding: 10px 0 15px 0;
}
/* => SECONDARY NAV COLUMN */

/* This container is a column of stacked secondary links
   #secondaryNav encapsulates .releaseItem in a stacked column.
   require: width == width #logo
*/
#secondaryNav{
	float: left;
	width: 173px;
	height: 100%;
	background: url("/home/images/bkgrd_recentReleases.gif") no-repeat;
	background-color: #09202d; /* a darker green */
	height: auto;
}

#secondaryNav p{
	margin-bottom: 5px;
}

/* require: height + R,L padding == #secondaryNav */
.releaseItem, .clothingItem{
	float: left;
	padding: 12px 10px 12px 10px;
	border-bottom: 1px dotted gray;
	width: 153px;
	background-color: #09202d;  /* a darker green */
	height: auto;
}

.rel88{
	width: 193px;
}

/* without this div, text overflows in unexpected ways
   require: width = width .releaseItem */
.secondaryNavText{
	width: 153px;
	float: left;
	padding-top: 2px;
}



/* => MAILFORM, ADS AND MISC COLUMN */

/* require: width = width(#tiledImage - 2px)  */
#adsAndMisc{
	float: right;
	width: 224px;
	background: url("/home/images/bkgrd_mailinglist.gif") no-repeat;
	background-color: #142C3A;
	height: auto;
}

/* require: width = L,R(Padding) - width of #adsAndMisc   */
#mailingListForm{
	float: left;
	width: 204px;
	padding: 40px 10px 45px 10px;
	height: auto;
	border-bottom: 1px dotted black;
}

/* require: width = width #mailingListForm  */
.rotatingAd{
	float: left;
	width: 204px;
	padding: 10px 10px 20px 10px;
	height: auto;
}

/* require: width = width #adsAndMisc */
#aboutNocturnal{
	float: left;
	width: 204px;
	height: auto;
	background: url("/home/images/bkgrd_about.gif") no-repeat;
	padding: 35px 10px 10px 10px;
	margin-bottom: -18px;
	border-top: 1px dotted black;
}


/* =forms */
.noct_inputField{
	float: left;
	width: 200px;
	height: 14px;
	margin: 10px 0 5px 0;
	background-color: #09202D; /* dark green */
	border-color: #224960; /*  #224960 the lightest green on the page */
	font-size: 10px;
	border-style: groove;
	color: #FFFFFF; /*white text */
}

.noct_inputField2{
	width: 150px;
	height: 14px;
	background-color: #09202D; /* dark green */
	border-color: #224960; /*  #224960 the lightest green on the page */
	font-size: 10px;
	border-style: groove;
	color: #FFFFFF; /*white text */
}

.signUpButton{
	float: right;
	border: 0px;
}


/* =FOOTER AND MISCELLANEOUS CONTAINERS
----------------------------------------------------------------------- */

#contactInfo{
	float: left;
	width: 842px;
	height: auto;
	background: url("/home/images/bkgrd_contact.gif") no-repeat;
	background-color: #142C3A;
	padding: 40px 10px 10px 30px;
	border-top: 1px dotted black;

}

#footer{
	padding: 0 0 0 10px;
	height: 50px;
	width: 872px;
	float: left;
	background: url("/home/images/bkgrd_stripedFooter.gif");
	background-repeat: repeat-x;
}



/* =TEXT AND LINKS
----------------------------------------------------------------------- */
h1{
	font-size: 14px;
	font-family: Arial, Times, Helvetica, monospace;
	color: white;
	margin: 25px 0 0 18px;
	letter-spacing: -.3px;
	float: left;
	
}

p.mainContent{
	font-size: 11px;
	font-family: Arial, Times, monospace;
	line-height: 15px;
	color: white;
	margin: 0 0 0 18px;
	padding-bottom: 5px;
}

p{
	font-size: 10px;
	line-height: 14px;
	font-family: Arial, Times, monospace;
	color: white;
}

#aboutNocturnal p{
	font-size: 10px;
	line-height: 14px;
	font-family: Arial, Times, monospace;
	color: #CCCCCC;
	padding-bottom: 5px;
}
p.introText{
	font-size: 9px;
	line-height: 11px;
	font-family: Arial, Times, monospace;
	color: white;
	margin: 0 0 20px 0;
	letter-spacing: 0.18em;
	width: 150px;
}
	
a{
	text-decoration: none;
}


a:hover{
color: #00CCFF;
}

#contactTable a{
	text-decoration: none;
	color: #FFFFFF;
	font-size: 9px;
	line-height: 11px;
	font-family: Arial, Times, monospace;
	
}

b {
font-weight: strong;
font-size: 11px;
}

li{
font-size: 11px;
color: white;
font-family: helvetica, arial, sans;
}

ul{
padding: 10px;
margin-left: 20px;
}
	
/* =IMAGES
----------------------------------------------------------------------- */

img{
	border: 0px;
}


img.btn_mainMenu{
	float: left;
	border: none;
}

/* these are all the buttons that are not part of the main menu
   require: all float right and have left padding.
*/
img.btn_secondaryNavs{
	float: right;  /* #### Attention: these float right!!!  #### */
	border: 0px;
	padding: 0 0 4px 5px;
	display: inline;

}
	

img.img_featuredArtist{
	float: left;
	padding: 8px 0 8px 0;
	border: 0px;
}

img.moonIcon{
	float: left;
	
	border: 0px;
	padding-right: 7px;
}

img.img_albumThumbnails{
	display: inline; /* inline causes the secondary nav buttons to display stacked to the right of this */
	float: left;
	border: 0px;
}