@import url(reset.css);
@import url(http://fonts.googleapis.com/css?family=Walter+Turncoat);

/* Styling for Background color */

body
{
	background-color: #111111;
	font-family: 'Walter Turncoat', cursive;
	font-size: 16px;
	color: #999;
	height: 100%;
	line-height: 1.5;
}


#wrap
{
	width: 960px;
	min-height: 100%;
	margin: 0 auto;	
}


/* Styling for custom header */
#header
{
	height: 180px;
	margin: 0 auto;
	background: url(../images/Robb_Mirsky_Header_2.jpg) no-repeat;
}

	h1 span
	{
		display: none;
	}


/* Styling for Background image */
#background
{
	width: 960px;
	height: 600px; 
	margin: 0 auto;
	z-index: -100;
	background: url(../images/Robb_BG_WORKING_Final.jpg);
}


/* Main Home Page Welcome Image */
#main
{
	width: 500px;
	height: 500px;
	margin: 0 auto;
	margin-top: 50px;
	background: url(../images/main.jpg);
	/* CSS 3 styling starts below (drop shadow) */
	-webkit-box-shadow: 0px 10px 10px 0px #000; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 0px 10px 10px 0px #000; /* FF3.5 - 3.6 */
    box-shadow: 0px 10px 10px 0px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */	
}

	

/* Position of Nav bar */
#bar
{
	position: relative;
	height: 56px; 
	width: 100%;
	margin: 0 auto;
	margin-top: 10px;
}

	
/* Navigation Bar Styling */
#nav 
{
	float: left; /* aligns the nave bar to the right of the page */
	margin-left: 25px;
	position: relative;
}

	#nav li
	{
		float: left; /* makes the list horizontal rather than vertical */
		margin-right: 0; /* makes the spacing between the links */
	}
	
	
/* Styling for the Navigation Buttons, with CSS Film Strip */
a.home
{
	display: block;
	width: 180px;	
	height: 54px;
	background: url(../images/Home_Button_2.jpg);
}

	a.home span /* removes the html text */
	{
		display: none;	
	}
	
		a.home:hover /* mouse cursor is over the button */
		{
			background-position: -180px 0; /* this moves the button image over one whole space on the image */
		}

a.about
{
	display: block;
	width: 180px;	
	height: 54px;
	background: url(../images/About_Button_2.jpg);
}

	a.about span /* removes the html text */
	{
		display: none;	
	}
	
		a.about:hover /* mouse cursor is over the button */
		{
			background-position: -180px 0; /* this moves the button image over one whole space on the image */
		}

a.gallery
{
	display: block;
	width: 180px;	
	height: 54px;
	background: url(../images/Gallery_Button_2.jpg);
}

	a.gallery span /* removes the html text */
	{
		display: none;	
	}
		
		a.gallery:hover /* mouse cursor is over the button */
		{
			background-position: -180px 0; /* this moves the button image over one whole space on the image */
		}

a.music
{
	display: block;
	width: 180px;	
	height: 54px;
	background: url(../images/Music_Button_2.jpg);
}

	a.music span /* removes the html text */
	{
		display: none;	
	}
	
		a.music:hover /* mouse cursor is over the button */
		{
			background-position: -180px 0; /* this moves the button image over one whole space on the image */
		}

a.contact
{
	display: block;
	width: 180px;	
	height: 54px;
	background: url(../images/Contact_Button_2.jpg);
}

	a.contact span /* removes the html text */
	{
		display: none;	
	}
	
		a.contact:hover /* mouse cursor is over the button */
		{
			background-position: -180px 0; /* this moves the button image over one whole space on the image */
		}
	 

/* About Page Styling */
#column1
{
	width: 500px;
	height: 500px;
	background: rgba(25,25,25,0.625);
	margin: 0 auto;
	margin-top: 50px;
	/* CSS 3 styling starts below (drop shadow) */
	-webkit-box-shadow: 0px 10px 10px 0px #000; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 0px 10px 10px 0px #000; /* FF3.5 - 3.6 */
    box-shadow: 0px 10px 10px 0px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

	p.about
	{
		font-size: 18px;
		padding: 20px;
	}
	
		a.link
		{
			text-decoration: none;
			color: #666;	
		}


/* Gallery Styling*/
#gallery
{
	height: 500px;
	width: 400px;
	background: rgba(25,25,25,0.625);
	margin: 0 auto;
	margin-top: 50px;
	position: relative;
	/* CSS 3 styling starts below (drop shadow) */
	-webkit-box-shadow: 0px 10px 10px 0px #000; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 0px 10px 10px 0px #000; /* FF3.5 - 3.6 */
    box-shadow: 0px 10px 10px 0px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

	#gallery li
	{
		margin-bottom: 20px;
		margin-top: 20px;
	}
		
			gallery li a img
			{
				display: block;
			}
			
/* Positioning of the Illustration Gallery */
#gallery1
{
	position:absolute;
	bottom: 0;
	left: 70px;
}

/* Positioning of the Posters Gallery */
#gallery2
{
	position:absolute;
	bottom: 0;
	left: 170px;
}

/* Positioning of the Comics Gallery */
#gallery3
{
	position:absolute;
	bottom: 0;
	left: 270px;
}



/* Music Styling */
#music
{
	width: 500px;
	height: 500px;
	background: rgba(25,25,25,0.625);
	margin: 0 auto;
	margin-top: 50px;
	text-align: center;
	/* CSS 3 styling starts below (drop shadow) */
	-webkit-box-shadow: 0px 10px 10px 0px #000; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 0px 10px 10px 0px #000; /* FF3.5 - 3.6 */
    box-shadow: 0px 10px 10px 0px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

	h1
	{
		font-size: 19px;
		padding: 20px;
		margin-top: 10px;	
	}
	

		a.musiclink
		{
			text-decoration: none;
			color: #666;
			font-size: 18px;
		}
	
			.pic
			{
				width: 296px;
				height: 300px;
				background: url(../images/Gallery/full%20size/over_time_cover.jpg);
				margin: 0 auto;		
				margin-top: 20px;
			}


/* Contact Styling */
#contact
{
	width: 600px;
	height: 500px;
	margin: 0 auto;	
	margin-top: 20px;
	padding-top: 10px;
}

form
{
	width: 400px;
	margin: 0 auto; 
	margin-top: 120px;
}
	
	form legend
	{
		font-weight: bold;
		font-size: 150%;	
	}
	
	form ol
	{
		margin-top: 40px;
	}
	
	form ol li
	{
		margin-bottom: 20px;
	}
	
	form label
	{
		display: inline-block;
		width: 120px;
		vertical-align: top;
	}
	
	form input, form textarea
	{
		width: 400px;
		background: rgba(25,25,25,0.625);
		color: #DDD;
		border: none;
	}
	
	input[type=submit]
	{
		width: auto;
		float: right;
		background: rgba(25,25,25,0.50);
		margin-right: 10px;	
		color: #DDD;		
	}
	
	form :focus
	{
		background: rgba(255,255,255,0.25);	
		color: #111111; 
	}