/* DOCUMENT INFORMATION - Document: styles.css - Version: 2.0.0 - Client: Daniel Wells & Dan Shoemaker - Author: Brian Morris - Project: streaming-movies.net - Date Due: June 7th, 2009 - Created: May 19th, 2009 - Modifed: May 19th, 2009 COLORS - default body text #ffffcc - subtitle h2 text #ff9900 - form input borders #cc9933 - default p text #f0f0f0 - pre borders #ffff99 FONTS - default body text Arial, Helvetica Neue, Helvetica, sans-serif - subtitle h2 text Garamond, Hoefler Text, Times New Roman, Times, serif - form input text Cambria, Georgia, Times, Times New Roman, Times, serif - default p text Copperplate Light, Copperplate Gothic Light, serif - pre and code Consolas, Lucida Console, Monaco, monospace COLOR PALETTE - Dark Grey #27282a TABLE OF CONTENTS 1. General Setup 2. */ /* General Setup */ body { background:#2a2d2d url(../images/web_bg.jpg) repeat-x top center; } .clear {clear:both;} /* Content Wrap */ #wrap {width:900px; margin:0px auto; margin-top:35px;} /* Logo */ #logo {margin-top:5px; float:left; margin-left:5px;} #logo .show {background:url(../images/logo.gif) no-repeat top left; width: 310px; height:25px; display:block; } /* Search Functions */ #search { float:right; width: 330px; margin-bottom:10px; } #search form input.searchquery {font: 0.9em Calibri, Corbel, Tahoma, Arial, Helvetica Neue, Helvetica, sans-serif; background:url(../images/searchbox.jpg) no-repeat top left; padding:7px; border:0 none; width:280px; display:block; float:left; } #search form input.searchbutton {float:left; } /* Content Block #1 Holds the main picture and the adspace */ #whitebg_top {background:url(../images/white_top.gif) no-repeat top center; display:block; height:10px; width:900px;} #whitebg_middle {background:url(../images/white_middle.gif) repeat top center; width: 900px; padding-top:3px; padding-bottom:3px;} #whitebg_bottom {background:url(../images/white_bottom.gif) no-repeat top center; display:block; height:10px; width:900px;} #whitebg_middle #watchtv {float:left; margin-left:10px; } /* Ad Placement */ #whitebg_middle #adspace_container {float:right; margin-right:10px;} /* Content Block #2 */ #graybg_top {background:url(../images/gray_top.gif) no-repeat top center; display:block; height:7px; width:900px; margin-top:10px;} #graybg_middle {background:#596466; width: 900px; padding-top:3px; padding-bottom:3px;} #graybg_middle .text {padding:4px 0px 4px 10px; font:1.0em/150% "Lucida Sans Unicode", Verdana, Arial; color:#eee;} #graybg_bottom {background:url(../images/gray_bottom.gif) no-repeat top center; display:block; height:7px; width:900px;} /* Movie Block */ #movieblock_top {background:url(../images/movie_header.gif) no-repeat top center; display:block; width:900px; height:47px; margin-top:10px;} #movieblock_top .text {font:0.9em Tahoma, Verdana, Arial, sans-serif; color:#333; padding-top:20px; margin-left:19px; text-transform:capitalize; padding-bottom:9px; border-bottom:1px dotted #aaa; width:684px;} #movieblock_middle {background:#fff; color:#333; width:900px;} #movieblock_middle #content {margin:0px auto; width:900px; font:0.8em Tahoma, Verdana, Arial, sans-serif; color:#333; } #movieblock_middle #content #left {margin-left:30px; width: 670px; float:left; } #movieblock_middle #content #divider {padding-left:10px;float:left;background:url(../images/divider_line.gif) no-repeat top left; width:3px; height:159px; display:block;} #movieblock_middle #content #right {border-left:1px solid #ddd; width:183px; float:right; text-align:right; } #movieblock_middle #content #right .rt_text {padding:5px;} #movieblock_middle #content #whole {width:850px; padding:10px 0px 10px 20px;} #movieblock_middle #content .text {width:850px; margin:0px auto;} #movieblock_middle #content .movie_image {float:left; padding-right: 20px;} #movieblock_bottom {background:url(../images/white_bottom_old.gif) no-repeat top center; display:block; height:7px; width:900px;} /* Search Results */ h3.title {padding:10px; background:#f3f3f3; border:1px solid #ccc; font-size:1.1em;} /* Movie Information and Tidbits Bar */ #infobar {border-top: 1px dotted #999; border-bottom: 1px dotted #999; width:850px; margin:0px auto;} #infobar .content {padding:5px; color:#333;} /* Movie Links */ a.movielink {color:#429AFE; margin-bottom:2px; } /* Netflix Movie Centering */ #netflix_movie_view {margin:0px auto; width:700px; height:700px; display:block;} /* Footer Text */ #footer {width:700px; margin:0px auto;} #footer .text {padding:5px; font:.60em Tahoma, Arial, Verdana, sans-serif; color:#ddd; text-align:center;} /* Alpha Selector */ #alpha_selector {width:100%; background:#596466; } #alpha_selector .content {margin:0px auto; width:800px; text-align:center;} #abc { height:38px; color:#fff; } #abc a { font:bold 11px "Trebuchet MS", Arial, Helvetica; text-transform:uppercase; color:#fff; } #abc a:hover { color:#fff; } #abc a u { text-decoration:none; } #abc a.active u { text-decoration:underline; color:#fff; font-weight:bold; } #abc a:hover u { border:0; } #abc a.shuffle { float:left; display:block; width:124px; margin-right:4px; height:28px; padding:12px 0 0 15px; line-height:100%; background:url(../images/sprite.gif) no-repeat 0 -80px; } #abc a.shuffle:hover { background-position: -139px -80px; } #abc ul li { float:left; } #abc ul li a { display:block; margin:5px 2px 0 0; padding-top:7px; width:27px; height:20px; line-height:100%; background:transparent; text-align:center; } #abc ul li a:hover { background:#EC9D58;} #abc ul li.last a { margin:5px 0 0 0 } /* Page Indicator Link Styles */ #pagelinks {width:500px; margin:0px auto; text-align:center; font:1.2em Tahoma, Arial, Helvetica, sans-serif; color:#333;} #pagelinks a { color:#333; } #pagelinks a:hover { color:#429AFE; } hr.pagelinks_hr {border:0 none; border-bottom:1px dotted #999; width:90%;} /* Netflix Movie Actions */ #netflix_movie_actions {width:161px; border:1px solid #aaa;} #netflix_movie_actions #netflix_actions_logo {background:url(../images/netflix_actions_logo.gif) no-repeat top left; width:161px; height:41px; display:block;} #netflix_movie_actions .text2 {padding:8px; color:#666; text-align:center; } #netflix_movie_actions .text2 a.action_links {color:#429AFE;} #netflix_movie_actions .text2 a.action_links:hover {color:#333;}