body {
	background-color: #cccccc;
	background-image: url('images/NewswirlBackground.png');
	background-repeat: repeat-y;
	font-family: 'century gothic';
	font-size: 14px;
}

p {
	padding-left: 10px;
	padding-right: 10px;
}

a:link { 
	color: #33cccc;
}

a:visited { 
	color: #33cccc;
}

a:hover { 
	color: black;
}

body.noscroll { /* removes scroll bar for main 3 navigation pages */
	overflow: hidden;
}

div {
	margin: 0;
	padding: 0;
}

ul {
	margin: 0;
	padding: 0;
}

a img {
	border: none;
}

h1 {
	text-align: center;
}

div.jello {
	position: relative;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 64px;
	background-color: gray;	
}

.center { /* centers ecodog image */
	display: block;
    	margin-left: auto;
    	margin-right: auto;
}

/* ------- table data alignment ------ */

td.left, th.left {
	text-align: left;
	padding-right: 10px;
}
td.right {
	text-align: right;
	padding-left: 10px;
}
td.top {
	vertical-align: top;
	padding-bottom: 10px;
	padding-top: 2px;
}
td.bottom {
	vertical-align: bottom;
	padding-bottom: 1px;
	padding-top: 10px;
}

td.centerme {
	text-align: center;
}

.borderless, .borderless tr, .borderless th, .borderless tr td {
	border: none;
}




#logo {
	margin-top: 0px;
	position: absolute;
	top: 0px;
	left: 0;
	z-index: 99; 
}

#flower {
	position: absolute;
	right: 0;
	top: 350px;
	z-index: 1;
}

#sticky {
	position: absolute;
	width: 200px;
	right: 30px;
	top: 0px;
	z-index: 1;
}

#ecofriendly {
	position: absolute;
	width: 300px;
	right: 0px;
	top: 300px;
	z-index: 20;
}

#fb {
	position: fixed;
	width: 50px;
	right: 0px;
	top: 40px;
	z-index: 1
}

#twitter {
	position: fixed;
	width: 50px;
	right: 0px;
	top: 100px;
	z-index: 1
}

#rss {
	position: fixed;
	width: 50px;
	right: 0px;
	top: 160px;
	z-index: 1
}

/* ------- header ------ */

div.header {
	z-index: 40;
	position: fixed;
	top: 0;
	width: 800px;
}

div.header > ul {
	height: 80px;
	background-color: #666666;
}

div.header ul li {
	padding-top: 40px;
	padding-bottom: 00px; /*connects bottom of li to menu */
	float: left;
	color: black;
	list-style-type: none;
	font-size: 22px;
	font-weight: bold;
	width: 200px;
	text-align: center;
}

div.header ul li a:hover {
	color: yellow;
}

div.header ul li a:active {
	color: #33cccc;
}

div.header ul li ul li{
	/* background-image: url('images/transparent.png'); */
	background-color: #666666; 
	padding: 0px;
	text-align: left;
}

div.header ul li ul li:hover {
	color: yellow; /*why doesn't this work? */
	background-image: url('images/notastransparent.png');
	
}

div.header ul li ul li a {
	padding: 0px;
	font-size: 16px;
	line-height: 70%;
	text-decoration: none;
	color: black;
	font-weight: normal;
}




/* ------- fancy hover menus with css ------  */

ul.makeMenu li > ul {
	display: none;
	position: absolute;
	z-index: 99;
	top: 0px;
	width: 200px;
}

ul.makeMenu li:hover > ul {
	display: block;
}

ul.makeMenu, ul.makeMenu ul {
	background-color: #666666; /*apparently this is necessary for ie to work */
}

ul.makeMenu > li > ul { 
	margin-top: 80px; /* trying to make top of ul flush with bottom of header */
	/* background-color: #666666; hides the strange white block that appears otherwise */
	background-image: url('images/transparent.png');
}




/* ------- Main Menus ------ */

div.menu {
	margin-top: 80px;
	height: 400px;
	background-image: url('images/MayGroupPhoto.jpg');
}

/* ------- Real Content ------ */

.realcontent {
	/* background-image: url('images/faintphoto.jpg'); */
	background-repeat: no-repeat;
	background-color: gray;
	margin-top: 80px;
	padding-bottom: 5px;
}


/* ------- index page ------ */

div.about {
	text-align: center;
}

/* ------- Gallery ------ */
 .custom {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 350px;
	text-align: center;
}

#spectrumnav { /* this is the vertical one on the individual pages */
	position: absolute;
	width: 80px;
	right: 10px;
	top: 20px;
	z-index: 20;
	border: 1px black solid;
}

/* these create the darkened images for the main horizontal spectrum nav
the background images are replaced on hover for each section */

div#spectrumnavmain{
	margin: 0px 16px 0px 16px;
	padding: 30px;
	background: transparent url(images/Gallery-Spectrum.jpg) top left no-repeat;
	background-position: 0px 30px;
	height: 223px;
	width: 768px;
	position: relative;
}

div#spectrumnavmain a {
	position: absolute;
	height: 223px;
	width: 110px;
	top: 30px;
	text-decoration: none;
}

div#spectrumnavmain a i {
	visibility: hidden;
}

/* these describe the clickable area on top of the images */
a#lush { left: 0px; }
a#fresh { left: 111px; }
a#playful { left: 222px; }
a#diva { left: 329px; }
a#eclectic { left: 439px; }
a#femme { left: 549px; }
a#joy { left: 658px; }

a#lush:hover { background-image: url(images/lushblur.jpg); }
a#fresh:hover { background-image: url(images/freshblur.jpg); }
a#playful:hover { background-image: url(images/playfulblur.jpg); }
a#diva:hover { background-image: url(images/divablur.jpg); }
a#eclectic:hover { background-image: url(images/eclecticblur.jpg); }
a#femme:hover { background-image: url(images/femmeblur.jpg); }
a#joy:hover { background-image: url(images/joyblur.jpg); }

div#memberlogin {
	margin: 20px;
}

div#memberlogin a {
	font-size: 120%;
	color: black;
}

/* ------- Gallery ------ */

.customwedding {
	position: absolute;
	top: 50px;
	width: 300px;
	text-align: center;
}

/* ------- Elopement Packages ------ */

.elope {
	height: 310px; 
}

.rightpic {
	float: right;
	padding: 10px;
}


/* ------- Links ------ */

table {
	border-color: #373737;
	border-width: 1px;
	border-style: outset;
	margin-left: auto;
	margin-right: auto;
}

th, td {
	border-color: #373737;
	border-width: 1px;
	border-style: inset;
	padding: 5px; 
	text-align: left;
}
 
td {
	padding: 5px 5px 5px 10px;
}

th {
	font-size: 150%;
	text-align: center;
}

/* ------- press page ------ */

div ul.presspage li {
	height: 48px;
}

div ul.presspage li a {
	font-family: Arial;
	font-weight: bold;
	color: #330;	
}

li.pressli {
	font-family: 'Times New Roman', serif;
	font-size: 120%;
}

ul.indented {
	list-style-type: none;
}

ul.indented li {
	padding-left: 10px;
}

/* ------- Member login page ------ */

#login {
	position: absolute;
	top: 200px;
	left: 10px;
	width: 350px;
	text-align: center;
}

#login a {
	font-size: 200%;
	color: black;
}

#username {
	margin: 10px;
}

/* ------- Vertical Alignment Stuff ------ */

.downabit {
	padding-top: 40px;
}

.downatad { /* for tables rather than divs */
	margin-top: 40px;
}

div.shorty {
	height: 495px;
}

/* ------- footer ------ */

div.footer {
	position: fixed;
	z-index: 40; /* greater than spectrumnav */
	bottom: 0;
	width: 700px;
	color: gray;
	background-color: #666666;
	height: 60px;
	text-align: right;
	font-family: 'century gothic';
	font-weight: bold;
	font-size: 90%;
	line-height: 130%;
	padding-top: 4px;
	padding-right: 100px;
}

img#footeraddress {
	margin-top: -5px;
}

