API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 25th, 2013
129
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.52 KB | None | 0 0
raw download clone embed print report
  1. @charset "utf-8";
  2. /*
  3.  
  4. Logotype: font-family: 'Aldrich', san-serif;
  5. Text: font-family: 'Open Sans', sans-serif;
  6. Open Sans font-weights: 400, 300, 600, 700, 800
  7.  
  8. COLOR PALETTE
  9. The Gamers Nation color palette consists of 7 different colors that have been given name for convinience: Tech Yellow, Ice Blue, Water Blue, Deep Blue, Soft White, Light Gray, and Metal Gray. Each color may also have up to 2 variations: 15% more White or 25% more Black. These variations may not be available if they look like an existing color, is unnecessary or doesn't look good in general.
  10. ---------------------------------------
  11.  
  12. Tech Yellow 15%W:   #EFD58A     rgba(239,213,138,1)
  13. Tech Yellow:            #ECCE76     rgba(36,206,118,1)
  14. Tech Yellow 25%B:   #B19A58     rgba(177,154,88,1)
  15.  
  16. Ice Blue 15%W:      #7CB2EF     rgba(124,178,239,1)
  17. Ice Blue:               #65A5EC     rgba(101,165,236,1)
  18.  
  19. Water Blue:             #3F6089     rgba(63,96,137,1)
  20. Water Blue 25%B:    #2F4867     rgb(47,72,103,1)
  21.  
  22. Deep Blue:              #333745     rgba(51,55,69,1)
  23. Deep Blue 25%B:     #262934     rgba(38,41,52,1)
  24.  
  25. Soft White:             #FAFDFF     rgba(250,253,255,1)
  26.  
  27. Light Gray 15%W:    #EAEBEB     rgba(234,235,235,1)
  28. Light Gray:             #E6E7E8     rgba(230,231,232,1)
  29. Light Gray 25%B:    #ACADAE     rgba(172,173,174,1)
  30.  
  31. Metal Gray:             #2F2D30     rgba(47,45,48,1)
  32. Metal Gray 25%B:    #232224     rgba(35,34,36,1)
  33. Metal Gray 50%B:    #1A191B     rgba(26,25,27,1)
  34. Metal Gray 75%B:    #131314     rgba(19,19,20,1)
  35.  
  36. * {outline: 2px orange dashed;}
  37.  
  38. /* Toolbox
  39. --------------------------------------- */
  40.  
  41. .clear {
  42.     clear: both;
  43. }
  44.  
  45. /* Headlines and bodytext
  46. --------------------------------------- */
  47.  
  48. body { /* Default Text Style - non-text related body style is further down */
  49.     font-family: Arial, Helvetica, sans-serif;
  50.     font-size: 14px;
  51.     font-weight: 400;
  52.     line-height: 1.3;
  53. }
  54.  
  55. h2,
  56. h2>a { /* Headlines */
  57.     font-family: 'Lato', sans-serif;
  58.     font-size: 18px;
  59.     font-weight: 600;
  60.     line-height:1.65;
  61. }
  62.  
  63. h3,
  64. h3>a { /* Subheaders */
  65.     font-family: 'Lato', sans-serif;
  66.     font-size: 18px;
  67.     font-weight: 600;
  68.     line-height:1.35;
  69. }
  70.  
  71. p+h3, h2+h3 {
  72.     margin-top:18px; /* If there is text above h3, move it one line down */
  73. }
  74.  
  75.  
  76. /* General Hyperlinks
  77. --------------------------------------- */
  78. a { /* Standard hyperlink behavior */
  79.     text-decoration:none;
  80.     color: #3f6089/*Water Blue*/;
  81.    
  82.     -webkit-transition: color .1s linear;
  83.     -moz-transition: color .1s linear;
  84.     -o-transition: color .1s linear;
  85.     -ms-transition: color .2s linear;
  86.     transition: color .1s linear;
  87.  
  88. }
  89.  
  90. a:hover,
  91. .newsfeed article a:hover {
  92.     color: #333745/*Deep Blue*/;
  93.     text-decoration:underline;
  94. }
  95.  
  96. /* Logo
  97. --------------------------------------- */
  98.  
  99. h1, /* Logotype */
  100. h1 a:hover,  /* Prevents logotype from changing color on hovor */
  101. footer ul.gnLogo a /* Logotype (footer) */ {
  102.     font-family: 'Aldrich', san-serif;
  103.     font-size: 26px !important;
  104.     line-height: 55px;
  105.     text-align: left;
  106.     color: #E6E7E8/*Light Gray*/;
  107.    
  108.     float: left;
  109.     padding: 0 5px;
  110.     margin-top: -3px;
  111. }
  112.  
  113. h1 span {
  114.     color: #ECCE76/*Tech Yellow*/;
  115. }
  116.  
  117.  
  118. /* Header & Main Menu
  119. --------------------------------------- */
  120. header { /* Header at top of page */
  121.     width: 960px;
  122.     height: 55px;
  123.     padding:0 40px;
  124.     margin:0 auto;
  125.     background: url(../images/bg.png) #2f2d30/*Metal Gray*/;
  126. }
  127.  
  128. header nav { /* Main menu */
  129.     font-family: 'Aldrich', san-serif;
  130.     font-size:16px;
  131.     line-height: 55px; /* Centers the nav items */
  132.     text-align: right; /* Moves the nav to the right side of the page */
  133.     width: 950px;
  134.     padding: 0 5px;
  135.     margin: 0 auto;
  136. }
  137.  
  138. h1>a {
  139.     color: #FAFDFF/*Soft White*/;
  140.     padding: 8px 26px; /* Increase the hitbox of logo items */
  141.     position:relative;
  142.     right:37px; /* Realign and compensate h1 after padding */
  143. }
  144.  
  145. header nav>a {
  146.     color: #FAFDFF/*Soft White*/;
  147.     padding: 8px 18px; /* Increase the hitbox of logo items */
  148.    
  149.     position:relative;
  150.     left:13px; /* Realign and compensate menu items after padding */
  151. }
  152.  
  153. header nav a:hover {
  154.     color: #ECCE76/*Tech Yellow*/;
  155. }
  156.  
  157.  
  158. /* Body, wrapper & list styling
  159. --------------------------------------- */
  160.  
  161. body {
  162.     background: url(../images/bg_darkgray.png); /* Background Image */
  163. }
  164.  
  165. .content-wrapper { /* Page specific content-wrapper */
  166.     background: url(../images/main_bg.png) #E6E7E8/*Light Gray*/; /* Background Image */
  167.     box-shadow:inset 0 0 60px 5px rgba(47,45,48,.2)/*Metal Gray*/;
  168.     width: 960px;
  169.     padding: 40px 40px;
  170.     margin: 0px auto 0 auto;
  171.     height: 100%;
  172. }
  173.  
  174. .list ul {
  175.     list-style: outside square;
  176.     margin-top: 5px;
  177. }
  178.  
  179. .list ol {
  180.     list-style: outside decimal;
  181.     margin-top: 5px;
  182. }
  183.  
  184. .list li {
  185.     margin-left: 24px;
  186. }
  187.  
  188.  
  189. /* Content (Left)
  190. --------------------------------------- */
  191.  
  192. section.left {
  193.     float: left;
  194.     width: 620px;
  195.     background:url(../images/bg_gray.png);
  196. }
  197.  
  198. section.left p, /* Body text */
  199. section.left li {
  200.     color: #131314  /*Metal Gray 75%B*/;
  201. }
  202.  
  203. /* Stream / Video player
  204. --------------------------------------- */
  205.  
  206. .stream { /* Video player-container (div) */
  207.     height: 349px;
  208.     width: 620px;
  209. }
  210.  
  211. section.video-embeds object, /* Objects in the section containing video-player (stream) */
  212. section.video-embeds embed {
  213.     height: 349px;
  214.     width: 620px;
  215. }
  216.  
  217. .announcement {
  218.     width: 588px;
  219.     min-height:80px;
  220.     padding: 8px 16px;
  221.     border-top:none;
  222.     background: url(../images/main_bg.png) #E6E7E8/*Light Gray*/;
  223. }
  224.  
  225. .announcement aside {
  226.     width:27px;
  227.     min-height:80px;
  228.     padding:0 4px 0 0;
  229.     display:block;
  230.     float:left;
  231. }
  232.  
  233. /* Thumbnail sliders: containers
  234. --------------------------------------- */
  235.  
  236. .frontpageSlider { /* Containers for video slider */
  237.     width: 530px;
  238.     height: 164px;
  239.     padding: 8px 45px 8px 45px;
  240.     margin-bottom:1px;
  241.     clear: both;
  242.     position: relative;
  243.     white-space: nowrap;
  244. }
  245.  
  246. .frontpageSlider h2 {
  247.     display:block;
  248.     margin:0 3px 0 2px;
  249. }
  250.  
  251. .frontpageSlider h2 a {
  252. }
  253.  
  254. #carousel-1 {
  255.     padding-top:16px; /* Must be .frontpageSlider top padding + 8 to fit the first carousel correctly */
  256. }
  257.  
  258. /* Thumbnail sliders: Content
  259. --------------------------------------- */
  260.  
  261. .frontpageSlider .thumbnail img { /* Video & stream thumbnails */
  262.     width: 163px;
  263.     height: 90px;
  264. }
  265.  
  266. .frontpageSlider :before { /* Slider hover text */
  267.     font-size: 90%;
  268.     float: left;
  269.     color: #EAEBEB /* Light Gray 15%W */;
  270.     background: rgba(35,34,36,.95) /* Metal Gray 25%B */;
  271.     position: absolute;
  272.     padding: 8px 14px;
  273. }
  274.  
  275. #carousel-1 li:hover a:before,
  276. #carousel-2 li:hover a:before {
  277.   content: 'PLAY';
  278.     margin: 30px 0 0 52px;
  279. }
  280.  
  281. #carousel-1 .active:before,
  282. #carousel-2 .active:before,
  283. #carousel-1 li:hover .active:before,
  284. #carousel-2 li:hover .active:before {
  285.   content: 'NOW PLAYING';
  286.     margin: 30px 0 0 30px;
  287. }
  288.    
  289. #carousel-3 li:hover a:before {
  290.   content: 'BROWSE GALLERY';
  291.     margin: 30px 0 0 24px;
  292. }
  293.  
  294.  
  295. /* Events
  296. --------------------------------------- */
  297.  
  298. figure { /* Container for event image and description */
  299.     max-width: 100%; /* % of the area of the event image that the figcaption span across */
  300. }
  301.  
  302. figcaption .timestamp {
  303.     padding: 4px 8px;
  304.     display:inline;
  305.     font-weight:300;
  306.     color: #FAFDFF/*Soft White*/ !important;
  307.     background: rgba(19,19,20,.9)/*Metal Gray 75%B*/;
  308. }
  309.  
  310. figcaption h4 a{ /* Event title/link */
  311.     position:relative;
  312.     top:-12px;
  313.     padding: 4px 8px;
  314.    
  315.     background: rgba(19,19,20,.9)/*Metal Gray 75%B*/;
  316.     color: #65A5EC;
  317.     font-size:16px;
  318.     line-height:2;
  319.     font-weight:300;
  320.     word-wrap:5px;
  321.    
  322. }
  323.  
  324. figcaption h4 a:hover { /* Hover: Event titles */
  325.     color: #ECCE76/*Tech Yellow*/!important;
  326. }
  327.  
  328. figcaption { /* Container for event title + other text  */
  329.   position: relative;
  330.   top:-75px;
  331. }
  332.  
  333. /* Archive
  334. --------------------------------------- */
  335.  
  336. #archive_collapsable .ui-accordion-header { /* Archive article header links */
  337.     padding: 10px;
  338.     margin: 0;
  339.     border-top: 2px rgba(172,173,174,.75)/*Light Gray 25%B*/ solid;
  340.     cursor: pointer;
  341. }
  342.  
  343. .listitem { /* Archive article container */
  344.     height: 70px;
  345.     padding: 12px;
  346.     border-top: 1px #c8c8c8 dotted;
  347. }
  348.  
  349. .listitem a img { /* Archive article thumbnail */
  350.     width: 120px;
  351.     height: 67px;
  352.     margin: 0 12px 0 0;
  353.     float: left;
  354.    
  355.     background: url(../images/loading.gif) 50% 50% no-repeat; /* Loading animation */
  356.     background-size: 120px;
  357.    
  358. }
  359.  
  360. #archive_collapsable .archiveList { /* Archive Sections */
  361.     padding-bottom: 12px;
  362. }
  363.  
  364.  
  365. /* Aside
  366. --------------------------------------- */
  367.  
  368. .content-wrapper aside { /* Aside wrapper */
  369.     float: left;
  370.     width: 310px;
  371.     margin-left: 30px; /* Space from .left to aside */
  372. }
  373.  
  374. .content-wrapper>aside * {
  375.     transition: color .1s, border .1s, border-color .1s, background .1s, background-color .1s;
  376.     -o-transition: color .1s, border .1s, border-color .1s, background .1s, background-color .1s;
  377.     -ms-transition: color .1s, border .1s, border-color .1s, background .1s, background-color .1s;
  378.     -moz-transition: color .1s, border .1s, border-color .1s, background .1s, background-color .1s;
  379.     -webkit-transition: color .1s, border .1s, border-color .1s, background .1s, background-color .1s;
  380. }
  381.  
  382.  
  383. /* Aside vertical navigation menu
  384. --------------------------------------- */
  385.  
  386. .content-wrapper>aside ul li {
  387.     padding: 14px 10px;
  388.     border-left: 2px rgba(172,173,174,.75)/*Light Gray 25%B*/ solid;
  389. }
  390.  
  391. .content-wrapper>aside li:hover {
  392.     border-color: #3f6089/*Water Blue*/;
  393.     background: #EAEBEB/*Light Gray 15%W*/;
  394. }
  395.  
  396. .content-wrapper>aside li:active {
  397.     border-color: #2F2D30/*Metal Gray*/;
  398. }
  399.  
  400.  
  401. /* Aside newsfeed
  402. --------------------------------------- */
  403.  
  404. .content-wrapper>aside section:first-child article {
  405.     margin:0 0 16px 0;
  406. }
  407.  
  408. .content-wrapper>aside section:first-child article p { /* Article preview */
  409.     margin:0 0 4px 0;
  410. }
  411.  
  412. .itemInfo a+p,
  413. .content-wrapper>aside section:first-child article span, /* Timestamp */
  414. .content-wrapper>aside section:first-child article span+a, /* Read more */
  415. .content-wrapper>aside section:first-child article span+a+a { /* Browse articles */
  416.     color:#acadae/*Light Gray 25%B*/;
  417.     font-size:90%;
  418. }
  419.  
  420. .content-wrapper>aside section:first-child article span { /* Timestamp */
  421.     font-size:87%;
  422. }
  423.  
  424. .content-wrapper>aside section:first-child article span+a { /* Browse articles */
  425.     padding:0 4px;
  426.     border-left:1px solid rgba(47,45,48,.2)/*Metal Gray*/;
  427.     border-right:1px solid rgba(47,45,48,.2)/*Metal Gray*/;
  428. }
  429.  
  430.  
  431.  
  432. /* Forms
  433. --------------------------------------- */
  434.  
  435. /* Text input fields */
  436. input[type=email],
  437. input[type=text] {
  438.     color: #2F2D30 /*Metal Gray*/;
  439.     box-shadow: inset 0px 1px 2px rgba(19,19,20,.1)/*Metal Gray 75%B*/;
  440.     border: solid 1px #ACADAE /*Light Gray 25%B*/;
  441.     padding: 10px;
  442.     width: 250px; /* Standard width */
  443. }
  444.  
  445. input[type=email]:focus,
  446. input[type=text]:foucs {
  447.     color: #2F2D30 /* Metal Gray */;
  448. }
  449.  
  450. input[type=email]:hover,
  451. input[type=text]:hover {
  452.     box-shadow: inset 0px 1px 2px rgba(19,19,20,.2)/*Metal Gray 75%B*/;
  453. }
  454.  
  455. input[type=email]:active,
  456. input[type=text]:active {
  457.     box-shadow: inset 0px 1px 2px rgba(19,19,20,.5)/*Metal Gray 75%B*/;
  458. }
  459.  
  460. /* Buttons */
  461. button,
  462. input[type=submit] {
  463.     -webkit-box-shadow: inset 0 1px 0 0 #FAFDFF /*Soft White*/;
  464.     box-shadow: inset 0 1px 0 0 #FAFDFF; /*Light Gray 15%W*/
  465.     background-color: #EAEBEB /*Light Gray 15%W*/;
  466.     border-radius: 2px; /*Light Gray 25%B*/
  467.     border: 1px solid rgba(172,173,174,.5) /*Light Gray 25%B*/;
  468.     color: rgba(47,45,48,.7) /*Metal Gray*/;
  469.     padding: 7px 13px;
  470.     text-decoration: none;
  471.     text-shadow: 1px 1px 0 #FAFDFF /*Soft White*/;
  472.     display: inline-block;
  473.     position: relative;
  474. }
  475.  
  476. button:hover,
  477. input[type=submit]:hover {
  478.     color: #131314; /*Light Gray*/
  479.     background-color: #E6E7E8; /*Light Gray 25%B*/
  480.     border: 1px solid rgba(172,173,174,.4) /*Light Gray 25%B*/;
  481. }
  482.  
  483. button:active,
  484. input[type=submit]:active {
  485.     cursor: pointer;
  486.     border: 1px solid rgba(172,173,174,.8) /*Light Gray 25%B*/;
  487. }
  488.  
  489. /* HTML5 validation styles */  
  490. input:required,
  491. textarea:required {
  492.     background: #FAFDFF /*Soft White*/ url(../images/red_asterisk.png) no-repeat right center;
  493.     outline: none;
  494. }
  495. input:required:valid,
  496. textarea:required:valid {
  497.     background: #FAFDFF /*Soft White*/ url(../images/valid.png) no-repeat 98% center;
  498.     box-shadow: 0 0 5px #5cd053;
  499.     border-color: #28921f;
  500.     box-shadow: inset 0px 1px 2px rgba(19,19,20,.5)/*Metal Gray 75%B*/;
  501. }
  502. input:focus:invalid,
  503. textarea:focus:invalid {
  504.     background: #FAFDFF /*Soft White*/ url(../images/invalid.png) no-repeat 98% center;
  505.     box-shadow: 0 0 5px #d45252;
  506.     box-shadow: inset 0px 1px 2px rgba(19,19,20,.5)/*Metal Gray 75%B*/;
  507.     border-color: #b03535;
  508. }
  509.  
  510.  
  511. /* Aside newsletter signup form
  512. --------------------------------------- */
  513.  
  514. .content-wrapper>aside form {
  515. }
  516.  
  517. .content-wrapper>aside .email {
  518.     display:inline-block;
  519.     width: 150px;
  520. }
  521. .content-wrapper>aside .submit {
  522.     width:90px;
  523.     padding: 9px 0;
  524.     margin:0 0 0 5px;
  525.     display:inline-block;
  526. }
  527.  
  528.  
  529. /* Footer
  530. --------------------------------------- */
  531.  
  532. footer {
  533.     min-height:120px;
  534.     background: url(../images/bg.png) #2f2d30/*Metal Gray*/;
  535. }
  536.  
  537. footer .footerContent {
  538.     width: 960px;
  539.     padding: 10px 0;
  540.     margin: 0 auto;
  541. }
  542.  
  543.  
  544. /* Footer: Links & Text
  545. --------------------------------------- */
  546.  
  547. footer ul { /* Floating sections */
  548.     width:158px;
  549.     float: left;
  550.     margin-right: 12px;
  551.     color: #E6E7E8/*Light Gray*/;
  552. }
  553.  
  554. footer ul li a { /* Footer links */
  555.     float: left;
  556.     min-width:150px;
  557. }
  558.  
  559. footer ul li a { /* White links */
  560.     color: #E6E7E8/*Light Gray*/;
  561. }
  562.  
  563. footer ul li:first-child, /* Blue Links */
  564. footer ul li:first-child a {
  565.     color: #3f6089/*Water Blue*/;
  566.     font-size:16px;
  567.     line-height:1.45; /* Distance from blue links > white links */
  568. }
  569.  
  570. footer a { /* Footer link animation */
  571.     -webkit-transition: all .12s;
  572.     -moz-transition: all .12s;
  573.     -o-transition: all .12s;
  574.     -ms-transition: all .12s;
  575.     transition: all .12s;
  576. }
  577.  
  578. footer a:hover {
  579.     color: #ECCE76/*Tech Yellow*/ !important; /* All links turn yellow on hover */
  580. }
  581.  
  582.  
  583. /* Footer: Social Media
  584. --------------------------------------- */
  585.  
  586. footer a.socialLink {
  587.     background-image: url(../images/sprite.png);
  588.     width: 16px;
  589.     height: 16px;
  590.     min-width: 16px;
  591.     min-height: 16px;
  592.     margin: 4px 8px 4px 0; /* Social Media icons spacing */
  593. }
  594.  
  595. footer a.yt_ico { /* Youtube Icon sprite */
  596.     background-position: 0 0;
  597. }
  598.  
  599. footer a.fb_ico { /* Facebook Icon sprite */
  600.     background-position: -16px 0;
  601. }
  602.  
  603. footer a.tw_ico { /* Twitter Icon sprite */
  604.     background-position: -32px 0;
  605. }
  606.  
  607. footer li.copyright,
  608. footer li.copyright a {
  609.     clear: left;
  610.     color: #acadae/*Light Gray 25%B*/;
  611. }
  612.  
  613. .yt_ico:hover,
  614. .fb_ico:hover,
  615. .tw_ico:hover { /* Social Media icons animation */
  616.     -webkit-transform: rotate(360deg);
  617.     -moz-transform: rotate(360deg);
  618.     -o-transform: rotate(360deg);
  619.     -ms-transform: rotate(360deg);
  620.     transform: rotate(360deg);
  621.     -webkit-transition: -webkit-transform .5s;
  622.     -moz-transition: -moz-transform .5s;
  623.     -o-transition: -o-transform .5s;
  624.     -ms-transition: -ms-transform .5s;
  625.     transition: transform .5s;
  626. }
  627.  
  628.  
  629. /* Footer: GN Logo
  630. --------------------------------------- */
  631.  
  632. footer ul.gnLogo {
  633.     margin-right:0;
  634. }
  635.  
  636. footer ul.gnLogo a {
  637.     opacity: 0.6;
  638.     margin: 20px 0 0 60px;
  639.     color: #E6E7E8/*Light Gray*/ !important;
  640. }
  641.  
  642. footer ul.gnLogo a span {
  643.     opacity: 0.6;
  644. }
  645.  
  646. footer ul.gnLogo a:hover {
  647.     opacity: 1;
  648. }
  649.  
  650. footer ul.gnLogo a:hover span {
  651.     color: #ECCE76/*Tech Yellow*/;
  652.     opacity: 1;
  653. }
  654.  
  655.  
  656. /* Footer: Stick to bottom
  657. --------------------------------------- */
  658.  
  659. html,
  660. body {
  661.     height: 100%;
  662. }
  663.  
  664. .wrapper {
  665.     min-height: 100%;
  666.     height: auto !important;
  667.     height: 100%;
  668.     margin: 0 auto -120px auto; /* the bottom margin is the negative value of the footer's height */
  669.     box-shadow:inset 0 0 80px 5px rgba(19,19,20,.25)/*Metal Gray 75%B*/;
  670. }
  671.  
  672. .push { /* Empty div that force the footer to the bottom of the page */
  673.     height: 120px; /* .push must be the same height as .footer */
  674.     clear: both;
  675. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!