/*   
	IT-270 Web Design
	Final Project
	
	Verified [X]	

	Main Layout 
	Author: Dan Bevan
	Date:   11/6/2015

	Filename:         layout. css
	Supporting files:  modernizr-1.5.js
*/


/*Layout assistance
*{
	border: 1px solid red;
}*/


/* Body styles 
--------------------------------------------------------------------------------*/
body {
   background-image:  url(otherImages/canvas.jpg);
   margin: 0px auto;
   width: 1000px;
   height: 100%;
  
}


/* Header styles 
-------------------------------------------------------------------*/
#header{

	background: gray;
	background: rgba(0, 0, 0, 0.9);
	margin-bottom: 20px;
	height: 140px;
	width: 100%;
	color: white;	
}
header h1 {
	text-align: right;
	display: block;
	font-size: 120px;  
	width: 100%;
	position: relative;
	top: -10px;
}


/* Main section styles 
-------------------------------------------------------------------------------------*/
section#main {
   background: rgba(154, 154, 154, 0.8);
   width: 1000px;
   height: 100%;
   border: 1px solid rgb(18, 15, 22);
}
section {
	width: 800px;
	position: relative;
	float: right;
	color: black;
	font-size: 20px;
	height: 100%;
}
section h2{
	font-weight: bold;
	color: blue;
	margin: 20px;
	text-align: center;
	font-size: 2em;
}
#description{
	text-align:center;
}
#wc{
	font-weight: bold;
}
p.homePage {
	float: left;
	width: 400px;
	margin: 20px;
	line-height: 25px;
}
section p{
	line-height: 25px;
}
ol#inside li{
	
	position: relative;

	font-weight: bold;
	list-style: circle;
	list-style-position: inside
}
#inside ul li{
	font-weight: normal;
	list-style-position: inside;
	text-indent: 20px;
}


/* Navigation Image Buttons Styles
Other styles embedded within pages --------------------------------------*/
#sideNav{	
	position: absolute;
	top: 0;
	width: 160px;
	float: left;
	background: gray;
	background: rgba(0, 0, 0, 0.9);
}


/*Styles for the Image section of the Gallery*/
#imgGallery figure {
	float: left;
}
#imgGallery figure img{
	width: 150px;
	height: 150px;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
}
#imgGallery figcaption {
	padding-bottom: 20px;
	text-align: center;
}
#imgGallery h3{
	clear: left;
	font-weight: bold;
	font-size: 24px;
}


/*Styles for the Video section of the Gallery*/
#vid1, #vid2, #vid3, #vid4{
	position: relative;
	left: 50px;
	float: left;	
	margin: 30px;
}


/*Styles for the Tools Table of the medium pages
------------------------------------------------------------------------------------*/
table.paintingTools {
	border: 1px solid black;
}
table.paintingTools img {
	
	height: 150px;
	width: 150px;
	margin-top: 10px;
}
table.paintingTools caption {
	margin: 10px;
	font-weight: bold;
	font-size: 28px;
	border-bottom: 2px solid blue;
}
table.paintingTools caption  p{
	margin: 10px;
	font-weight: normal;
	font-size: 18px;
}
table.paintingTools td{
	vertical-align: top;
	margin: 10px;
	font-weight: bold;
}
table.paintingTools p{	
	margin: 10px;
	font-weight: normal;
}
table.paintingTools li{
	margin: 10px;
	font-weight: normal;
}


/*Styles for the Techniques Table of the medium pages
------------------------------------------------------------------------------------*/
table.paintingTechniques {
	border: 1px solid black;
}
table.paintingTechniques img {
	height: 600px;
	width: 600px;
	margin: 50px;
	margin-left: 100px;
}
table.paintingTechniques caption {
	margin: 10px;
	font-weight: bold;
	font-size: 28px;
	border-bottom: 2px solid blue;
}
table.paintingTechniques caption  p{
	margin: 10px;
	font-weight: normal;
	font-size: 18px;
}
table.paintingTechniques td{
	vertical-align: top;
	margin: 10px;
	font-weight: bold;
}
table.paintingTechniques p{	
	margin: 10px;
	font-weight: normal;
}
table.paintingTechniques li{
	margin: 10px;
	font-weight: normal;
}


/*Styles for the Tips and Tricks Table of the medium pages
------------------------------------------------------------------------------------*/
table.paintingBrushes {
	border: 1px solid black;
	margin-bottom: 20px;
}
table.paintingBrushes img {
	
	height: 150px;
	width: 150px;
	margin-top: 10px;
}
table.paintingBrushes caption {
	margin: 10px;
	font-weight: bold;
	font-size: 28px;
	border-bottom: 2px solid blue;
}
table.paintingBrushes caption  p{
	margin: 10px;
	font-weight: normal;
	font-size: 18px;
}
table.paintingBrushes td{
	vertical-align: top;
	margin: 10px;
	font-weight: bold;
}
table.paintingBrushes p{	
	margin: 10px;
	font-weight: normal;
}
table.paintingBrushes li{
	margin: 10px;
	font-weight: normal;
}


/* Page footer styles 
-----------------------------------------------------------------------------------*/
footer {
	position: absolute;
	bottom: -30px;	
	background: rgba(154, 154, 154, 0.8);
	border-top: 1px solid rgb(18, 15, 22);
	padding-bottom: 5px;
	padding-top: 10px;	
	word-spacing: 5px;
	text-indent: 5px;
	text-align: center;
	width: 100%;
	height: 30px;
}