﻿/* layout.css
	This is a combination of overall styles and page specific styles
	
	**warning**: changing styles in this stylesheet may effect ALL pages
*/
         
         
	/* Overall Styles */  
		/* #A8C0CC url(/App_Images/bg_body.jpg) */
        body { background: #454444; font: normal 12px arial; color: #000; }
		p { line-height: 16px; margin-bottom: 15px; }
        a { color: #337296; }
        a:hover { color: #000; }
        #container { margin: 0px auto; width: 940px; }
        #top, #mid, #btm { float: left; position: relative; width: 940px; z-index: 1;}
        
            
    /* Top Styles */
    
        #top { background: url(/App_Images/bg_top.gif) bottom repeat-x; height: 77px; z-index: 2;}
            #top .home { position: absolute; top: 0px; left: 0px; }
          
        #top .contactbtn { position:absolute; top: 10px; left: 548px;  color: #fff; font-size: 11px;}
            #top .contactbtn a { color: #E0EAEF; }
            #top .contactbtn a:hover { color: #fff; }
          
            #top .languages { position: absolute; top: 10px; right: 20px; color: #fff; font-size: 11px;}
                #top .languages a { color: #E0EAEF; }
                #top .languages a:hover { color: #fff; }
                
            #top ul.top { position: absolute; top: 40px; right: 10px; }
            #top ul li { float: left; padding: 15px 10px 0px; position: relative;}
                #top ul li:hover ul { display: block; }
                #top ul li a { border-bottom: 10px solid #014f7b; position: relative; z-index: 2; float: left; color: #fff;}
                #top ul li a:hover { border-bottom-color: #467c9b; }
            #top ul .donate_bg { z-index: 1; top: -40px; left: 6px;position: absolute; width: 60px; height: 79px; }
                
                #top ul li.subnav:hover { background: #8aa8ba; }
                #top ul li.subnav:hover a.t1, #top ul li.subnav:hover a.t1:hover {border-bottom: 10px solid #8aa8ba; }
                #top ul ul { display: none; left: 0px; top: 35px; position: absolute; float: left; background: #8aa8ba; white-space:nowrap; z-index: 5; }
                #top ul ul li { float: none; padding: 0px; display: inline}
                #top ul ul li a { border: 0px; float: none; display: block; padding: 4px 15px 6px; }
                #top ul ul li:first-child a { padding-top: 8px}
                #top ul ul li:last-child a { padding-bottom: 14px; margin-bottom: 2px}
                #top ul ul li a:hover  { background: #98b9cc; margin: 0px 2px; padding: 4px 13px 6px }
                #top ul ul li:first-child a:hover  { padding-top: 8px}
                #top ul ul li:last-child a:hover  { padding-bottom: 14px; margin-bottom: 2px}

				.pg_homepage #top ul .li_home a,
				.pg_movies #top ul .li_movies a,
				.pg_donate #top ul .li_donate a,
				.pg_movements #top ul .li_movements a,
				.pg_volunteer #top ul .li_volunteer a,
				.pg_contact #top ul .li_contact a { border-bottom-color: #467c9b;  }
    /* Mid Styles */
    
        #mid { background: #fff; padding: 20px; width: 900px; }   
        
            #mid .topline { float: left; width: 934px; font-size: 3px; display: inline; height: 3px; background: #e9e6e4; margin: -20px; margin-top: -19px; margin-left: -17px; }
        
			#mid h1.topheading { float: left; position: relative; width: 934px; display: inline; border-bottom: 3px solid #e9e6e4; margin: -15px -20px 20px -17px; margin-top: -15px; margin-left: -17px; } 
				#mid h1.topheading .quote { font-weight: normal; position: absolute; top: 10px; right: 20px; color: #8c8d8d; font-size: 11px}
			#mid h3 { margin-left: -1px; }
			#mid .left_side { float: left; width: 599px; margin-right: 15px; }
            #mid .right_side { float: right; width: 286px; }
    /* Bottom Styles */
    
        #btm { background: #fff; border-top: 10px solid #c9dae3; color: #a2a2a2; font-size: 10px }
            #btm ul { float: left; margin: 15px 20px; display: inline}
            #btm ul li { float: left; margin-right: 10px; display: inline; }
            #btm a { color: #a2a2a2; font-size: 10px}
            #btm a:hover { color: #6F6F6F }
            #btm span { float: right; margin: 15px 20px; display: inline; }        
    

				.pg_homepage #btm ul .li_home a,
				.pg_movies #btm ul .li_movies a,
				.pg_donate #btm ul .li_donate a,
				.pg_movements #btm ul .li_movements a,
				.pg_volunteer #btm ul .li_volunteer a,
				.pg_contact #btm ul .li_contact a { text-decoration: none; color: #6F6F6F }

	/* Miscellaneous Styles */
	
		/* Buttons */
		
		#mid .greenbutton1, #mid .bluebutton1, #mid .greenbutton2, #mid .tanbutton1 { float: left;  display: block; padding-top: 12px; text-decoration: none; color: #fff; height: 22px; text-align: center; font-size: 11px; }
		#mid .greenbutton1:hover, #mid .bluebutton1:hover, #mid .greenbutton2:hover, #mid .tanbutton1:hover{ text-decoration: underline; }

			#mid .greenbutton1 { width: 97px; background: url(/App_Images/bg_greenbutton1.gif) top left no-repeat;}
			#mid .greenbutton2 { width: 71px; background: url(/App_Images/bg_greenbutton2.gif) top left no-repeat;}
			#mid .bluebutton1 { width: 97px; background: url(/App_Images/bg_bluebutton1.gif) top left no-repeat;}
			#mid .tanbutton1 { width: 97px; background: url(/App_Images/bg_tanbutton1.gif) top left no-repeat;}

	
		/* Forms */

			#mid .form label { clear: left; width: 120px; float: left; margin-bottom: 3px; padding-bottom: 2px; padding-top: 7px}
			#mid .form  .txt, #mid .form  .txtarea, #mid .form  .select { font-family: arial; float: left; font-size: 12px; padding: 4px; margin-bottom: 6px; background: #9fb8c6; border: 1px solid #869ba7;}
			#mid .form .txtarea { float: left; width: 460px; height: 75px;}
			#mid .form .submitbtn { margin: 5px 10px 0px 0px; float: right; display: inline}
			#mid .form  #error { clear: both; line-height: 16px; font-size: 14px; border: 1px solid #f00; width: 540px; display: none; margin-bottom: 15px; background: #D38D8F; text-align: center; padding: 5px; color: #000; }
				#mid .form  #error img { margin-bottom: -4px; }
			#mid .form  .success { float: right; border: 1px dashed #83825C;line-height: 16px; width: 350px; visibility: hidden;  margin: 10px 10px 15px 8px; background: #FFF9DF; padding: 5px; color: #83825C; }
			#mid .form .info { float: left; width: 380px; }
			#mid .form .req { float: right; width: 150px; text-align:right; margin-right: 8px}
			#mid .form .hdn { display: none; }

		/* Tooltips */  
		
			a.tooltip { text-decoration: none; cursor: help}
			a.tooltip:hover { visibility: visible; }
			a.tooltip span.tooltip { visibility: hidden; position: absolute; margin: -40px 0px 0px -143px; }
			a.tooltip:hover span.tooltip { visibility: visible;  }
			a.tooltip span span { color: #000; display: block; text-decoration: none; position: relative; border: 1px dashed #f00; background: #D38D8F; padding: 3px; font-size: 11px; width: 200px; text-align: left; }


		/* Banners */

			#mid .banners { float: right; width: 286px; }
		    
				#mid .banners .banner {margin-bottom: 10px; width: 286px; position: relative;}
		        
				#mid .banners a { float: right; position: absolute; bottom: 5px; right: 5px; display: block; padding: 5px 10px; font-size: 11px; color: #000; text-decoration: none;}
				#mid .banners a:hover { text-decoration: underline }
		        
				#mid .banners .orange a { background: #ffad4d; }
				#mid .banners .blue a { background: #82a4b8; }
				#mid .banners .green a { background: #c7e0af; }
				#mid .banners .tan a { background:#e7e2c8; }
				
		/* More Movies/Movements Pod */

			#mid .more_pod { float: left; width: 266px; padding: 10px 10px 0px; background: #e4e4e4;}
			#mid .more_pod h4 { margin: 0px 0px 6px -2px}
			#mid .more_pod .image { float: left; width: 77px }
			#mid .more_pod .info { float: right; width: 179px}
			#mid .more_pod .info h3 { margin-top: 2px; margin-left: -4px; }
			#mid .more_pod .info .r { display: block; text-align: right; line-height: 16px; }
			#mid .more_pod .buttons { float: left; font-size: 10px; background: #c7c7c7; border-top: 2px solid #fff; display: inline; padding: 6px 10px; margin: 0px -10px; width: 268px; }
			#mid .more_pod .buttons a { font-size: 10px; color: #000; text-decoration: none}
			#mid .more_pod .buttons a:hover { text-decoration: underline; }
			#mid .more_pod .buttons .l { float: left; width: 150px; }
			#mid .more_pod .buttons .r { float: right; width: 80px; text-align: right; }

		/* Carousels */

			/* Homepage Movements */
				.jcarousel-skin-vertical1 .jcarousel-container-vertical {
					width: 296px;
					height: 390px;
				}

				.jcarousel-skin-vertical1 .jcarousel-clip-vertical {    /* Applied to UL */
					width:  296px;
					height: 390px;
				}

				.jcarousel-skin-vertical1 .jcarousel-item { /* Applied to LI */
					width: 296px;
					height: 120px;
					float: left;
				    
				}

				.jcarousel-skin-vertical1 .jcarousel-item-vertical {
					margin-bottom: 10px;
				}

				.jcarousel-skin-vertical1 .jcarousel-item-placeholder {
					background: #fff;
					color: #000;
				}
			/* Movie Category Landing */
				.jcarousel-skin-horizontal2 .jcarousel-container-horizontal {
					width: 599px;
					height: 455px;
					margin-bottom: 12px;
				}
								
				.jcarousel-skin-horizontal2 .jcarousel-clip-horizontal {    /* Applied to UL */
					width:  599px;
					height: 455px;
				}

				.jcarousel-skin-horizontal2 .jcarousel-item {  /* Applied to LI */
					width: 191px;
					height: 455px;
					float: left;
					
				}

				.jcarousel-skin-horizontal2 .jcarousel-item-horizontal {
					margin-right: 10px;
				}

				.jcarousel-skin-horizontal2 .jcarousel-item-placeholder {
					background: #fff;
					color: #000;
				}
				/**
				 *  Horizontal Buttons */
				 
				.jcarousel-skin-horizontal2 .jcarousel-next-horizontal {
					position: absolute;
					top: 115px;
					right: -15px;
					width: 40px;
					height: 40px;
					cursor: pointer;
					background: transparent url(/App_Images/ico_rightarrow1.png) no-repeat 0 0;
					visibility: visible;
					behavior: url(/App_Css/iepngfix.htc);
				}

				.jcarousel-skin-horizontal2 .jcarousel-next-horizontal:hover {
					visibility: visible;
				}

				.jcarousel-skin-horizontal2 .jcarousel-next-horizontal:active {
					visibility: visible;
				}

				.jcarousel-skin-horizontal2 .jcarousel-next-disabled-horizontal,
				.jcarousel-skin-horizontal2 .jcarousel-next-disabled-horizontal:hover,
				.jcarousel-skin-horizontal2 .jcarousel-next-disabled-horizontal:active {
					cursor: default;
					visibility: hidden;
				}

				.jcarousel-skin-horizontal2 .jcarousel-prev-horizontal {
					position: absolute;
					top: 115px;
					left: -20px;
					width: 40px;
					height: 40px;
					cursor: pointer;
					background: transparent url(/App_Images/ico_leftarrow1.png) no-repeat 0 0;
					visibility: visible;
					behavior: url(/App_Css/iepngfix.htc);
				}

				.jcarousel-skin-horizontal2 .jcarousel-prev-horizontal:hover {
					visibility: visible;
				}

				.jcarousel-skin-horizontal2 .jcarousel-prev-horizontal:active {
					visibility: visible;
				}

				.jcarousel-skin-horizontal2 .jcarousel-prev-disabled-horizontal,
				.jcarousel-skin-horizontal2 .jcarousel-prev-disabled-horizontal:hover,
				.jcarousel-skin-horizontal2 .jcarousel-prev-disabled-horizontal:active {
					cursor: default;
					visibility: hidden;
				}
				
			/* Movement Landing */
				.jcarousel-skin-horizontal1 .jcarousel-container-horizontal {
					width: 559px;
					height: 450px;
					margin-left: 20px;
				}
								
				.jcarousel-skin-horizontal1 .jcarousel-clip-horizontal {    /* Applied to UL */
					width:  559px;
					height: 450px;
				}

				.jcarousel-skin-horizontal1 .jcarousel-item {  /* Applied to LI */
					width: 559px;
					height: 450px;
					float: left;
				}

				.jcarousel-skin-horizontal1 .jcarousel-item-horizontal {
					margin-right: 0px;
				}

				.jcarousel-skin-horizontal1 .jcarousel-item-placeholder {
					background: #fff;
					color: #000;
				}
				/**
				 *  Horizontal Buttons */
				 
				.jcarousel-skin-horizontal1 .jcarousel-next-horizontal {
					position: absolute;
					top: 190px;
					right: -32px;
					width: 40px;
					height: 40px;
					cursor: pointer;
					background: transparent url(/App_Images/ico_rightarrow1.png) no-repeat 0 0;
					visibility: visible;
					behavior: url(/App_Css/iepngfix.htc);
				}

				.jcarousel-skin-horizontal1 .jcarousel-next-horizontal:hover {
					visibility: visible;
				}

				.jcarousel-skin-horizontal1 .jcarousel-next-horizontal:active {
					visibility: visible;
				}

				.jcarousel-skin-horizontal1 .jcarousel-next-disabled-horizontal,
				.jcarousel-skin-horizontal1 .jcarousel-next-disabled-horizontal:hover,
				.jcarousel-skin-horizontal1 .jcarousel-next-disabled-horizontal:active {
					cursor: default;
					visibility: hidden;
				}

				.jcarousel-skin-horizontal1 .jcarousel-prev-horizontal {
					position: absolute;
					top: 190px;
					left: -42px;
					width: 40px;
					height: 40px;
					cursor: pointer;
					background: transparent url(/App_Images/ico_leftarrow1.png) no-repeat 0 0;
					visibility: visible;
					behavior: url(/App_Css/iepngfix.htc);
				}

				.jcarousel-skin-horizontal1 .jcarousel-prev-horizontal:hover {
					visibility: visible;
				}

				.jcarousel-skin-horizontal1 .jcarousel-prev-horizontal:active {
					visibility: visible;
				}

				.jcarousel-skin-horizontal1 .jcarousel-prev-disabled-horizontal,
				.jcarousel-skin-horizontal1 .jcarousel-prev-disabled-horizontal:hover,
				.jcarousel-skin-horizontal1 .jcarousel-prev-disabled-horizontal:active {
					cursor: default;
					visibility: hidden;
				}
				
				
		/* More Pod */
				.jcarousel-skin-vertical2 .jcarousel-container-vertical {
					width: 266px;
					height: 260px;
				}

				.jcarousel-skin-vertical2 .jcarousel-clip-vertical {    /* Applied to UL */
					width:  266px;
					height: 260px;
				}

				.jcarousel-skin-vertical2 .jcarousel-item { /* Applied to LI */
					width: 266px;
					height: 123px;
					float: left;
					border-bottom: 2px solid #fff
				    
				}

				.jcarousel-skin-vertical2 .jcarousel-item-vertical {
					margin-bottom: 10px;
				}

				.jcarousel-skin-vertical2 .jcarousel-item-placeholder {
					background: #fff;
					color: #000;
				}