/* 
   Asian Movie Paradise style sheet 
   Filename: styles.css

   Author:   Ng Wei Liang
   Date:     13 May 2016
  
 */

/* reset styles */
html {
   font-size: 12px;
}
a, article, body, div, figure, footer, header, h1, h2, h3, nav, p {
   border: 0;
   padding: 0;
   margin: 0;
}

/* body */
body {
   max-width: 1000px;
   margin: 0 auto;
   background-color: #dee9f9;
   font-family: Tahoma, Arial, Helvetica, sans-serif;
}
.container {
   background-color: #B8944D;
   position: relative;
   width:1000px;
   
   
   

}
p {
   font-size: 1.5em;
   line-height: 1.6em;
}

/* header section */
h1 {
   padding: 1em 1em 1em;
   text-align: center;
   font-family: Bitter, "Times New Roman", Times, serif;
   font-weight: 700;
   color: ivory;
   background-color: blue;
   font-size: 3em;
}
a:link{
	color: black;
}
a:visited{
	color: #888;
}
a:active{
	position: relative;
	top:5px;
	left:5px;
	}
/* site navigation bar */
nav.sitenavigation {
   /*width: 19%;*/
   padding:1.5em;
   /*float: left;*/
   background-color:orange;
   color:green;
   text-align:center;
}
nav.sitenavigation a:link{
	text-decoration:none;
	color:black;
}
nav.sitenavigation a:visited{
	color:#744f42;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
	color:white;
	padding:0;
}

nav.sitenavigation p{
	 display: inline-block;
	 margin:0.6em;
}


/* main content */
article {
   padding: 1.5em;
   background-color:yellow;
   text-align:center;
   
  
}
h2 {
   padding: 0.4em 0.4em 0;
   text-align: center;
   font-family: Arial, "Times New Roman", Times, serif;
   font-size: 2.5em;
   text-decoration:underline;
   
}
h3 {
   margin-top: 3em;
   color:blue;
   font-size: 2.5em;
   font-family: Arial, "Times New Roman", Times, serif;
   text-decoration:underline;

}
article p {
   padding-top: 1.5em;
}
.cast{
	font-size:14px;
     font-weight:bold;
}
aside{
	float:right;
	background-color:yellow;
	color:red;
	width:35%;
	text-align:center;
	padding:0.5em;
	
	
	
    
}
#home{
	padding:1.5em;
   background-color:yellow;
   text-align:center;
   float:left;
   width:60%;
   
	
}

.synopsis{
	font-size:2em;
	text-decoration:underline;
	color:blue;
	padding:1em;
	margin:0.5em;
}

.plot{
	margin:auto;
	
	
}
/* page navigation bar */
nav.pagenavigation {
   /*width: 19%;*/
   padding:1%;
   /*float: left;*/
   color:black;
   background-color:red;
   text-align:center;
   margin:3em
  
}
nav.pagenavigation p{
	 display: inline-block;
	 margin:1em;
     padding:0;
}
nav.pagenavigation a:link{

	text-decoration:none;
}
nav.pagenavigation a:visited{
	color:white;
}
nav.pagenavigation a:hover, nav.sitenavigation a:focus{
	color:white;
	
}	
nav.up {
	color:black;
}


/* footer section */
footer {
   padding: 0.6em;
   background-color:orange;
   color: black;
   text-align: center;
   clear: both; 
}
footer p {
   margin: 0.4em;
}
.accent {
   font-weight: bold;
}


/* Style The Dropdown Button */
.dropbtn {
	
    background-color:orange;
    color: green;
    padding:16px;
    font-size: 18px;
    border: none;
    cursor: pointer;
	
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
	margin:1px;
	
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width:100px;
	margin:0;

}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding:0;
    text-decoration: none;
    display: block;
	font-size:14px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color:black;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/*standard screen styles*/
@media screen and (min width: 880px), print{
  header{
	  float:none;
	  width:auto;
  }
 nav.sitnavigation{
	 width:100%;
	 padding:0;
 }
  div.navigation-menu-button {
	  display:none;
  }
nav.sitenavigation ul{
	border:none;
	width:100%;
    display:block;
    position:static;
    text-align:center;
	
}

 nav.sitenavigation li{
	 display:inline-block;
 }
 
 h3{
	 float:left;
 }
 figure{
	 float:right;
	 max-width:50%;
	 margin: 2% 0 2% 2%
 }
 
 section h3, section p
 {right:auto;
    left:0;
 }
/*small screen/tablet styles*/
@media screen and (min width: 460px), print{
   article {
	padding: 2%;
}

figure {
	bodrder:1 px solid £ccc
	padding:2%
	box-shadow:0 10px 6px -6px
	display:inline-block;
}
section{
	text-align:center;
	
section h3, section p{
		text-align:left;
	}
section p: first-of-type{
	display:block;
}	


}

/*maximum width screen styles*/
@media screen and (min width: 1400px), print{
   article div {
	width:1260 px; /* 1400 * 90% */
}
 }
 
 

figure {
	bodrder:1 px solid £ccc
	padding:2%
	box-shadow:0 10px 6px -6px
	display:inline-block;
}
section{
	text-align:center;
	
	section h3, section p{
		text-align:left;
	}
/* print styles */
@media print {

   body, h1, article, footer {
      color: rgb(0,0,0);
      background: rgb(255,255,255);
   }
   body {
      max-width: 100%;
   }
   nav {
      display: none;
   }
   section {
      page-break-before: always;
   }
}
@page {
   margin: 0.75in;
}