/*The CSS style sheet for StyroDigita, developed by the owner - Kannika Styron*/

/*FOR MAIN AREA*/ 

/*Configure main section for all pages having padding, zero margin, and dark background*/
main {padding: 8px 30px 10px 40px;
	margin-top: 0;
	background-color: #333333;}
main#justify p {text-align: justify;}
.list { list-style-position: inside; }
main a { text-decoration: none;}

/*Configure link, visited, and hover pseudo-classes for main links*/
main a:link { color: #eaeaea;
			text-decoration: underline;}
main a:visited { color: #eaeaea;
				font-weight: bold;
				text-decoration: underline;}
main a:hover { color: #eaeaea;
			font-weight: bold;
			text-decoration: none;}

/*Configure padding on home page, so the photo displayed in full*/ 
#edge {padding: 0 0 10px 0;}

/*Configure image as a home page background, how if use a smaller photo*/
#homeimg {background-image: url(images/deco/poppy99.jpg);
		 background-repeat: no-repeat;
		 background-position: center;
		background-size: cover;
		width: 100%;
		height: 650px;}
		
/*photo info for home page*/
#photoinfo	{ color: #eaeaea;
	   		font-size: .83em;
			font-style: italic;
			text-align: center;
			padding-top: 8px;}

/*Configure main content on home page; 
also get rid of margin of <p>, for image display only*/		
#homeinfo { font-size: 1.2em;
			color: #000000;
			margin-left: auto;
			margin-right: auto;
			margin-top: 0;
			padding-top: 20px;
			width: 80%;
			text-align: justify;}
/*Left padding for Facebook	link*/
#leftpadding {padding-left: 20px;}
/*Configure no underline of FB link*/
#leftpadding a { text-decoration: none;
					font-size: .90em;}
/*Configure link, visited, and hover pseudo-classes for FB link*/
#leftpadding a:link { color: #ffffff;
					  background-color: #4c4cb7;
					  padding: 3px;}
#leftpadding a:visited { color: #ffffff;
						background-color: #4c4cb7;
						padding: 3px;}
#leftpadding a:hover { color: #ffffff;
					  background-color: #4c4cb7;
						padding: 3px;}
						
/*Left padding2 for Instagram link*/
#leftpadding2 {padding-left: 5px;}
/*Configure no underline of ig link*/
#leftpadding2 a { text-decoration: none;
				  font-size: .90em;
				/*font-family: papyrus, Arial, Verdana;*/}
/*Configure link, visited, and hover pseudo-classes for ig link*/
#leftpadding2 a:link { color: #000000;
					  background-color: #ffffff;
					  padding: 2px;}
#leftpadding2 a:visited { color: #000000;
						background-color: #ffffff;
						padding: 2px;}
#leftpadding2 a:hover { color: #000000;
					  background-color: #ffffff;
						padding: 2px;}
/*Configure slogan on home page*/
#slogan1 {font-weight: bold;
		 font-size: 1.1em;
	     text-align: center;
		font-family: papyrus, Arial, Verdana;
		font-style: italic;}
/*Configure slogan on about us page*/
#slogan2 {font-weight: bold;
		font-size: 1.05em;
		font-family: papyrus, Arial, Verdana;
		font-style: italic;}

/*find out*/		
.center {text-align: center;}

/*headings in main area*/	
h2 {font-size: 1.2em;
	border-bottom: 2px solid #c4c4c4;
	text-shadow: 3px 3px 3px #000000;
	text-transform: uppercase;
	color: #c4c4c4;
	padding-bottom: 4px;}

/*Sub-heading*/
h3 {/*background-color: #504f4f;*/
	border-bottom: 3px solid #504f4f;
	padding: 5px;
	font-weight: normal;
	font-size: 1.1em;
	text-shadow: 3px 3px 3px #000000;
	text-transform: uppercase;}

/*GALLERY, 
preview version*/
.gallery {position: relative;
		 text-align: center;}
/*Add big padding to away form preview on the right*/
#padding1 {padding-bottom: 350px;}
#padding2 {padding-bottom: 360px;}
#padding3 {padding-bottom: 370px;}
/*Solve error of padding1 duplication on recent page*/
#padding4 {padding-bottom: 350px;}
/*default preview on the right column*/
figure {position: absolute;
        left: 300px;
		text-align: center;
		opacity: .25;
		margin-top: 0;}
/*thumbnails at Left column*/
.gallery ul {width: 300px;
			list-style-type: none;}
.gallery li {display: inline;
			float: left;
			padding: 10px;}
.gallery img {border-style: none;}
.gallery a {text-decoration: none;}
/*Not display the preview on the right when not hovered*/
.gallery span {position: absolute;
					left: -1000px;
					opacity: 0;}
/*Display 2s ease-in-out when hovered*/
.gallery a:hover span {position: absolute;
						top: 0;
						left:340px;
						text-align:center;
						opacity: 1;
						color: #eaeaea;
						font-weight: normal;
						transition: opacity 2s ease-in-out;
						font-size: .83em;
						font-style: italic;}
.gallery a:hover span img {padding-bottom: 5px;}

/*GALLERY 2, 
just normal flow of inline-block of each li, mostly for archives*/
#gallery2 {text-align: center;}
#gallery2 ul {list-style-type: none;}
#gallery2 li {display: inline-block;
				width: 225px;
				padding: 10px;
				margin: 10px;
				background-color: #eaeaea;
				text-align: center;
				font-style: italic;
				font-size: .90em;}
#gallery2 img {border-style: none;}
/*Overwrite <a> from main - to display normal text*/
#gallery2 a {text-decoration: none;
				color: #000000;
				font-weight: normal;}
				
/*GALLERY 3, 
just normal flow of block of each li on main gallery page*/
#gallery3 {margin-left: auto; 
		  margin-right: auto;
		  width: 70%;}
#gallery3 ul {list-style-type: none;}
#gallery3 li {display: block;
			width: 530px;
			padding: 10px 0 15px 0;
			margin: 10px 0 10px 0;
			text-align: center;
			font-size: .83em;
			font-style: italic;}
#gallery3 img {border-style: none;
				margin: 5px;}


/*clear floats of photos*/							
.clearboth {clear: both;}

/*italic font when needed*/
.italic {font-style: italic;
		font-size: .90em;
		padding-bottom: 10px;}
.floatleft {float: left;
			margin: 0 20px 10px 15px;}
.floatright {float: right;
			margin: 0 15px 20px 20px;}
.clearpreview {margin-bottom: 80px;}
#backtop {text-align: right;
			padding: 0 20px 5px 20px;
			margin-top: 0;}

/*For businesscard image on Services page*/
#right {padding-right: 85px;
		padding-left: 25px;}

/*Form*/
fieldset { width: 1000px;
border: 2px solid #ff0000;
padding: 10px 10px 10px 20px;
margin-bottom: 10px;
margin-left: auto; 
		margin-right: auto; 
		width: 80%; }
legend { text-shadow: 3px 3px 3px #000000;
		font-size: 1.3em;
		font-style: italic;
		color: #ffffff; }
label { float: left;
	display: block;
	text-align: right;
	width: 6.5em;
	padding-right: 5px;}
 /*For contact.php*/ 
input, textarea { margin-bottom: 1.5em; 
             display: block;}
#mySubmit {margin-left: 8.5em;
			margin-right: 50px;
			font-weight: bold;
			padding: 5px;
			font-size: 0.80em;
			letter-spacing: 0.2em;
			float: left;}
			
/*Configure refreshing link on contact page for front&back end purpose*/	
#refresh {font-size: .80em;
vertical-align: sub;}
/*contact.php*/
.red {color: #ff0000;
font-weight: 600;
font-size: 1.5em;}	
.thanks {font-size: 1.4em;
text-shadow: 1px 1px 1px #000000;
font-weight: 600;
color: #00b74a;}


/*Configure TABLES for price*/
table {border: 2px dotted #595959; 
		border-collapse: collapse;
		width: 670px;}
tr, td, th {border: 2px dotted #595959;
		padding: 0.3em 0.5em;}
th { padding: 0.5em;
	background-color: #404040;}
dt {font-weight: bold;}
.tablecaption {font-size: 1.1em;
			font-style: italic;
			padding-bottom: 0.5em;
			text-shadow: 3px 3px 3px #000000;}
.italic2 {font-style: italic;
			vertical-align: top;}
.center {text-align: center;}
.width {width: 130px;}
.widthprice{width: 90px;}

.darkred {background-color: #504f4f;
		 width: 125px;
		 padding: 10px;
		 text-align: center;}
.darkred a:link { 
			font-weight: bold;
			text-decoration: none;}
.darkred a:hover {text-decoration: underline;}
.darkred a:visited {font-weight: bold;
				text-decoration: none;}
				
/*For tables on price page only*/
#pricepadding {padding-left: 50px;}
		
/*For payment button on payment page*/
#paynow {margin-left: 40px;
		padding-top: 10px;
		text-align: center;
		color: #000000;
		background-color: #ffffff;
		width: 420px;
		font-size: 1em;
		font-weight: bold;
		box-shadow: 7px 7px 7px #000000;}
#paynow form {margin-left: 100px;
			margin-top: 30px;}
	
/*For testimonials*/	
blockquote {font-style: italic;}
.tab {margin-left: 50px;}