/* Douglas Gray fluid css layout */

/* TAGS */
body 	{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:70%; margin:0; padding:0;}
h1 		{font-size:150%; color:#09d; background-color:#fff; margin:0 0 5px 0; padding:5px 13px;}
p 		{font-size:100%; color:#000; background-color:#fff; margin:0; padding:0 13px 5px 13px;}
img		{margin:10px 0;}
a		{color:#09d; background-color:#fff; text-decoration:underline;}
a:hover	{color:#09d; background-color:#fff; text-decoration:line-through;}
a img	{border:none;}
form 	{margin:5px 13px;}
fieldset {border:0;}
label {display:block; padding:.2em; overflow:hidden;}
label span {display:block; width:7em; float:left; text-align:right; margin-right:1em; font-size:1em; font-weight:bold;}
label input, label textarea {font:1em Verdana, Arial, Helvetica, sans-serif; width:24em;}
input#selfCC {margin-left:8em; width:auto;}
input#send {margin-left:27.6em;}
fieldset > input#send {margin-left:23.4em;}

/* CLASSES */
.fr {float:right;}
.whiteBackground {background-color:#fff;}
.titleBox {width:auto;}
.cb {clear:both;}

/* MAIN STRUCTURE */
#cameramanHeader {width:1000px; text-align:center; border-bottom:1px solid #000; margin:5px auto;}
#cameramanHeader p {font:300% "arial black"; color:#09d; margin:0; padding:.5em 6.6em .4em .5em !important; padding:.5em 6.6em 0 .5em; height:32px; background:url("images/h2-personal-portofolio.gif") center no-repeat;}
#container {position:relative; margin:auto; height:445px; background:#000 url('images/sfum-right.jpg') repeat-y right; width:1000px; border:1px solid black;}
#container #sfumLeft {background:url('images/sfum-left.jpg') repeat-y left;}
#container #sfumLeft #lens {position:relative; height:445px; background:url('images/lens.jpg') no-repeat bottom right;}
#container #sfumLeft #lens #mainContainer {width:1000px;}
#footer {width:1000px; margin:5px auto; border-top:1px solid black; text-align:center;}
#footer p {font-size:90%; margin-top:5px; font-weight:normal; color:black;}
	
	/* LEFT (#cameramanPhotos) */
	#cameramanPhotos {width:270px; height:445px; float:left; color:white; text-align:right; vertical-align:top;}
	#cameramanPhotos h3 {background-color:transparent; color:#fff;}
	#cameramanPhotos .thumbnails {height:440px; overflow:auto; width:220px; text-align:center;}
	#cameramanPhotos .thumbnails p {background-color:transparent; color:white; margin-top:15px;}
	#cameramanPhotos .thumbnails p img {width:120px; height:70px; display:block; margin:5px auto;}
	#cameramanPhotos .thumbnails a {color:#09d; font-weight:bold; text-align:center; background-color:transparent; text-decoration:none;}
	#cameramanPhotos .thumbnails a:hover {color:#fff; font-weight:bold; background-color:transparent; text-decoration:none;}
	
	/* MIDDLE (#cameramanContent) */
	#cameramanContent {width:500px; height:430px; float:left; padding:0 8px; margin:10px; border-left:1px solid white; border-right:1px solid white; text-align:left;}
	#cameramanContent #lightingCameraman {text-align:right; overflow:hidden; display:inline-block; margin:0 0 5px 0; padding:0; background:none;}
	#cameramanContent > #lightingCameraman {display:block;}
	#cameramanContent #lightingCameraman strong {background-color:#fff; float:right; font-size:150%; color:#09d; padding:2px 5px; }
	#cameramanContent #content {clear:right; float:left; height:314px; overflow:auto; background-color:white; width:100%; margin-bottom:5px;}
	#cameramanContent #content h1.showreels {padding-bottom:0;}
	#cameramanContent #content .movie {text-align:center; background-color:white;}
	#cameramanContent #content #formSent {text-align:center; color:green; font-weight:bold;}
	#cameramanContent #cameramanContacts {clear:left;}
	#cameramanContent #cameramanContacts h4 {font-size:130%; margin:0 0 5px 0; padding:0; overflow:hidden; display:inline-block;}
	#cameramanContent #cameramanContacts > h4 {display:block;}
	#cameramanContent #cameramanContacts h4 span {float:left; color:#09d; background-color:#fff; padding:2px 5px;}
	#cameramanContent #cameramanContacts p {clear:left; width:auto; padding-top:4px; line-height:1.3em;}
	#cameramanContent #cameramanContacts #contactLeft {border-right:1px solid black; float:left; width:50%; padding-right:13px; margin-right:13px;}
	
	/* RIGHT (#menu) */
	#cameramanMenu {height:445px; float:left; color:#09d; text-align:left;}
	#cameramanMenu ul {margin:5px 0 15px 0; padding:0; list-style-type:none;}
	#cameramanMenu li {margin:0; padding:7px 3px 3px 0; font-size:130%; font-weight:bold;}
	#cameramanMenu ul ul {margin:5px 0 0 0; padding:0;}
	#cameramanMenu ul ul li {margin:0; padding:5px 3px 3px 0; font-size:80%;}
	#cameramanMenu ul ul li a {font-weight:bold; padding-left:10px; padding-right:0; background:transparent url('images/right-arrow-blue.gif') center left no-repeat;}
	#cameramanMenu a {padding:2px; margin:0; text-decoration:none; background-color:transparent; color:#09d;}
	#cameramanMenu a:hover {background-color:#fff;}
	#cameramanMenu a#current {background-color:#fff; cursor:default;}
	#cameramanMenu a#subCurrent {color:#fff; cursor:default; background:transparent url('images/right-arrow-white.gif') center left no-repeat;}
	#cameramanMenu a#subCurrent:hover {background-color:transparent; cursor:default;}