/* Image styles
*/

a.btn, input[type="submit"]{
	background-color: #721446;
	color: #ffffff;
	&:hover{
		background-color: #b41e55;
	}
}

div#image-wrapper{
	width:100%;
	background:#f5f5f5;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

	div#image-content{
		width:1280px;
		margin:0 auto;
		text-align:center;
		padding:20px 0;
	}

		div#image-content img{
			padding:10px;
			background:#ffffff;
			-webkit-box-shadow: 0 0 15px 0 #424242;
			box-shadow: 0 0 15px 0 #424242;
			max-height:510px;
		}


div#column-left{
	width:845px;
	margin-right:77px;
	float:left;
}

	div#column-left div#image-details{
		width:450px;
		margin-right:150px;
		float:left;
	}

		div#column-left div#image-details h1{
			text-align:left;
			font-size:1.8em;
			color:#721446;
			margin:0 0 0.8em 0;
			padding:0;
			border:0;
		}

		div#column-left div#image-details p.imageid{
			margin:0 0 0.5em 0;;
		}

		div#column-left div#image-details p.date,
		div#column-left div#image-details p.category{
			color:#721446;
			margin:0;
		}

	div#column-left div#organisation-rating{
		width:245px;
		float:left;
	}
		div#column-left div#organisation-rating img#organisation-logo{
			display:block;
			margin-top:1em;
			margin-bottom:1.5em;
		}

	div#image-rating a,
	div#image-rating a:visited{
		display:block;
		float:left;
		width:41px;
		height:41px;
		background-image:url('../../img/icons/icon-rate.png');
		background-position:0 -41px;
		background-repeat:no-repeat;
		margin-right:1px;
		-webkit-transition:background-position .2s ease-in;  
    -moz-transition:background-position .2s ease-in;  
    -o-transition:background-position .2s ease-in;  
    transition:background-position .2s ease-in;
	}
		div#image-rating a.fixed-on,
		div#image-rating a.fixed-on:visited,
		div#image-rating a.on,
		div#image-rating a.on:visited{
						
			background-position:0 0;
		}

div.section-line{
	padding-bottom:2em;
	border-bottom:2px dotted #721446;
	margin-bottom:2em;
}


/* Keywords
*/
	p.keywords{
		padding-left:65px;
		background:url('../../img/icons/icon-keywords.png') no-repeat 0 0;
		min-height: 50px;
	}
		p.keywords a,
		p.keywords a:visited,
		p.keywords span{
			display:inline-block;
			*zoom: 1;
			font-size:0.9em;
			padding:2px 6px;
			margin:0 6px 10px 0;
		}
		p.keywords a,
		p.keywords a:visited
		{
			text-decoration:none;
			border:1px solid #585858;
			-o-transition:.2s;
			-ms-transition:.2s;
			-moz-transition:.2s;
			-webkit-transition:.2s;
			transition:.2s;
		}
			p.keywords a:hover
			{
				background:#721446;
				color:#ffffff;
			}
		p.keywords a.all,
		p.keywords a.all:visited,
		p.keywords span{
			background:#721446;
			color:#ffffff;
			text-decoration:none;
			border:1px solid #721446;
		}
		p.keywords a.all,
		p.keywords a.all:visited{
			display:inline-block;
			*zoom: 1;
		}
			p.keywords a.all:hover{
				background:#ffffff;
				color:#585858;
				border-color:#cccccc;
			}

	p.keywords-concept{
		background-image:url('../../img/icons/icon-concept-keywords.png');
	}

	p.keywords-concept a,
	p.keywords-concept a:visited{
		border:1px solid #721446;
		color:#721446;
	}
		p.keywords-concept a:hover{
			background:#ffffff;
			color:#000000;
		}

	p.submit-keyword{
		padding-left:65px;
	}


/* Comments
*/
	h3{
		font-size:1.55em;
		padding-left:62px;
		background:url('../../img/icons/icon-comments.png') no-repeat 0 0;
		color:#721446;
		font-weight:normal;
		margin-bottom:1em;
	}

	ul#comments-list{
		list-style:none;
	}
			ul#comments-list li div.comment{
				padding:20px;
				border-left:19px solid #721446;
				background:#e3e3e3;
				margin-bottom:40px;
				width:753px;
				min-height:120px;
				position: relative;
				@media screen and (min-width: 751px){
					&:after{
						content: url('../../img/image/comment-arrow.png');
						position: absolute;
						right: -33px;
						top: 20px;
					}
				}
			}
				ul#comments-list li div.avatar{
					width:120px;
					height:120px;
					background:#ffffff;
					border-radius:120px;
					-webkit-border-radius:120px;
					-moz-border-radius:120px;
					float:left;
					margin-right:41px;
				}
					ul#comments-list li div.avatar img{
						width:80px;
						height:80px;
						margin:20px auto;
						display:block;
					}
				ul#comments-list li div.comment-text{
					width:520px;
					float:left;
				}
					ul#comments-list li div.comment-text textarea{
						width:96%;
						height:120px;
						border:1px solid #721446;
						padding:10px 2%;
						font-size:1em;
					}
					ul#comments-list li div.comment-text .btn{
						margin-bottom:0.5em;
					}
					ul#comments-list li div.comment-text .btn-cancel{
						margin-right:10px;
					}
				ul#comments-list li div.comment-text p.user{
					color:#721446;
				}


	/* Comments and keywords form
	*/
	form.stacked{
		margin-top:4em;
	}
		form.stacked fieldset{
			padding:0;
		}
			form.stacked fieldset div.row input[type=text]{
				width:400px;
			}
			form.stacked fieldset div.row select{
				width:400px;
			}
			form.stacked fieldset div.row input#captcha{
				width:205px;
			}


/*
*/

div#column-right{
	width:280px;
	float:right;
	position:relative;
}

div#leave-a-comment{
	margin-top:2em;
}

	p.already-member a{
		position:relative;
		display:block;
		margin-right:40px;
		float:left;
		height:39px;
		line-height:39px;
	}


/* Box floaty
*/
	div#box-floaty{
		width:280px;
		background:#272b2c;
		color:#ffffff;
		z-index:10000;
		border:1px solid #ffffff;

		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-ms-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;
	}
	div.box-floaty-highlighted{
		box-shadow: 0 0 45px #721446;
		-moz-box-shadow: 0 0 45px #721446;
		-webkit-box-shadow: 0 0 45px #721446;
	}
		a.tooltip{
			color:#ffffff;
			font-size:0.85em;
			text-decoration:underline;
			position:relative;
			top:-10px;
		}

		div#size-selector{
			padding:27px 30px;
			width:220px;
			margin:0 auto;
		}
			div#size-selector a.size,
			div#size-selector a.size:visited{
				width:50px;
				height:50px;
				line-height:50px;
				text-align:center;
				color:#ffffff;
				border:1px solid #ffffff;
				float:left;
				display:block;
				margin-right:32px;
				text-decoration:none;
			}
				div#size-selector a.large{
					margin-right:0;
				}
			div#size-selector a.selected,
			div#size-selector a.selected:visited{
				background:#ffffff;
				color:#585858;
			}

		div#box-floaty-content{
			padding:0 17px 17px 17px;
		}
			div#box-floaty-content fieldset.license{
				margin:0 0 0.5em 0;
			}
				div#box-floaty-content fieldset.license label{
					width:50%;
					display:block;
					float:left;
					box-sizing: border-box;
					font-size: 15px;
				}
				div#box-floaty-content fieldset.license label input{
					margin-top: 5px;
					float: left;
				}
			div#box-floaty-content p.price{
				font-size:2.6em;
				text-align:center;
				margin:0 0 0.5em 0;
			}
			div#box-floaty-content h4{
				border-top:2px dotted #ffffff;
				padding-top:0.75em;
				font-size:1em;
				font-weight:bold;
				margin:0 0 0.75em 0;
			}
			div#box-floaty-content a#floatybox-submit-button{
				width:132px;
				height:69px;
				line-height:69px;
				display:block;
				text-decoration:none;
				padding-left:115px;
				background:url('../../img/icons/icon-buy.png') #ffffff no-repeat 75px 50%;
				font-size:1.5em;
				color:#721446;
				margin:0 auto;
				border:0;
				font-weight: bold;
			}

			div#box-floaty-content a#button-dedicate{
				background-color: #721446;
				color: #ffffff;
				&:hover{
					background-color: #721446;
				}
			}

			div.floaty-social-media{
				margin-top:2em;
				margin-bottom:1em;
			}
				div.floaty-social-media a,
				div.floaty-social-media a:visited{
					float:left;
					margin-right:31px;
					cursor:pointer;
				}
				div.floaty-social-media a img{
					display:block;
				}
					div.floaty-social-media a.googleplus,
					div.floaty-social-media a.googleplus:visited{
						margin-right:0;
					}

/* Dedicate form
*/
		form#form-dedicate{
			width:100%;
			display:none;
		}
			form#form-dedicate fieldset div.row input#dedicate_name{
				width:94%;
				padding:8px 3%;
			}

	div.dedicated-to em{
		display:block;
		font-weight:bold;
	}


	
@media screen and (max-width: 1224px) {

	div#image-content{
		width:100%;
	}

		div#column-left div#image-details{
			width:100%;
			margin-right:0;
			float:none;
			margin-bottom:2em;
		}

	div#column-left{
		width:55%;
		margin-right:0;
	}


	ul#comments-list li div.comment{
		padding:3%;
		width:90%;
	}
		ul#comments-list li div.avatar{
			margin-right:15px;
			margin-bottom:10px;
		}
				ul#comments-list li div.comment-text{
					width:100%;
					float:none;
				}


	/* Comments and keywords form
	*/
	form.stacked{
		margin:0;
		padding:0;
	}
		form.stacked fieldset{
			margin:0;
			padding:0;
			width:100%;
		}
			form.stacked fieldset div.row{
				width:100%;
			}
			form.stacked fieldset div.row input[type=text],
			form.stacked fieldset div.row textarea{
				width:96%;
				padding-left:2%;
				padding-right:2%;
			}
			form.stacked fieldset div.row select{
				width:100%;
			}
			form.stacked fieldset div.row-captcha input{
			}
			form.stacked fieldset div.row-captcha img{
				margin-bottom:10px;
			}

	p.already-member a{
		position:relative;
		display:block;
		margin-right:10px;
		margin-bottom:10px;
		float:left;
		height:39px;
		line-height:39px;
	}

	div#column-right{
		width:35%;
		min-width:280px;
	}

	div#box-floaty{
		margin-top:40px;
		width:100%;
	}
}


@media screen and (max-width: 750px) {

	div#image-content{
		width:100%;
	}

		div#image-content img{
			width:92%;
			margin-left:2%;
			margin-right:2%;
			padding:2%;
		}

	div#column-left{
		width:100%;
		margin-right:0;
		float:none;
	}


	div#column-right{
		width:100%;
		float:none;
		max-width:410px;
	}

}