/*

  --------------------------------------------------------------------
	IMPORTANT - PLEASE READ
  --------------------------------------------------------------------
  
  	Unless otherwise specified below or in the Photo Uploader
  	documentation, all attributes set in this style sheet are 
  	needed for the correct display and function of the Photo
  	Uploader utility.
  	
  	BACKGROUND, COLOR, FONTS
  		Any background, color, and font attributes are safe to change
  		in this CSS. These attributes are in place as a starting point,
  		and can safely be changed. Note that you *may* need to update
  		certain width/height attributes if you change font size.
  	
  	WIDTH & HEIGHT:
	  	If an element has a width and/or height attributed to it,
	  	assume those values are necessary. If these values are pixel
	  	values, they need to be pixel values, not percentages. There
	  	are many places in the core JS logic that grab these sizes
	  	and use them for calculations, placements, sizes, etc. If these
	  	pixel values are changed to percentages, the numerical values
	  	in the JS will be incorrect and not function properly.
	  	
	POSITION:
		If a position attribute is set for an element, it is
		needed. There is much relative/absolute positioning that is
		needed for correct display/functioning of the utility, and
		changing these values will cause the utility to break.
		
	LEFT, RIGHT, TOP, BOTTOM:
		In conjunction with the notes on "Position" above, if an
		element has a left, right, top, and/or bottom attribute, 
		assume that it is needed. You can change these values as
		needed, but do not remove them. If you think you do not
		need to have a value for one of these that is in place,
		play it safe and set the value to "0px" rather than completely
		removing it, as removing these values will very likely
		cause the utility to not function properly.
		
	DISPLAY:
		All display attributes are in place for a reason. Many elements
		are hidden by default, as they are shown in various places
		throughout the utility's flow. If you change the display values,
		it could produce unexpected results, specifically if you add
		"!important" to the end of something, as this will cause the
		JS logic to function improperly.
		
	MOBILE-SPECIFIC CSS
		The #smpu_is_mobile tag is hidden by default, but in the
		mobile CSS file, it is set to display:block. In the case 
		that the mobile detection is set to "auto", the JS uses 
		the display of this div to set the "isMobile" flag. If 
		this is not found, the JS will assume the utility is in 
		full-browser mode unless explicitly told it is in mobile-mode.

*/


/*----------------------------------------*/
/* 
/*	Global Elements
/*
/*----------------------------------------*/
#smpu_container {
	background: url(/global/images/smpu_container_bg.gif) repeat;
	color: #414141;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 15px;
	height: auto;
	min-height: 200px;
	overflow: hidden;
	padding: 24px 20px 16px 20px;
	position: relative;
	width: 472px;
	-ms-touch-action: none; /* Disable touch behaviors like pan and zoom */
}
#smpu_container {
	*height: 526px;
}
#smpu_container h2 {
	font-size: 20px;
	font-weight: normal;
	margin: 0px 0px 3px 0px;
}
.main {
	background: url(/global/images/smpu_main_bg.png) no-repeat center center;
	/* If this div is larger than the bg image, the bg color specified below matches the edges of the bg image, and will thus extend the bg image */
	/*background-color: #cacaca;*/
	height: 339px;
	margin: 9px 0px 0px 0px;
	padding: 6px;
	position: relative;
	width: 452px;
}
#smpu_container iframe {
	background: #fff;
	border: 1px solid #c5c5c5;
	margin: 9px 0px 0px 0px;
	padding: 6px;
	position: relative;
	width: 452px;
}
#photo,
#photo_div {
	display: none; /* Div that contains current iframe and upload contents */
}
#incompatible_browser {
    background: #fdd;
    border: 1px solid #dbb;
    display: none;
    padding: 16px;
}




/*----------------------------------------*/
/* 
/*	Step & Destination Select
/*
/*----------------------------------------*/
.step {
	
}
.step p {
	margin: 0px;
}
#smpu_destination_select {
	height: 70px;
	margin: 9px 0px 18px 0px;
	width: 100%;
}
#smpu_destination_select ul {
	display: block;
	margin: 0px;
	padding: 0px;
}
#smpu_destination_select ul li {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	color: #7e7e7e;
	cursor: pointer;
	display: inline;
	float: left;
	font-size: 12px;
	font-weight: bold;
	list-style: none;
	margin: 0px 30px 0px 0px;
	min-width: 56px;
	padding: 60px 0px 0px 0px;
	text-align: center;
}
#smpu_destination_select ul li.unselected {
	background-position: 0px -100px;
	color: #a4a4a4;
}
#smpu_destination_select li.desktop {
	background-image: url(/global/images/smpu_icon_desktop.png);
}
#smpu_destination_select li.facebook {
	background-image: url(/global/images/smpu_icon_facebook.png);
}
#smpu_destination_select li.flickr {
	background-image: url(/global/images/smpu_icon_flickr.png);
}
#smpu_destination_select li.instagram {
	background-image: url(/global/images/smpu_icon_instagram.png);
}




/*----------------------------------------*/
/* 
/*	Photo Editor
/*
/*----------------------------------------*/
canvas {
	background: #fff;
}
.photo_editor,
#smpu_flash_photo_editor {
	height: 339px;
	width: 452px;
}
#smpu_flash_photo_editor {
	left: 6px;
	position: absolute;
	top: 6px;
}
.photo_editor table {
	left: 6px;
	margin: 0px !important;
	position: absolute;
	top: 6px;
}
#smpu_crop_canvas,
#smpu_crop_canvas_mask {
	left: 6px;
	position: absolute;
	top: 6px;
}
#smpu_crop_canvas_mask {
	background: none;
}
img#smpu_static_preview_image {
	max-height: 100%;
	max-width: 100%;
}




/*----------------------------------------*/
/* 
/*	Slider Component
/*
/*----------------------------------------*/
.slider_component {
	background: url(/global/images/smpu_slider_control_bg_full.png) no-repeat;
	display: none; /* Hide by default. Will be shown when needed. */
	height: 65px;
	position: relative;
	width: 464px;
}
.slider_component .scrubber_track {
	height: 7px;
	left: 74px;
	position: absolute;
	top: 29px;
	width: 316px;
}
.slider_component .scrubber {
	background: url(/global/images/smpu_slider_scrubber.png) no-repeat;
	height: 36px;
	left: 100px;
	position: absolute;
	top: 14px;
	width: 64px;
}
.slider_component .icon_left,
.slider_component .icon_right {
	cursor: pointer;
	position: absolute;
	top: 7px;
}
.slider_component .icon_left {
	left: 7px;
}
.slider_component .icon_right {
	right: 7px;
}




/*----------------------------------------*/
/* 
/*	Edit & Pagination Controls
/*
/*----------------------------------------*/
#smpu_edit_controls {
	background: url(/global/images/smpu_edit_controls_border_bottom.png) no-repeat 0px bottom;
	text-align: center;
}
#smpu_edit_controls ul,
.navigation ul {
	display: block;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#smpu_edit_controls ul li,
#smpu_edit_controls ul li.navigation,
.navigation ul li {
	background: url(/global/images/smpu_edit_control_btn_bg.png) repeat-x;
	border: 1px solid #333;
	color: #fff;
	cursor: pointer;
	display: inline;
	float: left;
	font-size: 13px;
	font-weight: bold;
	margin: 3px 5px 0px 5px;
	padding: 14px 20px 12px 20px;
	text-transform: uppercase;
	width: auto;
}
#smpu_edit_controls ul li:hover,
#smpu_edit_controls ul li.active,
#smpu_edit_controls ul li:active,
.navigation ul li:hover,
.navigation ul li.active,
.navigation ul li:active {
	background-position: 0px -80px;
}
#smpu_edit_controls ul li.disabled:hover,
#smpu_edit_controls ul li.disabled,
#smpu_edit_controls ul li.disabled:active,
.navigation ul li.disabled:hover,
.navigation ul li.disabled,
.navigation ul li.disabled:active {
	background-position: 0px -160px;
	border: 1px solid #aaa;
	cursor: default;
}
#smpu_nav_prev_btn,
#smpu_nav_next_btn {
	padding: 10px 20px 8px 20px;
}
#smpu_mobile_instructions,
.navigation,
.main {
	display: none;
}
#smpu_mobile_instructions {
	margin: 0 auto;
	text-align: center;
}
#smpu_nav_save_btn {
	display: none;
}
#smpu_edit_controls {
	display: none;
}
#smpu_edit_controls table {
	margin: 0 auto;
}
#smpu_edit_controls {
	display: none;
}




/*----------------------------------------*/
/* 
/*	Albums & Gallery Items
/*
/*----------------------------------------*/
#smpu_album_select {
	width: 100%;
	height: auto;
	display: none;
}
#smpu_album_select select {
	width: 100%;
	padding: 4px 0px;
}
#smpu_album_list,
.gallery {
	background: #ccc;
	height: 341px;
	left: 0px;
	overflow: auto;
	margin: 5px;
	position: absolute;
	top: 0px;
	width: 454px;
}
#smpu_album_list h2,
#smpu_container .main .gallery h2 {
	border-bottom: 1px solid #ccc;
	font-size: 18px;
	margin: 0px;
	padding: 12px 10px 10px 10px;
}
#smpu_album_list ul,
.gallery .thumbs {
	background: #fff;
	border: 1px solid #a1a1a1;
	bottom: 7px;
	height: 282px;
	left: 7px;
	list-style: none;
	margin: 0px;
	overflow: auto;
	padding: 6px 0px;
	position: absolute;
	width: 438px;
}
#smpu_album_list li {
	cursor: pointer;
	font-size: 12px;
	padding: 8px 4px 6px 16px;
}
#smpu_album_list li:hover {
	background: #d0e9ff;
}
#smpu_album_list li.active {
	background: #d0e9ff;
}
#smpu_album_list {
	display: none;
}
#smpu_container .buttons {
	padding: 0px 10px 10px 10px;
}
#smpu_nav_back_btn {
	display: none;
}
.navigation table {
	margin: 0 auto;
}
.gallery .thumbs {
	overflow: hidden;
	padding-left: 10px;
	width: 428px;
}
.gallery .thumb {
	height: 82px;
	float:left;
	margin:10px 10px 5px 0px;
	overflow: hidden;
	text-align:center;
	width: 97px;
}
.gallery .thumb img {
	max-height: 100%;
	max-width: 100%;
}




/*----------------------------------------*/
/* 
/*	Auth Forms
/*
/*----------------------------------------*/
#smpu_auth_forms {
	display: none;
	left: 6px;
	position: absolute;
	top: 6px;
}




/*----------------------------------------*/
/* 
/*	Dialogs & Overlays
/*
/*----------------------------------------*/
#smpu_overlay_modal,
#smpu_overlay_working {
	background: url(/global/images/smpu_overlay_modal_bg.png) repeat;
	display: none;
	height: 100%;
	left: 0px;
	position: absolute;
	top: 0px;
	width: 100%;
}
#smpu_overlay_modal .modal_wrapper {
	margin: 0 auto;
	width: 240px;
}
#smpu_overlay_working .spinwing {
	left: 50%;
	position: absolute;
	top: 50%;
}
#smpu_overlay_working .spinwing {
	height: 60px;
}
#smpu_overlay_modal .modal {
	background-color: #fff;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	display: block;
	font-size: 12px;
	padding: 20px;
	text-align: center;
	width: 200px;
}
#smpu_overlay_modal .button_wrapper {
	clear: both;
	margin: 24px auto 12px auto;
	text-align: center;
}
#smpu_overlay_modal .button {
	background: url(/global/images/smpu_edit_control_btn_bg.png) repeat-x;
	border: 1px solid #333;
	color: #fff;
	cursor: pointer;
	display: inline;
	font-size: 13px;
	font-weight: bold;
	margin: 3px 4px 0px 4px;
	padding: 8px 14px 7px 14px;
	text-transform: uppercase;
}
#smpu_overlay_modal .button:hover,
#smpu_overlay_modal .button:active {
	background-position: 0px -80px;
}
#smpu_overlay_working .spinwing img {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	left: -50%;
	position: relative;
	top: -50%;
}




/*----------------------------------------*/
/* 
/*	Generic
/*
/*----------------------------------------*/
.clearfix {
	clear: both;
}
#smpu_is_mobile {
	display: none; /* Needs to be hidden for non-mobile */
}