/*************************/
/********IMPORTS***********/
/*************************/
@import url('home.css');
@import url('mybasket.css');
@import url('library.css');
@import url('production.css');
@import url('contact.css');
@import url('terms.css');
@import url('like.css');


/*************************/
/********GENERAL SET UP***********/
/*************************/

a{
	border: none;
	text-decoration: none;
	outline: none;
}

body, div, img, p, form, fieldset{
	margin: 0; padding: 0; border: 0; outline: none;
}

body{
	font: 12px Helvetica, Arial, Verdana, sans-serif;
	background: #333; /*If we change back to 100% footer this should be #333*/
}

.orangeDiv{
	width: 100%;
	height: 3px;
	background-color: #f90;
}
.greyDiv{
	width: 100%;
	height: 6px;
	background-color: #333;
}

.italic{
	font-style: italic;
	font-size: 80%;
}

.empty{
	clear: both;
}

.tooltip {
	display:none;
	background: #666;
	height:15px;
	padding: 5px;
	color:#fff;
}

.filterSort{
	float: right;
}

.filterSort h4{
	float: left;
	font-size: 14px;
	line-height: 20px;
	vertical-align: middle;
	padding: 0px;
	margin:8px 0px 0px 0px;
}

.filterSort select{
	margin-top: 8px;
	background: url(../images/userArrow.png) no-repeat right center;
/* 	background-color: rgba(0,255,255,0); */	
	float: left; 
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	height: 20px;
	width: 95px;
	font-size: 14px;
	line-height: 20px;
	vertical-align: middle;
	border: none;
	padding: 0px 0px 0px 5px;
	-moz-outline: none;
	outline: none;
	cursor: pointer;
}
	.filterSort select:hover{
		color: #f90;
	}

.productionDiv .filterSort{
	color: #fff;
}
	.productionDiv .filterSort h4{
		margin-top: 5px;
	}
	.productionDiv .filterSort select{
		background: url(../images/userArrowWhite.png) no-repeat right center;
		margin-top: 5px;
		margin-right: 5px;
		color: #fff;
	}
		.productionDiv .filterSort select:hover{
			color: #f90;
		}


/*************************/
/********HEADER***********/
/*************************/

#header{
	min-width: 960px;
	width: 100%;
	height: 79px;
	background: #fff;
}

#logo{
	margin: 21px 0px 0px 0px;
	float: left;
}

#navigation{
	width: 960px;
	height: 79px;
	margin: 0px auto;
}
	#navigation #navMenu{
		list-style: none;
		float: left;
		padding: 0px;
		margin: 0px 0px 0px 10px;
	}
		#navigation #navMenu li{
			float: left;
		}
			#navigation #navMenu li a{
				display: block;
				width: 120px;
				height: 79px;
			}
			#navigation #navMenu li #nav1{
				background: url(../images/homeBtn.png) no-repeat top center;
			}
				#navigation #navMenu li #nav1:hover{
					background-position: bottom;
				}
			#navigation #navMenu li #nav2{
				background: url(../images/basketBtn.png) no-repeat top center;
			}
				#navigation #navMenu li #nav2:hover{
					background-position: bottom;
				}
			#navigation #navMenu li #nav3{
				background: url(../images/libraryBtn.png) no-repeat top center;
			}
				#navigation #navMenu li #nav3:hover{
					background-position: bottom;
				}
			
		#navigation #navMenu #currentNav a{
			background-position: bottom;
		}	


#currentUser{
	position: relative;
	height: 26px;
	margin: 26px 0px 0px 0px;
	float: right;
}
	#currentUser a{
		height: 100%;
		display: block;
		color: #333;
	}
		#currentUser a:hover{
			color: #f90;
		}
	#currentUser img{
		float: left;
		margin-top: 5px;
	}
	#currentUser p{
		float: left;
		margin: 0px 5px;
		font-size: 14px;
		line-height: 26px;
		vertical-align: middle;
		
	}
	
#currentUser #userOptions{
	position: absolute;
	right: 0px;
	top: 13px;
	display: none;
}
	#currentUser #userOptions ul{
		display: block;	
		list-style: none;
		width: 100px;
		background: #fff;
		text-align: right;
		padding: 5px 10px 5px 10px;
		font-size: 14px;
		border-right: 1px solid #999;
		border-bottom: 1px solid #777;
	}
		#currentUser #userOptions ul li{
		height: 20px;
		float: none;
		text-align: right:
		background: red;
	}

/*************************/
/********POPUPS***********/
/*************************/

.popupWrap{
	background-color: #fff;
	min-height: 240px;
	width: 760px;
}
	.popupWrap h3{
		font-size: 18px;
		font-weight: bold;
		margin: 0px;
	}
	
	.popupWrap .popupLeft{
		float: left;
		width: 240px;
		margin: 15px 5px 5px 10px;
	}
		.popupWrap .popupLeft img{
			margin: 10px 0px 0px 0px;
			max-width: 240px;
		}
	
	.popupWrap .popupMiddle{
		float: left;
		width: 240px;
		margin: 15px 5px 5px 5px;
	}
		.popupWrap .popupMiddle p{
			width: 240px;
			margin: 10px 0px 5px 0px;
			font-size: 14px;
		}
		.popupWrap .popupMiddle a{
			color: #333;
			font-size: 14px;
			font-weight: bold;
		}
			.popupWrap .popupMiddle a:hover{
			color: #f90;
		}
	
	.popupWrap .popupRight{
		float: left;
		width: 240px;
		margin: 15px 10px 5px 5px;
	}
		.popupWrap .popupRight p{
			width: 240px;
			margin: 10px 0px;
			font-size: 14px;
		}
			.popupWrap .popupRight span{
				font-weight: bold;
			}
		.popupWrap .popupRight a{
			color: #333;
		}
			.popupWrap .popupRight a:hover{
			color: #f90;
		}

	.popupWrap .popupOptions{
		height: 40px;
		padding-right: 25px;
	}
		.popupWrap .popupOptions a{
			display: block;
			width: 40px;
			height: 40px;
			margin: 0px 10px;
			float: right;
		}
			.popupWrap .popupOptions a:hover{
				background-position: bottom;
			}
			.popupWrap .popupOptions .optionFavorite{
				background:url(../images/optionFavoriteBg.png) no-repeat top;
			}
			.popupWrap .popupOptions .optionLike{
				background:url(../images/optionLikeBg.png) no-repeat top;
				display: block;
				width: 40px;
				height: 40px;
				margin: 0px 10px;
				float: right;
			}
				.popupWrap .popupOptions .optionLike:hover{
					background-position: bottom;
					cursor: pointer;
				}
				.popupWrap .popupOptions .optionLike .popupOptionsDropDown{
					display: none;
					list-style: none;
					position: relative;
					left: 0px;
					top: 40px;
					padding: 0px;
					margin: 0px;
					background: #fff;
				}
					.popupWrap .popupOptions .optionLike .popupOptionsDropDown li{
						padding: 5px;
						margin: 0px;
						background: #fff;
						width: 90px;
					}
				
			.popupWrap .popupOptions .optionYoutube{
				background:url(../images/optionYoutubeBg.png) no-repeat top;
			}
			.popupWrap .popupOptions .optionWebshop{
				background:url(../images/optionWebshopBg.png) no-repeat top;
			}
				
		
		/*
		popupWrap .popupOptions img{
			margin: 0px 10px 0px 0px;
			float: right;
		}
*/
			/*
				.popupWrap .popupOptions img:hover{
				-moz-transform: scale(1.1);
				-webkit-transform: scale(1.1);
				-o-transform: scale(1.1);
				-ms-transform: scale(1.1);
				transform: scale(1.1);
			}
*/
	
	.popupWrap .popupMoreInfo{
		display: none;
		width: 740px;
		padding: 10px 10px 15px 10px;
	}
		.popupWrap .popupMoreInfo p{
			font-size: 14px;
		}
		.popupWrap .popupMoreInfo a{
			font-size: 14px;
			color: #333;
			font-weight: bold;
			float: right;
			margin: 10px;
		}
			.popupWrap .popupMoreInfo a:hover{
				color: #f90;
			}
	
.apple_overlay{
	display:none;
	background-image: url(../images/overlayBg.png);
/* 	width: 745px; */
	padding:0px;
}

.apple_overlay .close{
	background-image:url(../images/overlayClose.png);
	position:absolute; right:0px; top:0px;
	cursor:pointer;
	height:35px;
	width:35px;
}

.loadingGif{
	position: relative;
	left: 367px;
	top: 200px; /*test different to get estimate*/
}

/*************************/
/*******CONTENT***********/
/*************************/

#feedback{
	position: absolute;
	z-index: 1000;
	right: 0px;
	top: 230px;
	display: block;
	width: 30px;
	height: 80px;
	font-size: 14px;
	color: #333;
	text-align: center;
	line-height: 20px;
	vertical-align: middle;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	border-left: 1px solid #333;
	background: url(../images/feedback.png) no-repeat top left;
	
	/*
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
*/
}
	#feedback:hover{
		width: 35px;
		background-position: bottom left;
	}

.withCaption{
	cursor: pointer;
}

.eggOutline{
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0px;
	left:0px;
	width: 100%;
	outline: 1px solid #999;
	outline-offset: -1px;
}

.caption{
	display: none;
	position: absolute;
	bottom: 0px;
	left:0px;
	background: #000;
	width: 100%;
	color: #fff;
	opacity: 0.7;
	filter: alpha(opacity=70);
}
	.caption h3{
		margin: 10px 10px 0px 10px;
		font-size: 16px;
	}
	.caption h4{
		margin: 35px 10px 10px 10px;
		font-size: 14px;
		font-weight: bold;
	}
	.caption img{
		margin: 10px;
	}


#content{
	min-width: 960px;
	width: 100%;
	min-height: 300px;
	margin: 0px;
	padding-top: 25px;
	padding-bottom: 40px;
	background: #fff;
}
	#content h2{
		color: #333;
		margin: 0px;
		font-size: 24px;
		font-weight: bold;
	}
	
.section{
	width: 960px;
	margin: 0px auto 40px auto;
}
	

/*************************/
/********FOOTER***********/
/*************************/

#footer{
	width: 960px; 
	margin: 0px auto; /*Originally no margin on top or bottom. We changed temporarily since there is a chance that the content won't be enough to make it feel like a footer*/
	/* margin: -30px auto 25px auto; */
	padding: 0px;
	background-color: #333;
}
	.footerSection{
		width: 192px;
		margin: 0px;
		float: left;
		padding-top: 20px; /*Should be 40px when used as 100% footer*/
	}
		.footerSection h3{
			margin: 0px;
			font-size: 14px;
		}
		
		.footerSection ul{
			margin: 0px 0px 40px 50px;
			padding: 0px;
			list-style: none;
			color: #fff;
			font-size: 12px;
		}
			.footerSection ul li{
				line-height: 18px;
			}
				.footerSection ul li a{
					text-decoration: none;
					color: #fff;
				}
				.footerSection ul li a:hover{
					color: #f90;
				}

	#footer p{
		color: #fff;
		float: right;
		margin: 20px 0px 50px 0px;
	}