/* >> filename >> global.css >> project >> TSpikecast Frame work for JFTV >> date >> 1st March 2009 >> author >> jon leverrier >> url >> http://www.jonleverrier.com >> notes: */ * { padding: 0px; margin: 0px; } img { border: 0px; } .clear { clear: both; } hr { display: none; } body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 100%; background: url(../img/bg_body.jpg) top repeat-x #494748; padding-top: 10px; } /* JFTV GLOBAL ELEMENTS */ #globalWrapper { } #globalContent { width: 970px; background: white; margin: 0 auto; border-left: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; position: relative; } #header { float: left; height: 126px;} #header .logo { width: 319px; height: 114px; background: url(../img/logo_jfmasthead.gif) no-repeat; float: left; position: absolute; top: 24px; left: 316px; } #header .logo a { width: 319px; height: 114px; display: block; } #header .logo span { display: none; } #header .search { float: right; position: absolute; top: 77px; right: 10px; } #header .search fieldset { border: 0px; } #header .search fieldset legend { display: none; } #header .search label { display: none; } #header .search .width { width: 182px; height: 23px; border: 1px solid #adadad; } #header .search .button, #header .search .width { float: left; } #header .search .button { margin-left: 10px; } #banners { float: left; margin-top: 10px; } #banners .col1 { height: 85px; width: 474px; float: left; } #banners .col2 { height: 85px; width: 476px; float: left; } #banners .col1 { background: url(../img/bg_banner_rss.jpg) top left no-repeat; } #banners .col2 { background: url(../img/bg_banner_email.jpg) top left no-repeat; } #banners .col1 h3, #banners .col2 h3 { margin-top: 8px; margin-bottom: 8px; } #banners .col1 h3 a, #banners .col2 h3 a { color: white; font-size: 80%; text-decoration: none; } #banners .col1 p a, #banners .col2 p a { color: black; font-size: 70%; text-decoration: none; font-weight: bold; } #globalNav { font-size: 90%; width: 950px; background: url(../img/bg_nav.jpg) repeat-x bottom #000000; list-style: none; padding: 0px 0px 0px 0px; float: left; } #globalNav li { display: inline; line-height: 2.4em; } #globalNav a { float: left; display: block; height: 33px; padding: 0px 18px 0px 18px; background: url(../img/divider_nav.jpg) bottom right no-repeat; } #globalNav a:hover { background: url(../img/bg_nav_selected.jpg) #ffffff top repeat-x; color: black; border-bottom: 1px solid #ffffff; } #globalNav a.selected { height: 33px; display: block; padding: 0px 18px 0px 18px; border-left: 1px solid #666666; border-top: 1px solid #666666; border-right: 1px solid #666666; background: url(../img/bg_nav_selected.jpg) #ffffff top repeat-x; color: black; } #globalNav a.selected:hover { border-bottom: 0px; } #breadcrumb { font-size: 70%; width: 940px; line-height: 3.4em; height: 47px; float: left; margin-top: 0px; background: url(../img/bg_breadcrumb.jpg) repeat-x; padding-left: 10px; } #breadcrumb a { padding: 0px 10px 0px 10px; color: #cc0000; text-decoration: none; } #breadcrumb a:hover { text-decoration: underline; } #player { width: 930px; padding-bottom: 30px; border-bottom: 8px solid #e5e5e5; float: left; } #player #col1 { width: 529px; float: left; } #player #col1 .box { width: 490px; padding: 19px; background: url(../img/bg_player.jpg) repeat-x; } #player #col2 { width: 381px; float: right; } #player #col2 .header { font-family: Georgia, "Times New Roman", Times, serif; font-size: 140%; color: #333333; margin-bottom: 10px; line-height: normal; border: none; padding: 0px; } #player #col2 h1 { font-weight: normal; font-family: Georgia, "Times New Roman", Times, serif; font-size: 140%; color: #cc0033; border-bottom: 1px solid #c5c5c5; padding-bottom: 6px; margin-bottom: 20px; } #player #col2 #viddesc { font-size: 85%; color: #000000; line-height: 1.6em; margin-bottom: 10px; } #player #col2 #viddesc p { font-size: 85%; color: #000000; line-height: 1.6em; margin-bottom: 10px; } #player #col2 ul { font-size: 70%; color: #000000; line-height: 1.6em; list-style: none; margin-bottom: 15px; padding-top: 15px; border-top: 1px solid #cccccc; } #player #col2 ul span { font-weight: bold; } #player #col2 ul li { background: url(../img/bullet_redtri.jpg) no-repeat; padding-left: 20px; background-position: 0 0.3em; } #player #col2 ul li a { color: #cc0000; text-decoration: none; } #player #col2 ul li a:hover { color: #cc0000; text-decoration: underline; } #player #col2 p a { color: #cc0000; text-decoration: none; } #player #col2 p a:hover { color: #cc0000; text-decoration: underline; } #player #col2 .bookmarks p { border: none; margin: 0px; padding: 0px 10px 0px 0px; font-size: 70%; float: left; } #player #col2 .bookmarks { border: none; } #player #col2 .bookmarks li { display: inline; margin-left: 10px; } #player #col2 .bookmarks li.del { background: url(../img/img_bookmark_del.gif) left no-repeat; padding-left: 20px; } #player #col2 .bookmarks li.dig { background: url(../img/img_bookmark_dig.gif) left no-repeat; padding-left: 20px; } #player #col2 .bookmarks li.stu { background: url(../img/img_bookmark_stu.gif) left no-repeat; padding-left: 20px; } /* SCROLLER */ .scroller { width: 860px; float: left; margin-top: 0px; padding: 0px 36px 0px 36px; } .scroller .current { width: 171px; float: left; } .scroller .current img { width: 171px; height: 96px; float: left; } .panel { width: 860px; height: 136px; float: left; margin-top: 0px; background: url(../img/bg_scroller_title.jpg) repeat-x bottom; } .panel .item { float: left; width: 171px; height: 136px; border-right: 1px solid #ffffff; } .panel .item .hover { display: none; background: url(../img/img_scroller_img_hoverbg.png) top no-repeat; z-index: 1; position: relative; } .panel .item .hover .shadow { background: url(../img/img_scroller_img_hoverbg.png) top no-repeat; width: 171px; height: 96px; position: absolute; left: 0px; top: 0px; float: left; } .panel .item .hover img { width: 171px; height: 96px; position: absolute; left: 0px; top: 0px; z-index: -1; } .panel .item .hover h3 { position: absolute; top: 103px; left: 0px; z-index: -1 } .panel .item:hover .hover { display: block; width: 171px; height: 96px; } #freeview { padding-bottom: 30px; border-bottom: 8px solid #e5e5e5; } #freeview-scroller, #premium-scroller { width: 860px; position: relative; } #freeview-scroller .viewport, #premium-scroller .viewport { width: 860px; height: 136px; position: relative; float: left; } #freeview-scroller .viewport .scrollerWrapper div.panel { width: 860px; } .scrollButtons { position: absolute; top: 0px; cursor: pointer; } .scrollButtons.left { left: -36px; background: url(../img/button_scroller_left.jpg) #cccccc right no-repeat; width: 36px; height: 136px; } .scrollButtons.right { right: -35px; background: url(../img/button_scroller_right.jpg) #cccccc left no-repeat; width: 36px; height: 136px; } h2 { font-size: 140%; color: #000000; font-weight: normal; text-decoration: none; float: left; margin: 15px 0px 15px 0px; } .scroller p a { font-size: 70%; color: #333333; text-decoration: none; line-height: 2.3em; } .scroller .current h3 a, .scroller .hover h3 a { background: url(../img/bullet_redtri_blackbg.png) left no-repeat; background-position: 5px 15px; float: left; display: block; width: 156px; height: 40px; color: white; font-size: 60%; line-height: 3.6em; font-weight: normal; padding-left: 15px; text-decoration: none; } .scroller .current h3 a:hover, .scroller .hover h3 a:hover { background: url(../img/img_scroller_h3_bullet_alt.gif) left no-repeat #cc0033; background-position: 5px 7px; } .scroller .hover span a { height: 40px; font-size: 70%; color: #ebebeb; text-decoration: none; display: block; } #summary { width: 932px; margin-top: 13px; float: left; } #summary .col1 { width: 705px; float: left; } #summary .alt { background: #ffffff; float: left; } #summary .col1 .item { width: 705px; float: left; border-top: 1px solid #cccccc; padding: 0px; margin: 0px; } #summary .col1 .item .pic { width: 172px; float: left; background: url(../img/bg_thumb.jpg) bottom no-repeat; padding-bottom: 28px; } #summary .col1 .item .pic img { border: 0px solid #999999; } #summary .col1 .item .info { float: left; width: 478px; padding-left: 22px; } #summary .col1 .item .info .added { width: 478px; } #summary .col2 { width: 208px; float: right; } #summary .col2 img { background: #e8e8e9; margin-top: 31px; float: right; } #summary .col1 .pag { font-size: 80%; padding-top: 15px; line-height: 4em; } #summary .col1 .pag a { text-decoration: none; color: #000000; padding: 5px 7px 5px 7px; border: 1px solid #cccccc; margin: 0px 7px 0px 7px; } #summary h2 { font-size: 140%; color: #000000; font-weight: normal; padding-left: 0px; margin-bottom: 0px; /*background: url(../img/img_rss_logo.gif) no-repeat right; line-height: 2em;*/ } #summary .intro { width: 700px; font-size: 70%; color: #333333; line-height: 1.4em; padding-left: 0px; margin-bottom: 15px; float: left; margin-top: 0px; line-height: 1.6em; } #summary .intro a { color: #cc0000; text-decoration: none; } #summary .intro a:hover { color: #cc0000; text-decoration: underline; } #summary .col1 .item .pic img { width: 172px; } #summary .col1 .item .info h3 a { font-size: 80%; color: #000000; text-decoration: none; width: 330px; float: left; margin-bottom: 10px; } #summary .col1 .item .info h3 a:hover { text-decoration: underline; } #summary .col1 .item .info p { font-size: 70%; color: #333333; line-height: 1.4em; margin-bottom: 10px; float: left; } #summary .col1 .item .info p a { color: #cc0000; text-decoration: none; } #summary .col1 .item .info p a:hover { color: #cc0000; text-decoration: underline; } #summary .col1 .item .info p.cta a { color: #cc0000; text-decoration: none; font-weight: bold; padding-top: 10px; float: left; background: url(../img/bullet_redtri.jpg) left no-repeat; padding-left: 15px; background-position: 0px 13px; } #summary .col1 .item .info p.cta a:hover { color: #cc0000; text-decoration: underline; } .col2 h2 { font-size: 140%; color: #333333; font-weight: normal; padding-left: 0px; margin-bottom: 10px; } .col2 .featuredContent h3 { padding: 0px 10px 0px 10px; text-align: center; } .col2 .featuredContent h3 a { font-family: Georgia, "Times New Roman", Times, serif; font-size: 70%; color: #000000; text-decoration: none; text-align: center; } .col2 .featuredContent h3 a:hover { color: #cc0033;} .col2 .featuredContent p { font-family: Arial, Helvetica, sans-serif; font-size: 70%; color: #333333; } #summary .col2 .featuredHeader { text-align: center; float: none; color: black; padding-top: 10px; } #summary .col2 .featuredContent { width: 208px; background: #cccccc; text-align: center; } #summary .col2 .featuredContent .item-feature { border-bottom: 1px solid #9e9e9e; padding-bottom: 10px; } #summary .col2 .featuredContent img { border: 4px solid #656565; margin: 10px 0px 6px 0px; float: none; } #col2 label { line-height: 2.3em; float: left; margin-right: 10px; } /* FOOTER */ #footer { font-size: 65%; color: white; width: 938px; float: left; background: #cc0000; margin-left: 10px; margin-bottom: 15px; padding: 6px; } #footer a { color: white; text-decoration: none; } #footer a:hover { color: white; text-decoration: underline; } #credit p { margin-bottom: 10px; } #credit { font-size: 65%; margin-left: 16px; float: left; color: #999999; margin-bottom: 20px; } #credit a { color: #999999; text-decoration: none; } /* BANNERS */ #bannerSky { position: absolute; top: 10px; right: -140px; } #bannerHorizontal { width: 954px; height: 90px; overflow: hidden; } /* JFTV GLOBAL PADDING */ .padding_all_10px { padding: 10px; } .padding_topbanner { padding: 22px 36px 0px 36px; float: left; } .padding_all_19px { padding: 19px; } .padding_all_4px { padding: 6px; float: left; } .padding_all_20px { padding: 13px 20px 13px 0px; float: left; margin: 0px; } #static h2, #static h3, #static p, #static ul { width: 705px; } #static h2 { font-size: 140%; color: #000000; font-weight: normal; margin-bottom: 10px; } #static p { font-size: 70%; line-height: 1.6em; margin-bottom: 15px; } #static h3 { font-size: 80%; color: #000000; text-decoration: none; margin-bottom: 10px; } #static ul { font-size: 70%; list-style: circle; margin-left: 15px; margin-bottom: 15px; } #static li { margin-bottom: 15px; } #static a { color: #cc0000; text-decoration: none; } /* >> filename >> jftv_type.css >> project >> JFTV >> date >> 1st March 09 >> author >> jon leverrier >> url >> http://www.jonleverrier.com */ #top-bar { font-size: 70%; } #top-bar ul { color: black; list-style: none; } #top-bar ul li.first { padding-left: 0px; } #top-bar ul li.last { padding-right: 0px; border: 0px; } #top-bar ul li { float: left; border-right: 1px solid #000000; padding: 0px 10px 0px 10px; } #top-bar ul a { text-decoration: none; color: black; } #top-bar ul a:hover { text-decoration: underline; color: black; } #top-bar .date { width: 200px; float: right; } #top-bar .date p { text-align: right; } #globalNav { font-weight: bold; } #globalNav a { color: white; text-decoration: none; font-size: 80%; } #subscribe, #subscribePromo { width: 954px; margin-top: 15px; float: left; } #subscribe .col1 { width: 454px; float: left; } #subscribePromo .col1 { width: 454px; float: left; text-align: center; } #subscribe fieldset { background: #e8e8e9; border: 1px solid #cccccc; margin-left: 20px; padding: 20px; } #subscribe fieldset dl { width: 400px; } #subscribe fieldset dl dt { float: left; width: 100px; line-height: 3em; font-weight: bold; } #subscribe fieldset dl dd { margin-bottom: 15px; } #subscribe #e, #subscribe #p { border: 1px solid #999999; width: 270px; height: 28px; padding: 5px; } #subscribe .col2, #subscribePromo .col2 { float: right; width: 440px; padding-right: 20px; border-left: 1px solid #cccccc; } #subscribePromo h1 { font-size: 140%; color: #333333; font-weight: normal; padding-left: 20px; margin-bottom: 15px; } #subscribe .col1 h1, #subscribe .col2 h2, #subscribePromo .col2 h2 { font-size: 140%; color: #333333; font-weight: normal; padding-left: 20px; margin-bottom: 10px; } #subscribe .col1 p, #subscribe .col2 p, #subscribePromo .col2 p, #subscribe fieldset { font-family: Arial, Helvetica, sans-serif; font-size: 80%; color: #333333; line-height: 1.6em; margin-bottom: 10px; padding-left: 20px; } #subscribe .col2 ul { font-family: Arial, Helvetica, sans-serif; font-size: 80%; color: #333333; line-height: 1.6em; list-style: none; margin-bottom: 15px; margin-left: 20px; } #subscribe .col2 ul li { background: url(../img/img_infonav_li.gif) no-repeat; padding-left: 30px; margin-bottom: 15px; background-position: 0px 3px;} #subscribe .col2 span { font-weight: bold; } #subscribe .col2 a { color: #3399cc; text-decoration: none; } #subscribe .col2 a:hover { color: #3399cc; text-decoration: underline; }