/* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ #topad { clear:both; background:/*#E91C2F*/ #000; text-align:center; line-height:0; } h1#logo { background:url(../images/bc_logo.gif) no-repeat; width:280px; height:50px; text-indent:-9999px; display:block; margin:43px 0 15px; } h1#logo a { width:280px; height:50px; display:block; } #header { border-top:3px solid #b00203; } #header nav ul, #header nav ol { list-style: none outside none; margin:55px 0 0; padding: 0; float:right; } #header nav ul li { font-family: 'Signika', Helvetica, Arial, sans-serif; font-size:16px; font-weight:400; text-transform:uppercase; display: inline; padding:5px 10px; } #header nav ul li a { color:#3f3f3f; text-decoration:none; } #header nav ul li a:hover { color:#b00203; } #login_wrap { background: #b00203; height: 200px; display: none; } #login_btn { position:absolute; top:0; right:0; } #hero, #hero_in { -webkit-box-shadow: 0px 0px 20px 0px #999999; box-shadow: 0px 0px 20px 0px #999999; border:solid 10px #fff; border-bottom:none; } #hero section, #hero_in section { height:220px; padding:160px 0 0; } #hero_in section { height:100px; } #hero section .container, #hero_in section .container { height:220px; } #hero_in section .container { height:100px; } #hero section h2, #hero_in section h2 { /* Fallback for web browsers that don't support RGBa */ background-color: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background-color: rgba(0, 0, 0, 0.75); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; color:#fff; padding:15px 15px 0; float:left; font-weight:700; font-size:40px; margin:0; /*max-width:70%;*/ width:80%; line-height:48px; } #hero_in section h2 { position:absolute; bottom:10px; padding:10px 15px; width:auto; max-width: 93.6%; } #hero section p, #hero_in section p { clear:left; /* Fallback for web browsers that don't support RGBa */ background-color: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background-color: rgba(0, 0, 0, 0.75); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; color:#fff; padding:5px 15px 10px; float:left; width:80% /*80%*/; font-size:15px; text-transform:uppercase; margin:0; line-height:24px; } #login { } .bulls_br { clear:both; background:url(../images/hr_bg.gif) repeat-x left 10px; margin:0 0 10px; } .bulls_br_img { background:url(../images/hr_icon_bc.gif) no-repeat center center #fff; width:29px; height:19px; padding:0 15px; margin:0 auto; } footer { background:#000; padding:30px 0 0; color:#fff; font-size:13px; } footer h5 { font-weight:700; color:#999; margin:0 0 10px; } footer section ul li { margin:0 0 8px; } footer section ul li a, footer section ul li a:visited { color:#fff; } footer section textarea { width:450px; } footer section label { display:none; } footer section button { float:right; } footer .copyright { background:url(../images/footer_logo_turner.gif) right 95px no-repeat; padding:10px 0; border-top:solid 1px #1a1a1a; border-bottom:solid 1px #1a1a1a; color:#aaa; font-size:13px; } footer .copyright a { color:#fff; } /* #Page Styles ================================================== */ /* Homepage */ .container.hr_home, .container.hr_in { border-top:solid 5px #b00203; padding:30px 0 0; } .container.hr_in { padding:30px 0; } #discovery section h4 { border-bottom:solid 1px #ccc; padding:0 0 3px 30px; margin:0 0 15px; } #discovery section h4#discussions { background:url(../images/icon_discussion.gif) no-repeat 5px 7px; } #discovery section h4#leaderboards { background:url(../images/icon_leaderboard.gif) no-repeat 4px 7px; padding-left:28px; } #discovery section h4#members { background:url(../images/icon_members.gif) no-repeat 3px 7px; padding-left:45px; } article#how { text-align:center; margin:30px 0; } article#how h2 { font-size:35px; font-style:italic; text-transform:none; color:#000; margin:0 0 25px; } article#how p { font-size:16px; } article#how section { text-align:left; margin:20px 0; } /* Register */ #regPage .plckProjRow_Right input { float:left; } #regPage .plckProjRow_Right div.error { float:left; color:#b00203; font-size:13px; font-weight:700; margin:1px 0 0 20px; } .onRegPage { display:none; } .formhalf { float:left; margin-right:10px; } /* News & Media */ .news_clip { } .news_clip p.pubdate { font-size:13px; color:#999; margin:0 0 7px; } .news_clip p.pubdate span { font-style:italic; } ul.tweet_list {} ul.tweet_list li small a, ul.tweet_list li p.timestamp { color:#999; text-transform:uppercase; font-size: 80%; } /* #Pluck Styles ================================================== */ .Summary_ForumsContainer { margin:0 0 10px; } .Summary_ForumsIn a { color:#000; } table.Summary_ProfileTable tr { margin:0 0 15px; } td.Summary_ProfileTableLeft { padding:0 0 10px; } td.Summary_ProfileTableRight { vertical-align:top; padding:0 0 0 5px; } td.Summary_ProfileTableLeft img { border: 1px solid #D2D2D2 !important; height: 45px; overflow: hidden; width: 45px; } td.Summary_ProfileTableRight .Summary_ProfileTime { font-size:13px; color:#3f3f3f; } /* #Login ================================================== */ /* Login Container (default to float:right) */ #loginContainer { position:absolute; top:0; right:0; font-size:12px; } /* Login Button */ #loginButton, #logoutButton { display:inline-block; float:right; background:#b00203; border:1px solid #7c0001; border-top:none; border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; position:relative; z-index:30; cursor:pointer; } /* Login Button Text */ #loginButton span, #logoutButton span { color:#fff; font-size:14px; font-weight:bold; padding:5px 15px; /*padding:7px 29px 9px 10px; background:url(../images/loginArrow.png) no-repeat 53px 7px;*/ display:block } #loginButton:hover, #logoutButton:hover { /*background:url(../images/buttonbgHover.png) repeat-x;*/ text-decoration:none; } #welcomeuser { position:absolute; right:85px; top:6px; width:400px; text-align:right; font-size:13px; } /* Login Box */ #loginBox { position:absolute; top:34px; right:0; display:none; z-index:29; } /* If the Login Button has been clicked */ #loginButton.active { border-radius:0; } #loginButton.active span { background-position:53px -76px;} /* A Line added to overlap the border */ #loginButton.active em { position:absolute; width:100%; height:1px; background:#b00203; bottom:-1px; } /* Login Form */ #slaSigninForm { width:255px; margin-top:0px; background:#b00203; border:1px solid #7c0001; border-radius:3px 0 3px 3px; -moz-border-radius:3px 0 3px 3px; padding:6px; } #loginpage #slaSigninForm { width:100%; background:none; border:none; border-radius:0; -moz-border-radius:0; padding:0; } #slaSigninForm fieldset { margin:0; display:block; border:0; padding:0; } fieldset#body { background:#fff; border-radius:3px; -moz-border-radius:3px; padding:10px 13px; margin:0; } #slaSigninForm #checkbox, #slaSigninForm .chk { width:auto; margin:1px 9px 0 0; float:left; padding:0; border:0; *margin:-3px 9px 0 0; /* IE7 Fix */ } #slaSigninForm .error { margin:0 0 10px; color:#b00203; font-style:italic; } #body label { color:#3a454d; margin:9px 0 0 0; display:block; float:left; } #slaSigninForm #body fieldset label { display:block; float:none; margin:0 0 6px 0; } /* Default Input */ #slaSigninForm input { border:1px solid #899caa; border-radius:3px; -moz-border-radius:3px; color:#3a454d; font-weight:bold; padding:8px 8px; box-shadow:inset 0px 1px 3px #bbb; -webkit-box-shadow:inset 0px 1px 3px #bbb; -moz-box-shadow:inset 0px 1px 3px #bbb; font-size:12px; } /* Sign In Button */ #slaSigninForm #login { width:auto; float:left; /*background:#339cdf url(../images/loginbuttonbg.png) repeat-x; color:#fff;*/ padding:7px 10px 8px 10px; /*text-shadow:0px -1px #278db8; border:1px solid #339cdf; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;*/ margin:0 12px 0 0; cursor:pointer; *padding:7px 2px 8px 2px; /* IE7 Fix */ } /* Forgot your password */ #slaSigninForm span { text-align:center; display:block; padding:7px 0 4px 0; } #slaSigninForm span a { color:#fff; font-size:12px; } .registerpop { width:545px; padding:10px; } .registerpop h1#logo { margin:0; } .registerpop input[type="text"], .registerpop input[type="password"], .registerpop input[type="email"], .registerpop textarea, .registerpop select { margin-bottom:0; } .container.pop.thanks #content { width:545px; background:url(../images/thankyou.jpg) no-repeat left 160px; } /* #Contact ================================================== */ #alert2 ul, #alert1 ul { margin-top:10px; margin-left:20px; font-style:italic; color:#b00203; } #alert1 { clear:both; } #contactForm legend, #contactForm .hidden, #footerForm .hidden { display:none; } /* #Blogs_BC ================================================== */ #blogs_bc { font-size:80%; font-family:Tahoma, Arial, sans-serif; } #blogs_bc .pluck-discovery-avatar, #blogs_bc .pluck-discovery-parent, #blogs_bc .pluck-discovery-username { display:none !important; } #blogs_bc .pluck-discovery-desc { margin:0 !important; } #blogs_bc .pluck-discovery-title { margin:0 !important; padding:0 !important; } /* #Thank_YOU ================================================== */ #thank-you { margin:50px 0; text-align:center; } .thank-you-logo { margin:0 0 30px; } #thank-you p { font-size:18px; line-height:1.7; } #thank-you-form { background:#b00203; padding:30px 0; color:#fff; } #thank-you-form h3 { color:#fff; } #thank-you-form form { margin:0; } #thank-you-form input, #thank-you-form textarea { width:92%; padding:10px; font-size:14px; } #thank-you-form textarea { width:96%;} #thank-you-form #alert1 h4 { color:#ccc; } #thank-you-form #alert1 ul { color:#fff; } #thank-you ul#social { margin:0; } #thank-you ul#social li { display:inline-block; height:76px; width:77px; background-image:url(../images/icons_social.png); margin:0 5px; text-indent:-9999px; } li#tw { background-position: 0px 0; } li#fb { background-position: -93px 0; } li#ig { background-position: -187px 0; } li#gplus { background-position: -279px 0; } li#yt { background-position: -373px 0; } li#pin { background-position: -466px 0; } li#fl { background-position: -561px 0; } #thank-you ul#social li a { display:block; height:76px; width:77px; } /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { h1#logo { margin:62px 0 15px; } footer .copyright { background:url(../images/footer_logo_turner.gif) right 120px no-repeat; } #header nav ul li { float:left; margin:0; } #header nav ul li#btn_news { clear:left; } td.Summary_ProfileTableLeft { padding:0 0 20px; } td.Summary_ProfileTableLeft img { height: 35px; width: 35px; } td.Summary_ProfileTableRight .Summary_ProfileTime { font-size:12px; } #hero section h2 { width:80%; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { aside { padding:30px 0 0; } h1#logo { margin:55px auto 0; } nav ul, nav ol { float:none; } #header nav ul, #header nav ol { margin:20px 0 0; text-align:center; } footer section textarea { width:410px; } footer section ul li { display:inline; padding:0 15px 0 0; } #hero section, #hero_in section { height:200px; padding:40px 0 0; } #hero_in section { height:100px; } #hero_in section .container { height:100px; } #hero section h2, #hero_in section h2 { padding:5px 10px 0; font-size:32px; line-height:32px; } #hero section p { padding:5px 15px 10px; width:88%; font-size:14px; line-height:22px; } article#discovery section { margin:0 0 30px; } article#how section { margin:0; } article#how section ul { margin-bottom:0; } #hero section .container, #hero_in section .container { height:220px; } #hero_in section .container { height:100px; } #nbaheader { display:none; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { footer .copyright { background:url(../images/footer_logo_turner.gif) center 217px no-repeat; padding:10px 0 40px; } #hero section { padding:10px 0 0; } #hero section h2, #hero_in section h2 { font-size:28px; width:92%; position:absolute; bottom:20px; padding:7px; } #hero_in section h2 { width:auto; bottom:0; max-width: 92%; } #hero section p { display:none; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { footer section input[type="text"], footer section input[type="password"], footer section input[type="email"] { width:290px; } footer section textarea { width:290px; } footer .copyright { background:url(../images/footer_logo_turner.gif) center 315px no-repeat; padding:10px 0 40px; } #hero section { padding:10px 0 0; } #hero section h2, #hero_in section h2 { font-size:28px; width:88.8%; position:absolute; bottom:15px; padding:7px; } #hero_in section h2 { width:auto; bottom:0; max-width: 88.8%; } #hero section p { display:none; } } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */