/* ================================================== CSS Style Sheet ================================================== */

/* ============================== Navigation Bar */

/*  Navigation */
#myNav {
	background: url(../images/bg_pattern.png), rgba(0,0,0,0.3);
	margin: auto;
}

#nav li a {
	font-family: Arial;
	font-size: 18px;
	color: white;
	margin: auto;
	padding-left: 40px;
	padding-right: 40px;
}

#nav li a:hover {
	color: white;
	background-color: rgba(0,0,0,0.6);
}

/* Navigation Menu Button */
.navbar-default .navbar-toggle {
	border-color: transparent;
	float: left;
	font-size: 20px;
	color: white;
}
.navbar-default .navbar-toggle:focus {
	background-color: transparent;
	color: #F2FF00;
}

/* ============================== Universal */

/* Header */
header {
	position: relative;
	height: 220px;
	width: 100%;
	min-height: auto;
	overflow-y: hidden;
	background: url(../images/bg_pattern.png),
		linear-gradient(to bottom,#00FF00,#0000FF);
	color: #fff;
	text-align: center;
}

/* Headers */
h1, h2, h3, h4 {
	color: #4c4c4c;
}

/* Label */
label {
	font-size: 18px;
	color: #4c4c4c;
}

/* Logo */
#logo {
	margin: auto;
	position: relative;
	padding-top: 65px;
	width: 140px;
}

/* ============================== Add Film Modal */

/* Close Modal Button */
#closeAddFilmModal {
  color: red;
  float: right;
	margin-right: 10px;
  font-size: 50px;
}

#closeAddFilmModal:hover,
#closeAddFilmModal:focus {
  color: #4c4c4c;
}

/* Modal */
#addFilm_modal {
	background-color: rgba(0,0,0,0.5);
	display: none;
	position: fixed;
	overflow: auto;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* Modal Content */
#addFilmModalContent {
  background-color: white;
  border: none;
	border-radius: 0;
	margin: 2% auto;
  padding: 40px;
  width: 50%;
}

/* Modal Content For (Screen Width 768px) */
@media screen and (max-width: 1024px) {
	#addFilmModalContent {
    background-color: white;
    border: none;
		border-radius: 0;
		margin: 4% auto;
    padding: 40px;
    width: 90%;
	}
}

/* Text Boxes */
#addFilmForm {
	color: #4c4c4c;
	border: 1px solid #2abb3b;
	border-radius: 0;
	width: 100%;
	height: 50px;
	font-size: 20px;
	margin-bottom: 20px;
}

/* Description Area */
#addFilmFormDesc {
	color: #4c4c4c;
	border: 1px solid #2abb3b;
	border-radius: 0;
	width: 100%;
	height: 140px;
	margin: auto;
	font-size: 20px;
	margin-bottom: 20px;
}

/* Images Upload Area */
#filmImageUpload {
	color: #4c4c4c;
	border: 1px solid #2abb3b;
	border-radius: 0;
	width: 100%;
	height: auto;
	margin: auto;
	margin-bottom: 20px;
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-weight: bold;
}

/* Display Upload Image(s) */
#filmImageUpload {
	clear: both;
}

/* Register Button */
#addFilmBtn {
	color: white;
	background-color: #2ECC40;
	border: none;
	border-radius: 0;
	margin: auto;
	margin-top: 10px;
	width: 100%;
	height: 60px;
	font-size: 20px;
	text-align: center;
}
#addFilmBtn:hover,
#addFilmBtn:focus {
	color: white;
	background-color: #2abb3b;
}

/* ============================== Contact Us Modal */

/* Close Modal Button */
#closecontactUsModal {
  color: red;
  float: right;
	margin-right: 10px;
  font-size: 50px;
}

#closecontactUsModal:hover,
#closecontactUsModal:focus {
  color: #4c4c4c;
}

/* Modal */
#contactUs_modal {
	background-color: rgba(0,0,0,0.5);
	display: none;
	position: fixed;
	overflow: auto;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* Modal Content */
#contactUs_content {
  background-color: white;
  border: none;
	border-radius: 0;
	margin: 7% auto;
  padding: 40px;
  width: 50%;
}

/* Modal Content For (Screen Width 768px) */
@media screen and (max-width: 768px) {
	#contactUs_content {
    background-color: white;
    border: none;
		border-radius: 0;
		margin: 20% auto;
    padding: 40px;
    width: 90%;
	}
}

/* Text Boxes */
#contactUsFormTextBoxes {
	color: #4c4c4c;
	border: 1px solid #0000FF;
	border-radius: 0;
	width: 100%;
	height: 50px;
	font-size: 20px;
	margin-bottom: 20px;
}

/* Message Area */
#contactUsMessage {
	color: #4c4c4c;
	border: 1px solid #0000FF;
	border-radius: 0;
	width: 100%;
	height: 200px;
	margin: auto;
	font-size: 20px;
	margin-bottom: 20px;
}

/* Send Button */
#contactUsBtn {
	color: white;
	background-color: #0000FF;
	border: none;
	border-radius: 0;
	margin: auto;
	margin-top: 10px;
	width: 100%;
	height: 60px;
	font-size: 20px;
	text-align: center;
}
#contactUsBtn:hover,
#contactUsBtn:focus {
	color: white;
	background-color: #0000cc;
}

/* ============================== Display All Films On Homepage */

/* Film Box */
#indexDisplayFilmBox {
	color: #4c4c4c;
	border: 1px solid #0000FF;
	border-radius: 0;
	height: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 10px;
}

/* Film Section Box */
#filmSectionBox {
	background: url(../images/bg_pattern.png), #0000FF;
	width: auto;
	height: 60px;
	margin-bottom: 10px;
	margin-top: -10px;
	margin-right: -10px;
	margin-left: -10px;
}

/* Film Image 1 */
#indexDisplayFilmImage {
	height: 280px;
	margin: auto;
	float: left;
}

/* Film Image 2 */
#indexDisplayFilmImage2 {
	position: relative;
	display: block;
	clear: both;
	height: 140px;
	margin: auto;
	float: left;
	padding-top: 10px;
}

/* Film Image 3 */
#indexDisplayFilmImage3 {
	position: relative;
	display: block;
	height: 140px;
	margin: auto;
	float: left;
	padding-top: 10px;
	padding-left: 10px;
}

/* Film Title */
#indexFilmTitle {
	padding-top: 10px;
	color: #4c4c4c;
	font-size: 30px;
	text-decoration: none
}

/* Film Released Date */
#indexFilmReleaseDate {
	margin-top: 10px;
	color: #4c4c4c;
	font-size: 16px;
	font-weight: bold;
}

/* Film ID */
#indexFilmID {
	color: #4c4c4c;
	font-size: 16px;
	margin-top: -10px;
	font-weight: bold;
}

/* Film Desc */
#indexFilmDesc {
	color: #4c4c4c;
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 20px;
	text-align: justify;
}

/* View All Reviews Button */
#viewReviewsBtn {
	color: #0000FF;
	border: 1px solid #0000FF;
	background-color: white;
	width: 100%;
	height: 60px;
	font-size: 20px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
#viewReviewsBtn:hover {
	background-color: rgba(0,0,0,0.1);
}

/* Review Button */
#reviewBtn {
	color: #00b300;
	border: 1px solid #00b300;
	background-color: white;
	width: 100%;
	height: 60px;
	font-size: 20px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
#reviewBtn:hover {
	background-color: rgba(0,0,0,0.1);
}

/* ============================== Review Section */

/* Review Form */
#userReviewForm {
	display: none;
}

/* Labels */
#filmReviewLabels {
	color: #00b300;
}

/* Text Boxes */
#filmReviewTextBoxes {
	color: #4c4c4c;
	border: 1px solid #00b300;
	border-radius: 0;
	width: 100%;
	height: 60px;
	font-size: 18px;
	margin-bottom: 20px;
}

/* Description Area */
#filmReviewDesc {
	color: #4c4c4c;
	border: 1px solid #00b300;
	border-radius: 0;
	width: 100%;
	height: 60px;
	font-size: 18px;
	margin-bottom: 20px;
	float: right;
}

/* Star Rating */
#reviewSectionStars {
  direction: rtl;
	color: #e6e600;
	margin-top: -20px;
	text-align: center;
	unicode-bidi: bidi-override;
	text-decoration: none
}
#reviewSectionStars > span {
	display: inline-block;
  position: relative;
  width: 0.7em;
	font-size: 70px;
	text-decoration: none
}
#reviewSectionStars > span:hover:before,
 #reviewSectionStars > span:hover ~ span:before {
	 position: absolute;
	 content: "\2605";
	 text-decoration: none
}

#fiveStars, #fourStars, #threeStars,
#twoStars, #oneStars {
	color: #00b300;
}

/* ============================== View All Reviews Modal */

/* View All Reviews */
#viewAllReviews_modal {
	display: none;
}

/* Close Modal Button */
#closeviewAllReviewsModal {
  color: red;
  float: right;
	margin-right: 10px;
  font-size: 50px;
}

#closeviewAllReviewsModal:hover,
#closeviewAllReviewsModal:focus {
  color: #4c4c4c;
}

/* Modal */
#viewAllReviews_modal {
	background-color: rgba(0,0,0,0.5);
	display: none;
	position: fixed;
	overflow: auto;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* Modal Content */
#viewAllReviewsModalContent {
  background-color: white;
  border: none;
	border-radius: 0;
	margin: 2% auto;
  padding: 40px;
  width: 60%;
}

/* Modal Content For (Screen Width 1024px) */
@media screen and (max-width: 1024px) {
	#viewAllReviewsModalContent {
    background-color: white;
    border: none;
		border-radius: 0;
		margin: 8% auto;
    padding: 40px;
    width: 85%;
	}
}

/* User Review Section */
#reviewUserEachData {
	border: 1px solid #00b300;
	border-radius: 0;
	width: 100%;
	padding-top: 20px;
	margin-bottom: 20px;
}

/* User Image */
#reviewUserImage {
	width: 40px;
	display: inline-block;
}

/* User Name */
#reviewUserName {
	font-size: 14px;
	font-weight: bold;
	color: #4c4c4c;
	display: inline-block;
	padding-left: 5px;
}

/* User Given Stars */
#userGivenStars {
	color: #e6e600;
	font-size: 30px;
	display: inline-block;
}

/* User Comments */
#reviewUserComments {
	font-size: 14px;
	color: #4c4c4c;
	display: inline-block;
}

/* ============================== Loader */

.no-js #loader {
	display: none;
}
.js #loader {
	display: block; position: absolute; left: 100px; top: 0;
}

.webLoader {
	background: url(../images/loader.gif) center no-repeat #fff;
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
}

/* ============================== Footer */

#footer	{
	background-color: white;
  width: 100%;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 12px;
	text-align: center;
	color: #4c4c4c;
  border-top: solid #0000FF;
	border-width: 1px;
}