/* 
ToC
defaults
PopUp
Vertical/Horizontal Centering
Areas for Content
Tweaks
Fonts/Text
Forms
Layout
layout FOR VIDEO GALLERY
video gallery CONTENT AREAS
*/
/* --------- defaults  --------- */
* {/* zero margins and padding */
		margin: 0;
		padding: 0;
		}
Html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
body {/* set page background colour */
		/*background: #fff url(layout/main-background.png) no-repeat fixed center;*/
		}
/* ---------- POP UP for video gallery --------- */
#popupContainer {
	position: absolute;
	display: none;
	z-index: 1000;
	left: 160px;
	top: -40px;
}
#popup {
	border: 10px solid #F5F5F5;
	width: 590px;
	height: 400px;
}
#close { /* the CLOSE BUTTON */
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 1500;
	}	
/* ---------- Areas for content --------- */ 
		
.contentLeft {
	position: absolute;
	top: 25px;
	left: 45px;
	width: 439px;
	overflow: visible;
	/*border: 1px dotted red;*/
	}
		
.contentLeftLower {
	position: absolute;
	top: 255px;
	left: 45px;
	height: 75px;
	width: 439px;
	float: right;
	overflow: visible; 
	}	
	
.contentRight {
	position: absolute;
	top: 25px;
	left: 515px;
	height: 310px;
	width: 325px;
	overflow: visible;
	}
.arrows {
	float: right;
	width: 8px;
	height: 16px;
	margin: 2px;
	position: absolute;
	left: 850px;
	top: 300px;
	}
.arrows img { 
	margin: 5px;
	cursor: pointer;
	}
	
#left { /* left arrows */
	position: absolute;
	left: 380px;
	top: 300px;
	/*border: 1px dashed red;*/
	} 
			
#verticaldots { /* see our work only & contact us*/
	position: absolute;
	top: 10px;
	left: 410px;
	}

#back {
	margin-bottom: 10px;
	}
	
/* ---------- See Our Work Section Layout Tweaks --------- */
.SeeOurWork .contentLeft {
	top: 10px;
	width: 342px;
	}
.SeeOurWork .contentLeftLower {
	top: 190px;
	height: 145px;
	width: 340px;
	overflow: hidden;
	}
.SeeOurWork .contentRight {
	left: 425px;
	width: 450px;
	overflow: hidden;
	}		
/* ---------- OurServices Tweak for back button margins --------- */
.OurServices #back {
	margin-bottom: 5px;
	}
.OurServices .contentRight {
	margin-top: 5px;
	}
.OurServices .contentLeft {
	top: 5px;
	}
.OurServicesMain .contentLeft { 
	width: 500px;
	}	
		
	
/* ---------- Why You Love us Tweak (for scrolling page) --------- */
.WhyYouLoveUs .content{
	height: auto;
	overflow: hidden;	
	}
.WhyYouLoveUs .wrapper {
	top: 0px;
	min-height: 1500px;
	height: 1500px;
	}
/*.WhyYouLoveUs .horizontal {
	top: 0px;
	}*/		
/* ---------- Who We Love Tweak --------- */
.WhoWeLove .contentRight {
	width: 375px;
	left: 475px;
	overflow: hidden;
	}
.WhoWeLove .contentLeft {
	top: 50px;
	left: 75px;
	width: 340px;
	overflow: hidden;
/*  border: 1px solid black;*/
	}	
	
/* ---------- Contact US Section Layout Tweaks --------- */
.ContactUs .contentLeft {
	top: 50px;
	left: 75px;
	}
.ContactUs .contentLeftLower {
	top: 175px;
	left: 75px;
	height: 145px;
	width: 340px;
	overflow: hidden;
/*  border: 1px solid black;*/
	}
.ContactUs .contentRight {
	left: 500px;
	width: 375px;
	overflow: hidden;
/*	border: 1px solid blue; */
	text-align: center;
	}	
	
.ContactUs .contentLeftLower h2 {
	text-transform: none;
	}	

.ContactUs #verticaldots { /* see our work only*/
	position: absolute;
	top: 10px;
	left: 475px;
	}
	
.ContactUs iframe {
	/*  border: 1px solid red; *//
	}

		
/* ---------- Photo gallerylayout & navigations --------- */
.photoGallery .contentLeft {
	position: relative;
	top: 10px;
	left: 45px;
	width: 439px;
	height: 300px ;
	}
	
.photoGallery .contentLeftLower {
	position: absolute;
	top: 325px;
	left: 45px;
	width: 439px;
	height: 20px;
	overflow: visible;
	}
.photoGallery .content {
	overflow: visible;
	}
.photoGallery #prevPhoto {
	position: absolute;
	left: 10px;
	}	
.photoGallery #nextPhoto {
	position: absolute;
	right: 10px;
	}	
.photoGallery #back {
	position: relative;
	margin-bottom: 5px;
	}
/* ---------- Darkroom Tweak --------- */
#darkroom .contentLeft {
	width: 550px;
	top: 25px;
	text-align: justify;
		}
#darkroom #verticaldots {
	position: absolute;
	top: 10px;
	left: 610px;
	}
	
#darkroom .contentRight {
	position: relative;
	top: 20px;
	left: 625px;
	width: 250px;
	overflow: visible;
	}
	
#darkroom blockquote {
	text-align: justify;
	font-size: 85%;
	width: 425px;
	margin-left: 50px;
	margin-top: 10px;
	Margin-bottom: 10px;
	} 
.darkroomEnter .contentLeft {
	width: 340px;
	overflow: hidden;
	}
.darkroomEnter .contentRight {
	left: 425px;
	width: 410px;
	overflow: hidden;
	}
	
		
/* ---------- Fonts ---------- */
html {
		font-size: 100%;
		}
body {
	font: normal 10pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
	color: #666666;
	}	
	
a {/* default link style */
		color: #3399cc;
		}		
h1 {/* main heading */
		font: bold 18pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
		text-transform: lowercase;
		text-align: right;
		margin-right: 25px;
		position: relative;
		bottom: -3pt;
		color: #3399cc;
		}
.videoGallery h1 {
		font-size: 16pt;
		bottom: -4pt;
		}		
		
.normal { /*for Super8 capitalization*/
	text-transform: capitalize;
	}
h2 {
		font: 12pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
		text-align: center;
		text-transform: lowercase;
		margin-top: 8px;
		margin-bottom: 8px;
		color: #3399cc;
		}

h3 {
		font: bold italic 10pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-left: 45px;
		color: #000;
		}
h4 {
		font: bold 10pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
		margin: 5px;
		color: #3399cc;
		}		
		
p {
		font: 10pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
		margin-bottom: 0.8em;
		text-align: justify;
		}				
		
blockquote {
	font-size: 90%;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: dashed 1px #99CCFF; 
	border-bottom: dashed 1px #99CCFF; 
	margin: 15px auto;
	width: 345px;
	text-align: center;
	}
.SeeOurWorkMain blockquote {
	font-size: 105%;
	}
			
.contentLeft2 p {
		width: 345px;
		text-align: justify;
		postion: relative;
		margin-left: 45px;
		}
.bottomCurve p {
		font: 10pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
		color: #fff;
		text-align: right;
		margin: 0px 32px;
		position: relative;
		bottom: -15px;
		}		
		
.bottomCurve a {
		color: #fff;
		text-decoration: none;
		}
		
p.white {
		font: 11pt;	
		text-align: right;
		margin: 5px 32px;
		position: relative;
		}
p.white a {	
		color: #fff;
		text-decoration: none;
		}
	
		
.bottomCurve a:hover {
		text-decoration: underline;
		}
				
.copyright { 
	font: 8pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
	text-align: center;
	color: #999;
	width: 350px;
	position: relative;
	top: 40px;
	margin-left: 282px; 	
	}
	
.disclaimer {
	font-size: 85%;
	text-align: justify;
}	
/* ----------Images ---------- */
a img {/* remove borders from linked images */
		border: 0;
		}
		
#logo {
	Position: relative;
	top: 10px;
	left: 25px;
	}
.darkroom { /*enter darkroom image*/
	position: absolute;
	left: 50px;
	top: 5px;
	}
.center { /* simply4 logo */
	position: absolute;
	float: left;
	left: 379px;
	top: 10px;
	overflow: visible;
	}
	
	
/* ---------  FORMS --------- */
	
#loginField {
		width: 175px;
		border: 1px solid #666;
		background-color: #FFF;
		color: #666;
		font-size: 1.0em;
		padding: 1px;
		margin-top: 5px;
		margin-bottom: 25px;
		}
#loginSubmit {
		width: 75px;
		border: 1px solid #666;
		font-size: 1.0em;
		background-color: #3399cc;
		color: #FFF;
		margin-right: -10px;
		cursor: pointer;
		}
		
/*  --- Vertical / horizontal centering --------- */
.horizontal {
	width: 99%;
    height: 99%;
    /*float: left;*/
	}
	
.wrapper {/* site content container */
	width: 913px;
	height: 100%;
	min-height: 600px;
	margin: 0 auto;
	overflow: hidden; 
/*	border: 1pt solid blue; */
/*	background: #fff url(layout/main-background.png) no-repeat fixed center; */
	}	
		
		
/* ---------- Layout --------- */
						
.masthead {/* contains logo */
		height: 60px;
		width: 913px;
		position: relative;
		background: url(layout/main-background_02.png) no-repeat;
		}		
			
		
.titleContainer {/* space for text title*/
		height: 42px;
		width: 913px;
		background: #ADD8E6 url(layout/main-background_04.png) no-repeat;
	}	
		
.menu {
	width: 913px;
	height: 21px;
	background: #ADD8E6 url(layout/main-background_04b.png) repeat-y;
	margin: 0px;	
	}
.menu img {
	padding: 0px;
	margin: 0px;
	border: 0px;
	}
.topCurve {
	height: 11px;
	width: 913px;
	min-height: ;
	padding: 0px;
	position: relative;
	background: #ffffff url(layout/main-background_14.png) no-repeat;
	}
		
.content {/* content container */
	height: 350px;
	width: 913px;
	position: relative;
	overflow: visible;
	background: #fff url(layout/main-background_15.png) repeat-y;
	}
.bottomCurve {
	width: 913px;
	height: 48px;
	position: relative;
	background: #ADD8E6 url(layout/main-background_17.png) no-repeat;
	}	
.bottomDarkroom {
	width: 913px;
	height: 100%;
	background: url(layout/main-background_18.png) repeat-y;
	position: relative;
	overflow: visible;
/*	border: 1pt solid green;*/
	}	
	
	
/*----------- layout FOR VIDEO GALLERY --------- */
.videoGallery { 
	background: #fff; 
	}
.videoGallery .wrapper {/* site content container */
	width: 518px;
	top: 0px;
	height: 100%;
	overflow: hidden; 
	background-color: #ffffff;
	}
.videoGallery .masthead {/* add border to masthead */
		height: 52;
		width: 519;
		background: url(layout/movieviewscreen_02en.png) no-repeat;
		}		
		
.videoGallery .titleContainer {/* space for title*/
		background: url(layout/movieviewscreen_06.png) no-repeat;
		height: 40px;
		width: 518px;
	}
.videoGallery .content {/* content container */
	height: 270px;
	width: 518px;
	position: relative;
	overflow: visible;
	background: #fff url(layout/movieviewscreen_07.png) repeat-y;
	}
	
.videoGallery .bottomCurve {
	width: 913px;
	height: 26px;
	position: relative;
	background: #ffffff url(layout/movieviewscreen_09.png) no-repeat;
	}	
.videoGallery .bottomDarkroom {
	width: 913px;
	height: 100%;
	background: #ffffff url(layout/movieviewscreen_10.png) repeat;
	position: relative;
	}
/* video gallery CONTENT AREAS */
	
.videoGallery .contentLeft {
	float: left;
	position: absolute;
	top: 10px;
	left: 25px;
	}
		
.videoGallery .contentRight {
	float: left;
	position: absolute;
	width: 145px;
	top: 10px;
	left: 350px;
	}
.videoGallery .contentRight p {
	text-align: left;
	}
.videoGallery .contentRightlower {
	float: right;
	position: absolute;
	width: 200px;
	bottom: 20px;
	left: 305px;
	}
.videoGallery table { /* for video */
	width: 95%;
	height: 260px;
	text-align: center;
	valign: middle;
	}
	
.videoGallery .contentAll {
	float: left;
	position: relative;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: -15px;
	}
.videoGallery .arrows {
	float: right;
	width: 8px;
	height: 16px;
	margin: 2px;
	position: relative;
	right: 5px;
	bottom: 25px;
	border: 1pt solid red;
	}
#movieFormat {
	text-align: right;
	position: absolute;
	font: 10pt "Century Gothic", "Century Gothic", Trebuchet, Verdana, Arial, sans-serif;
	bottom: 0px;
	height: 25px;
	}