* { border: 0; margin: 0; padding: 0; } html { height: 100%; } body { font-family: "Fira Sans", "Open Sans",Helvetica,Arial,sans-serif; color: #333; background: #ddd; padding-top: 65px; height: calc(100% - 65px) } a { text-decoration: none; color: blue; } a:hover { color: #212121; text-decoration: none; } input { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } textarea { resize:vertical; } small { font-weight: 500; } .button { padding: 5px 10px; margin: 5px 10px; border: 1px solid blue; border-radius: 5px; background: #ddddff; } .button:hover { background: #eeeeff; } /* FONTS */ @font-face { font-family: 'Fira Sans'; font-weight: 700; src: url('../fonts/FiraSans-Bold.eot'); src: local('Fira-Sans-Bold'), local('Fira Sans Bold'), url('../fonts/FiraSans-Bold.otf') format('otf'), url('../fonts/FiraSans-Bold.ttf') format('truetype'); } @font-face { font-family: 'Fira Sans'; font-weight: 600; src: url('../fonts/FiraSans-Medium.eot'); src: local('Fira-Sans-Medium'), local('Fira Sans Medium'), url('../fonts/FiraSans-Medium.otf') format('otf'), url('../fonts/FiraSans-Medium.ttf') format('truetype'); } @font-face { font-family: 'Fira Sans'; font-weight: 500; src: url('../fonts/FiraSans-Regular.eot'); src: local('Fira-Sans'), local('Fira Sans'), url('../fonts/FiraSans-Regular.otf') format('otf'), url('../fonts/FiraSans-Regular.ttf') format('truetype'); } @font-face { font-family: 'Fira Sans'; font-weight: 400; src: url('../fonts/FiraSans-Light.eot'); src: local('Fira-Sans-Light'), local('Fira Sans Light'), url('../fonts/FiraSans-Light.otf') format('otf'), url('../fonts/FiraSans-Light.ttf') format('truetype'); } @font-face { font-family: 'Fira Sans'; font-weight: 300; src: url('../fonts/FiraSans-ExtraLight.eot'); src: local('Fira-Sans-ExtraLight'), local('Fira Sans ExtraLight'), url('../fonts/FiraSans-ExtraLight.otf') format('otf'), url('../fonts/FiraSans-ExtraLight.ttf') format('truetype'); } /*********************************/ header { position: fixed; top: 0; width: 100%; background: black; height: 65px; color: white; box-shadow: 0 0 3px black; z-index: 1000; } header ul { float: right; position: relative; } header li { display: inline-block; height: 65px; vertical-align: middle; } header li a { color: white; padding: 25px 15px 15px; height: 20px; display: block; vertical-align: middle; } header li a:hover { color: white; } header li:hover a { border-bottom: 6px solid blue; background: #212121; } header .icon { border: 1px solid white; border-radius: 3px; margin: -5px 0; padding: 4px 0; line-height: 20px; text-align: center; width: 28px; } header .icon.avatar { padding: 0; height: 28px; } header li.has-sub:hover a { border-bottom: 6px solid #212121; } header li.has-sub:hover > ul { display: block; } header li.has-sub ul { display: none; position: absolute; right: 0px; margin-top: -1px; background: #212121; } header li.has-sub ul li { display: block; height: 46px; border-left: 6px solid #212121; } header #connectform { height: 127px; } header li.has-sub ul li a { float: none; padding: 15px 25px 15px 10px; height: 10px; border-bottom: none; } header li.has-sub ul li:hover { border-left: 6px solid blue; border-bottom: none; } header form { display: block; width: 200px; padding: 15px 15px 0 15px; } header input { margin: 0 0 10px -5px; padding: 5px; background: #333; border-bottom: 1px solid #555; display: block; width: 100%; color: #bbb; } header input[type=submit] { position: relative; margin-left: 0; } header input[type=submit] { background: #555; border-bottom: 1px solid #777; } header input:hover { background: #DDD; color: #222; } #Hcontent { width: 850px; margin: 0 auto; } #logo { float: left; padding: 8px 15px; margin: 2px 0; opacity: 0.85; } #logo:hover { opacity: 1; } #logo img { height: 44px; } /*********************************/ section { position: relative; background: white; margin: auto; width: 820px; min-height: calc(100% - 94px); z-index: 10; padding: 15px; text-align: justify; } section h1 { font-weight: 300; font-size: 43px; margin-top: 20px; border-bottom: 1px solid #bbb; } section .subtitle { font-variant: small-caps; font-weight: 500; background: #ddd; margin: 0 20px 20px 0; display: inline-block; padding: 3px 5px; float: right; } section p { margin: 20px 0; } /***************************************/ footer { background: #212121; width: 820px; padding: 15px; margin: 15px auto 0 auto; color: #c1c1c1; text-align: left; } footer #footernav { float: right; padding: 0; margin: 0; } footer a { color: white; padding: 0 8px; } footer a:hover { color: white; } /*********************************/ /** Index page **/ /*********************************/ #indexFullW { position: relative; background: url('../img/aside.jpg') center center no-repeat #070707; width: 100%; height: 320px; z-index: 100; box-shadow: inset 0 -1px 0 #444, 0 1px 5px black; } #AScontent { height: 320px; width: 850px; margin: auto; } #spacebeforesponsors { height: 238px; } #sponsors { height: 70px; background: rgba(0,0,0,0.5); padding: 5px 30px; } #sponsors a { float: right; display: block; padding-top: 5px; padding-left: 5px; padding-right: 5px; } #sponsors a img { height: 60px; display: inline; } #sponsors p { float: left; color: white; font-size: 20px; font-variant: small-caps; line-height: 70px; } section .thumb { margin: 0 10px; border: 1px solid #aaa; }