/* CSS Document */ /* This file is used as a part of the inside out PHP Project. This version of this file belongs to the "trunk" version of the project and is used as the starting point for this project. */ /* import fonts for footer css */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300); /* begining of header resize css */ /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; } body { line-height: 1; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; } ol, ul { list-style: none; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } /* =Scss Variables -------------------------------------------------------------- */ /* =Global -------------------------------------------------------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background-color: #DAAFFB; color: #505050; font-family: "Ubuntu", sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8; } /* Headings */ h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: 300; } a { text-decoration: none; color: #DAAFFB; } a:hover { color: #A851F9; } /* =Template -------------------------------------------------------------- */ #wrapper { width: 100%; margin: 0 auto; } #main { background-color: #fff; padding-top: 150px; } .container { width: 80%; margin: 0 auto; padding: 0 30px; } section { padding: 60px 0; } section h1 { font-weight: 700; margin-bottom: 10px; } section p { margin-bottom: 30px; } section p:last-child { margin-bottom: 0; } section.color { background-color: #DAAFFB; color: white; } /* =Info Bar -------------------------------------------------------------- */ #info-bar { background-color: #DAAFFB; } #info-bar a { color: white; font-size: 14px; text-transform: uppercase; display: inline-block; margin: 0; padding: 10px; } #info-bar a:hover { background-color: #A851F9; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { display: block; width: 50%; } #info-bar span.all-tutorials { float: left; text-align: left; } #info-bar span.back-to-tutorial { float: right; text-align: right; } /* =Header -------------------------------------------------------------- */ header { width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #8302B4; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } header h1#logo { display: inline-block; height: 150px; line-height: 150px; float: left; font-family: "Oswald", sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav { display: inline-block; float: right; } header nav a { line-height: 150px; margin-left: 20px; color: #FFF; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav a:hover { color: white; } header.smaller { height: 75px; } header.smaller h1#logo { width: 150px; height: 75px; line-height: 75px; font-size: 30px; } header.smaller nav a { line-height: 75px; } /* =Footer -------------------------------------------------------------- */ /* =Extras -------------------------------------------------------------- */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } /* =Media Queries -------------------------------------------------------------- */ @media all and (max-width: 660px) { /* =Header -------------------------------------------------------------- */ header h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; } header nav { display: block; float: none; height: 50px; text-align: center; margin: 0 auto; } header nav a { line-height: 50px; margin: 0 10px; } header.smaller { height: 75px; } header.smaller h1#logo { height: 40px; line-height: 40px; font-size: 30px; } header.smaller nav { height: 35px; } header.smaller nav a { line-height: 35px; } } @media all and (max-width: 600px) { .container { width: 100%; } #info-bar a { display: block; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { width: 100%; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { float: none; text-align: center; } #info-bar span.all-tutorials { border-bottom: solid 1px #A851F9; } } /* end of header resize css */ /* begining of inside out global css */ #logo a{ text-decoration: none; color: #FFF; } #primary_nav_wrap { right: 250px;; display: inline; position: fixed; background: #FFF; z-index: 1000; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; width: 350px; } #primary_nav_wrap ul { list-style: none; position: relative; float: left; margin: 0; padding: 0 } #primary_nav_wrap ul a { display: block; color: #333; text-decoration: none; font-weight: 700; font-size: 12px; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif } #primary_nav_wrap ul li { position: relative; float: left; margin: 0; padding: 0 } #primary_nav_wrap ul li.current-menu-item { background: #ddd } #primary_nav_wrap ul li:hover { background: #DDD } #primary_nav_wrap ul ul { display: none; position: absolute; top: 100%; left: 0; background: #f6f6f6; border: thin #225AA7 solid; padding: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; } #primary_nav_wrap ul ul li { float: none; width: 200px } #primary_nav_wrap ul ul a { line-height: 120%; padding: 10px 15px } #primary_nav_wrap ul ul ul { top: 0; left: 100% } #primary_nav_wrap ul li:hover > ul { display: block } /* ending of inside out css */ /* begining of footer css */ /* https://bootsnipp.com/snippets/1KEEq This file is used as a part of the inside out PHP Project. This version of this file belongs to the "trunk" version of the project and is used as the starting point for this project. */ footer { background-color: #0c1a1e; min-height: 350px; font-family: 'Open Sans', sans-serif; } .footerleft { margin-top: 50px; padding: 0 36px; } .logofooter { margin-bottom: 10px; font-size: 25px; color: #fff; font-weight: 700; } .footerleft p { color: #fff; font-size: 12px !important; font-family: 'Open Sans', sans-serif; margin-bottom: 15px; } .footerleft p i { width: 20px; color: #999; } .paddingtop-bottom { margin-top: 50px; } .footer-ul { list-style-type: none; padding-left: 0px; margin-left: 2px; } .footer-ul li { line-height: 29px; font-size: 12px; } .footer-ul li a { color: #a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; } .footer-ul i { margin-right: 10px; } .footer-ul li a:hover { transition: color 0.2s linear 0s, background 0.2s linear 0s; color: #ff670f; } .social:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); } .icon-ul { list-style-type: none !important; margin: 0px; padding: 0px; } .icon-ul li { line-height: 75px; width: 100%; float: left; } .icon { float: left; margin-right: 5px; } .copyright { min-height: 40px; background-color: #000000; } .copyright p { text-align: left; color: #FFF; padding: 10px 0; margin-bottom: 0px; } .heading7 { font-size: 21px; font-weight: 700; color: #d9d6d6; margin-bottom: 22px; } .post p { font-size: 12px; color: #FFF; line-height: 20px; } .post p span { display: block; color: #8f8f8f; } .bottom_ul { list-style-type: none; float: right; margin-bottom: 0px; } .bottom_ul li { float: left; line-height: 40px; } .bottom_ul li:after { content: "/"; color: #FFF; margin-right: 8px; margin-left: 8px; } .bottom_ul li a { color: #FFF; font-size: 12px; } /* ending of footer css */