/*--------------------------------------------------------------------
* This file is the main CSS file for photoGenoa. It controls layout and
* includes default colors, borders, etc.
*
* YOU SHOULD NEVER MODIFY THIS FILE!
*
* To set custom colors, borders, sizes and so on, modify the file 
* 'skin.css' which will override the appropriate settings in this file.
*
* You may also apply a different jQuery UI theme to modify the look and feel
* of sliders, buttons, dialog boxes and so on.
* -------------------------------------------------------------------- */



/* Common (root) styles:
--------------------------------------------------------------------------------------------- */

	#photoBin { width: 1000px; margin: 0; }

	/* Photo layout styles shared by index.php & gallery.php */
			.thumbs, .thumbs-vertical { 
				height: 100%; /*forces text below horizontally-oriented images. Neat hack. */
				width: 100%;
			}

			.thumbs-vertical {
				text-align: center; /*Don't declare this style for horizontal photos or Firefox flips the hell out.*/
			}

			.thumbs img { 
				position: absolute; /*forces horizontal images to bottom of .photo-wrapper*/
				bottom: 0px;
			}

			.thumbs a img, .thumbs-vertical a img { border: 1px solid #000000; } /*Borders cause images to exceed dimensions of containing DIVs. Adjust IMG height/width % in gallery.php if changed.*/

			.album-title { padding-top: 2px; }
			.album-wrapper-vertical .album-title { text-align: center; }




/* Index Page
------------------------------------------------------------------------------------------------------------------------ */

	#outdated-browser {  /* Used with ie6 script to kill photo gallery on ie6 */
		width: 540px;
		padding: 40px 0px 300px 0px;
		margin: 0 auto;
	}
	#outdated-browser img {	margin-top: 40px; margin-right: 10px; }

	#album-index-page-toolbar {	width: 100%; }	
		#album-index-page-title {
			float: left;
			width: 420px;
			text-align: left;
		}	
		#album-index-page-upload-button { float: right; }

	.album-wrapper { 
		float: left;
		width: 152px;
		height: 152px;
		position: relative;
		top: 0px;
		left: 0px;
		margin-top: 20px; 
		margin-right: 20px; 
		margin-bottom: 40px; 
		margin-left: 20px;
		display: inline; /*Hack to fix IE6 double-margins float bug*/
	}



/* Grid + Slideshow Views: COMMON STYLES 
------------------------------------------------------------------------------------------------------------------- */

	#album-toolbar { width: 100%; margin: 20px 0px 25px 0px; }
		.album-toolbar-label { margin-bottom: 5px; font-size: 10px; text-align: center; }
		#back-link-container { float: left; }
		#layout-select-buttons-container { margin-left: 40px; }

		#zoom-slider-container {
			float: right; 
			width: 249px; 
			text-align: center;
		}
			#zoom-slider-container p { margin-bottom: 15px; }

		#small-side { 
			width: 20px; 
			height: 20px; 
			position: relative;
			top: -5px;
			margin-right: 7px;
			float: left;
			display: inline; /* hack to fix double margins float bug in IE6 */
		}

		#slider { 
			width: 192px; 
			height: 6px;
			position: relative; /* important: allows for handle to be positioned absolutely relative to this element */
			float: left;
		}

		#slider .ui-slider-range { background: #525252; }  /* Default color for slider range */

		#large-side {
			width: 20px; 
			height: 20px; 
			position: relative;
			top: -5px;
			margin-left: 7px;
			float: left;
			display: inline; /* hack to fix double margins float bug in IE6 */
		}

		#slider-handle {
			height: 14px;
			position: absolute;
			top: -5px;
			left: 0px; /* Needed to make handle appear in correct spot in IE7 */
			cursor: pointer;
		}



/* Grid View Specific Styles
-------------------------------------------------------------------------------------------------------------------------- */
	
	#grid-view-instructions { float: left; margin-left: 20px; width: 300px; font-size: 10px; }
		#grid-view-instructions p { padding-top: 25px; }

	.photo-wrapper { 
		float: left;
		width: 152px;
		height: 152px;
		position: relative; /*Allows us to use absolute positioning below, relative to this element */
		top: 0px;
		left: 0px;
		margin-top: 10px; 
		margin-right: 20px; 
		margin-bottom: 20px; 
		margin-left: 20px;
		display: inline; /*Hack to fix IE6 double-margins float bug*/
	}

	.thumbText {
		text-align: center;
		font-size: 10px;
		padding-top: 2px;
	}
	
	
	
/* Slideshow View Specific Styles
----------------------------------------------------------------------------------------------------------------------- */	
	
	#album-toolbar #slideshow-control-buttons-container { float: left; margin-left: 80px; }
	
	#slideshow-wrapper { width: 80%; height: auto; margin: 0 auto; }

	#slideshow-image-container {
		width: 100%;
		height: 500px;   /* placeholder value. Set at runtime by viewController-slideshow.js */
		overflow: hidden;
		margin: 5px auto 0px auto;
		text-align: center;
	}
	
	#slideshow-next-button, #slideshow-previous-button { width: 60px; float: left; }
	#slideshow-previous-button { margin-left: 10px; }
	
	#slideshow-photo-caption { text-align: center; width: 100% }




/* Upload View Specific Styles
----------------------------------------------------------------------------------------------------------------------- */

	#no-javascript-error { width: 300px; margin: 0 auto; }
	#uploads-page-toolbar { width: 100%; }

	#upload-email-wrapper {  
		width: 400px;  
		margin: 0 auto;
	}
		#email-input { width: 300px; float: left; font-size: 1.3em; margin-top: 0; }
		#email-go-button { float: left; margin-left: 10px; }
	
	.upload-divider { width: 100%; border-bottom: 1px solid #525252; }
		.ud-top { padding-bottom: 7px; }

	#upload-instructions { 
		width: 400px;
		padding: 20px;
		margin: 0 auto;
		font-size: 10px;	
	}
		#upload-instructions p { margin-bottom: 0 }

	#caption-instructions { display: none; }

	#upload-go-buttons-wrapper { 
		width: 400px; 
		float: right; 
		margin-top: 8px;
	}
		#upload-terms-checkbox-form { float: right; text-align: right; margin-bottom: 7px; }
		#upload-start, #clear-uploads { float: right; margin-left: 7px; }
	
	#upload-rules-dialog, .error-dialog { display: none; }
		#upload-rules-dialog li { margin: 10px 10px 10px 10px; font-size: 11px; }
		.error-dialog p { margin-top: 10px; }
		
		
	#upload-chooser { width: 70%; display: none; margin: 0px auto 0px auto; padding-top: 30px; }


		/*Uploadify styles*/
		.fileUploadQueueItem {
			font: 11px Verdana, Geneva, sans-serif;
			background-color: #222222;
			border: 3px solid #444444;
			margin: 6px auto 6px auto;
			padding: 10px;
			width: 85%;
		}
		.fileUploadQueueItem .cancel {
			float: right;
		}
		.fileUploadProgress {
			background-color: #FFFFFF;
			border-top: 1px solid #808080;
			border-left: 1px solid #808080;
			border-right: 1px solid #C5C5C5;
			border-bottom: 1px solid #C5C5C5;
			margin-top: 10px;
			width: 100%;
		}
		.fileUploadProgressBar {
			background-color: #0099FF;
		}


		/* Upload "Caption-setting" styles */
	
		#preview-container { display: none; margin-bottom: 100px; }
		.upload-thumb { 
			float: left;
			width: 280px;
			height: 280px;
			position: relative; /*Allows us to use absolute positioning below, relative to this element */
			top: 0px;
			left: 0px;
			margin: 20px 20px 40px 20px;
			display: inline; /*Hack to fix IE6 double-margins float bug*/
		}

		.upload-img-wrapper, .upload-img-wrapper-vertical { 
			height: 100%; /*forces text below horizontally-oriented images. Neat hack. */
			width: 100%;
		}

		.upload-img-wrapper-vertical {
			text-align: center; /*Don't declare this style for horizontal photos or Firefox flips the hell out.*/
		}

		.upload-img-wrapper img { 
			position: absolute; /*forces horizontal images to bottom of .photo-wrapper*/
			bottom: 0px;
		}

		input.upload-caption-input {
			width: 274px;
			margin-top: 8px;
		}	




/* Buttons
   Thanks to the Filament Group for sample code! (www.filamentgroup.com)
------------------------------------------------------------------------------------------ */

.pg-button { outline: 0; margin:0 4px 0 0; padding: .3em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; }
.pg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }

a.pg-button { float:left; }

/* remove extra button width in IE */
button.pg-button { width:auto; overflow:visible; }

.pg-button-icon-left { padding-left: 2em; }
.pg-button-icon-right { padding-right: 2em; }
.pg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
.pg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }

.pg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	

.pg-buttonset { float:left; }
.pg-buttonset .pg-button { float: left; }
.pg-buttonset-single .pg-button, 
.pg-buttonset-multi .pg-button { margin-right: -1px;}

.pg-toolbar { padding: .5em; margin: 0;  }
.pg-toolbar .pg-buttonset { margin-right:1.5em; padding-left: 1px; }
.pg-toolbar .pg-button { font-size: 1em;  }





/* Hacks & Fixes
--------------------------------------------------------------- */

a:focus, a:hover, a:active { outline: none; }    /* FF: Stops outlining of links on click */ 
*:focus 				   { outline: none; }    /* FF: Stops outlining of other elements on click (inputs, etc) */
a, a:visited, a:active     { cursor: pointer; }  /* IE7: display link cursor when HREF wraps around entire DIV */
a img                      { border: none; }     /* IE7: Stop ugly blue border around linked images*/
.ie6FloatFix               { display: inline; }  /* IE6: Fixes double-margins-on-floated-elements bug. Apply to floated elements ONLY! */

.fullClear 		   		   { clear: both; height: 0px; width: 100% }  /* Not really a hack, just gives height to elements containing floats */