/*

* Author : Ali Aboussebaba

* Email : bewebdeveloper@gmail.com

* Website : http://www.bewebdeveloper.com

* Subject : Crop photo using PHP and jQuery

*/



/** {

	margin: 0;

	padding: 0;

}

body {

	padding: 10px;

	background: #eaeaea;

	text-align: center;

	font-family: arial;

	font-size: 12px;

	color: #333333;

}*/

/*.container {

	width: 100%;

	height: auto;

	background: #ffffff;

	border: 1px solid #cccccc;

	border-radius: 10px;

	margin: auto;

	text-align: left;

}





.content {

	padding: 50px 10px 10px 10px;

	min-height: 100px;

	text-align: center;

}*/

.upload_btn {

	background: #947F6C;

	color: #FFF;

	border-radius: 0px;

	font-size: 15px;

	line-height: 30px;

	display: inline-block;

	padding: 4px 14px;

	cursor: pointer;

}

#photo_container {

	padding: 50px 0 0 0;

	width: 100%;

	/* height: 100%; */

}

.side-bar #photo_container > img{width: auto; max-width: 100%;}

.upload_btn:hover {

	background: #665445;

}

/* footer --------------------------*/

.footer {

	padding: 10px;

	text-align: right;

}

.footer a {

	color: #999999;

	text-decoration: none;

}

.footer a:hover {

	text-decoration: underline;

}



/* popup --------------------------*/

#popup_upload{

	position: fixed;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	background: rgba(0, 0 ,0, 0.7);

	z-index: 9999;

	text-align: center;

	display: none;

	overflow: auto;

}

#popup_crop {

	position: fixed;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	background: rgba(0, 0 ,0, 0.7);

	z-index: 9999;

	text-align: center;

	display: none;

	overflow: auto;

}

.form_upload {

	width: 400px;

	height: 250px;

	border: 1px solid #999999;

	border-radius: 10px;

	background: #ffffff;

	color: #666666;

	margin: auto;

	margin-top: 160px;

	padding: 15px;

	text-align: left;

	position: relative;

	z-index: 9999;

	border-radius:0;

}

.form_upload h2 {

	border-bottom: 1px solid #999999;

	padding: 0 0 5px 0;

	margin: 0 0 20px 0;

	font-size:25px;

}

.upload_frame {

	width: 0;

	height: 0;

	display: none;

}

.file_input {

	width: 100%;

	background: #eaeaea;

	border: 1px solid #999999;

	border-radius: 0px;

	color: #333333;

	padding: 1%;

	margin: 0 0 20px 0;

}

#upload_btn {

	background: #947F6C;

	color: #FFF;

	border: 1px solid #947F6C;

	border-radius: 0px;

	float: right;

	line-height: 20px;

	font-size: 14px;

	font-weight: bold;

	font-family: arial;

	display: block;

	padding: 6px 16px;

	cursor: pointer;

}

#upload_btn:hover {

	background: #665445;

}

.close {

    position: absolute;

    display: block;

    right: 10px;

    cursor: pointer;

    font-size: 20px;

    line-height: 16px;

    width: 18px;

    height: 18px;

    border: 1px solid #cccccc;

    border-radius: 5px;

    background: #F0F0F0;

    text-align: center;

    font-weight: bold;

}

.close:hover {

    background: #cccccc;

}

#loading_progress {

    float: left;

    line-height: 18px;

    padding: 8px 0 0 0;

}

#loading_progress img {

    float: left;

    margin: 0 5px 0 0;

    width: 16px !important;

}

.form_crop {

	max-width: auto;

	max-height: auto;

	display: inline-block;

	border: 1px solid #999999;

	border-radius: 0px;

	background: #ffffff;

	color: #666666;

	margin: auto;

	margin-top: 40px;

	padding: 10px;

	text-align: left;

	position: relative;

}

.form_crop h2 {

	border-bottom: 1px solid #999999;

	padding: 0 0 5px 0;

	margin: 0 0 20px 0;

	font-size: 25px;

}

#target {

	background-color: #ccc;

	width: 500px;

	height: 330px;

	font-size: 24px;

	display: block;

}

#crop_btn {

	background: #947F6C;

	color: #FFF;

	border: 1px solid  #947F6C;

	border-radius: 0px;

	float: right;

	line-height: 30px;

	font-size: 14px;

	font-weight: bold;

	font-family: arial;

	display: block;

	padding: 3px 15px;

	margin: 10px 0 0 0;

	cursor: pointer;

}

#crop_btn:hover {

	background: #665445;

}

.form_crop { max-width:800px !important; overflow:hidden; }

.jcrop-holder { max-width:100% !important; overflow:auto; max-height: 650px }


.jcrop-tracker { width:100% !important; }


img.jcrop-preview { max-width:100% !important; }


/*** Media Quiry ***/

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


.form_crop { width:95%; }

.jcrop-holder { /*overflow:scroll; */}


}

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

.form_upload { width:100%; }

}