mirror of
https://github.com/Znote/ZnoteAAC.git
synced 2025-04-29 10:49:23 +02:00
653 lines
10 KiB
CSS
653 lines
10 KiB
CSS
@font-face {
|
|
font-family: Yanone Kaffeesatz;
|
|
src: url('../fonts/YanoneKaffeesatz-Regular.eot');
|
|
src: local("Yanone Kaffeesatz"), url('../fonts/YanoneKaffeesatz-Regular.ttf');
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* tell the browser to render HTML 5 elements as block */
|
|
article, aside, figure, footer, header, hgroup, nav, section {
|
|
display:block;
|
|
}
|
|
|
|
body {
|
|
font: normal .80em arial, sans-serif;
|
|
background: #F8F7EE url(../images/pattern.png);
|
|
color: #7A7A68;
|
|
}
|
|
|
|
p {
|
|
padding: 0 0 20px 0;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #362C20;
|
|
letter-spacing: 0em;
|
|
padding: 0 0 5px 0;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font: normal 140% 'century gothic', arial;
|
|
margin: 0 0 15px 0;
|
|
padding: 15px 0 5px 0;
|
|
color: #000;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 160%;
|
|
padding: 9px 0 5px 0;
|
|
color: #009FBC;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 140%;
|
|
padding: 5px 0 0 0;
|
|
}
|
|
|
|
h4, h6 {
|
|
color: #009FBC;
|
|
padding: 0 0 5px 0;
|
|
font: normal 120% arial;
|
|
}
|
|
|
|
h5, h6 {
|
|
color: #bbb;
|
|
font: italic 95% arial;
|
|
letter-spacing: normal;
|
|
padding: 0 0 15px 0;
|
|
}
|
|
|
|
a, a:hover {
|
|
outline: none;
|
|
text-decoration: underline;
|
|
color: #d69000;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 20px 0;
|
|
padding: 10px 20px 0 20px;
|
|
border: 1px solid #E5E5DB;
|
|
background: #FFF;
|
|
}
|
|
|
|
ul {
|
|
margin: 2px 0 22px 17px;
|
|
}
|
|
|
|
ul li {
|
|
list-style-type: circle;
|
|
margin: 0 0 6px 0;
|
|
padding: 0 0 4px 5px;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
ol {
|
|
margin: 8px 0 22px 20px;
|
|
}
|
|
|
|
ol li {
|
|
margin: 0 0 11px 0;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
width: auto;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
width: auto;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.center {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
#main, #logo, #site_content, footer {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
header {
|
|
background: #404040;
|
|
height: 200px;
|
|
border-bottom: 1px solid #FFF;
|
|
}
|
|
|
|
#logo {
|
|
width: 1000px;
|
|
height: 200px;
|
|
background: transparent url(../images/logo.png) no-repeat right;
|
|
color: #888;
|
|
padding: 0;
|
|
}
|
|
|
|
#logo #logo_text {
|
|
top: 5px;
|
|
left: 0;
|
|
}
|
|
|
|
#logo h1, #logo h2 {
|
|
font: normal 420% 'Yanone Kaffeesatz', arial, sans-serif;
|
|
border-bottom: 0;
|
|
text-transform: none;
|
|
margin: 0;
|
|
}
|
|
|
|
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
|
|
padding: 10px 0 0 0;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#logo_text h1 a .logo_colour {
|
|
color: #09D4FF;
|
|
}
|
|
|
|
#logo_text a:hover .logo_colour {
|
|
color: #FFF;
|
|
}
|
|
|
|
#logo_text h2 {
|
|
font-size: 150%;
|
|
padding: 0 0 0 0;
|
|
color: #A8AA94;
|
|
}
|
|
|
|
nav {
|
|
height: 44px;
|
|
width: 100%;
|
|
margin: -44px auto 0 auto;
|
|
background: transparent url(../images/menubar.png) repeat;
|
|
}
|
|
|
|
#menu_container {
|
|
width: 1000px;
|
|
margin: 0 auto 0 auto;
|
|
}
|
|
|
|
#site_content {
|
|
width: 1000px;
|
|
overflow: hidden;
|
|
margin: 0px auto 0 auto;
|
|
padding: 15px 0 40px 0;
|
|
}
|
|
|
|
#sidebar_container {
|
|
float: right;
|
|
width: 224px;
|
|
}
|
|
|
|
.sidebar {
|
|
float: right;
|
|
width: 210px;
|
|
margin: 0 0 17px 0;
|
|
background: #FFF;
|
|
border: 1px solid #eee;
|
|
border-radius: 7px 7px 7px 7px;
|
|
-moz-border-radius: 7px 7px 7px 7px;
|
|
-webkit-border: 7px 7px 7px 7px;
|
|
padding: 0 15px 5px 13px;
|
|
}
|
|
|
|
.sidebar h3, .content h1 {
|
|
padding: 5px 15px 20px 15px;
|
|
font: 250% 'Yanone Kaffeesatz';
|
|
text-shadow: #ffffff 1px 1px;
|
|
margin: 0 1px;
|
|
color: #777;
|
|
}
|
|
|
|
.sidebar h3 {
|
|
padding: 14px 15px 14px 15px;
|
|
color: #74706E;
|
|
font: 190% 'Yanone Kaffeesatz';
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.sidebar h4 {
|
|
color: #c00000;
|
|
}
|
|
|
|
.sidebar ul {
|
|
margin: 0 0 15px 0;
|
|
}
|
|
|
|
.sidebar li a, .sidebar li a:hover {
|
|
color: #555;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar li a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sidebar_item, .content_item {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.paperclip {
|
|
float: left;
|
|
position: relative;
|
|
z-index: 0;
|
|
vertical-align: middle;
|
|
margin: -15px 0 -60px -40px;
|
|
}
|
|
|
|
.content {
|
|
text-align: left;
|
|
width: 700px;
|
|
margin: 0 0 15px 0;
|
|
float: left;
|
|
font-size: 120%;
|
|
padding: 14px 0 0 0;
|
|
}
|
|
|
|
.content ul {
|
|
margin: 2px 0 22px 0px;
|
|
}
|
|
|
|
.content ul li, .sidebar ul li {
|
|
list-style-type: none;
|
|
background: url(../images/bullet.png) no-repeat;
|
|
margin: 0 0 0 0;
|
|
padding: 0 0 4px 28px;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
font-family: 'lucida sans', sans-serif;
|
|
font-size: 90%;
|
|
height: 60px;
|
|
padding: 20px 0 5px 0;
|
|
text-align: center;
|
|
background: #404040 url(../images/footer.png) repeat-x;
|
|
color: #A8AA94;
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
footer p {
|
|
line-height: 1.7em;
|
|
padding: 0 0 10px 0;
|
|
}
|
|
|
|
footer a {
|
|
color: #A8AA94;
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.form_settings {
|
|
margin: 15px 0 0 0;
|
|
}
|
|
|
|
.form_settings p {
|
|
padding: 0 0 4px 0;
|
|
}
|
|
|
|
.form_settings span {
|
|
float: left;
|
|
width: 200px;
|
|
text-align: left;
|
|
}
|
|
|
|
.form_settings input, .form_settings textarea {
|
|
padding: 5px;
|
|
width: 299px;
|
|
font: 100% arial;
|
|
border: 1px solid #E5E5DB;
|
|
background: #FFF;
|
|
color: #47433F;
|
|
border-radius: 7px 7px 7px 7px;
|
|
-moz-border-radius: 7px 7px 7px 7px;
|
|
-webkit-border: 7px 7px 7px 7px;
|
|
}
|
|
|
|
.form_settings .submit {
|
|
font: 100% arial;
|
|
border: 0;
|
|
width: 99px;
|
|
margin: 0 0 0 212px;
|
|
height: 33px;
|
|
padding: 2px 0 3px 0;
|
|
cursor: pointer;
|
|
background: #3B3B3B;
|
|
color: #FFF;
|
|
border-radius: 7px 7px 7px 7px;
|
|
-moz-border-radius: 7px 7px 7px 7px;
|
|
-webkit-border: 7px 7px 7px 7px;
|
|
}
|
|
|
|
.form_settings textarea, .form_settings select {
|
|
font: 100% arial;
|
|
width: 299px;
|
|
}
|
|
|
|
.form_settings select {
|
|
width: 310px;
|
|
}
|
|
|
|
.form_settings .checkbox {
|
|
margin: 4px 0;
|
|
padding: 0;
|
|
width: 14px;
|
|
border: 0;
|
|
background: none;
|
|
}
|
|
|
|
.separator {
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 1px solid #D9D5CF;
|
|
border-bottom: 1px solid #FFF;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
table {
|
|
margin: 10px 0 30px 0;
|
|
width: 650px;
|
|
}
|
|
|
|
table tr th, table tr td {
|
|
background: #555555;
|
|
color: #FFF;
|
|
padding: 7px 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
tr.yellow td {
|
|
background: #555555;
|
|
color: #FFF;
|
|
padding: 7px 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
table tr td {
|
|
background: #E5E5DB;
|
|
color: #47433F;
|
|
border-top: 1px solid #FFF;
|
|
}
|
|
|
|
/* guild war */
|
|
tr.special:hover td {
|
|
background: skyblue;
|
|
}
|
|
|
|
tr.special {
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul.war_list li {
|
|
font-size:18px;
|
|
}
|
|
|
|
/* scroll to top */
|
|
#scroll {
|
|
position: relative;
|
|
width: 1000px;
|
|
margin: 0 auto;
|
|
bottom: 14px;
|
|
right: 0;
|
|
background: red;
|
|
padding: 0;
|
|
}
|
|
|
|
#scroll a {
|
|
float: right;
|
|
margin: 0 0 0 0;
|
|
padding: 0 0 0 0;
|
|
}
|
|
|
|
#scroll a img {
|
|
float: right;
|
|
padding: 0 0 0 0;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
Stylesheet for SooperFish by www.SooperThemes.com
|
|
Author: Jurriaan Roelofs
|
|
**/
|
|
|
|
/* Configuration of menu width */
|
|
html body ul.sf-menu ul,html body ul.sf-menu ul li {
|
|
width: 200px;
|
|
}
|
|
|
|
html body ul.sf-menu ul ul {
|
|
margin: 0 0 0 200px;
|
|
}
|
|
|
|
/* Framework for proper showing/hiding/positioning */
|
|
ul.sf-menu,ul.sf-menu * {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul.sf-menu {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
ul.sf-menu li {
|
|
display: block;
|
|
list-style: none;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
ul.sf-menu li:hover {
|
|
visibility: inherit; /* fixes IE7 'sticky bug' */
|
|
}
|
|
|
|
ul.sf-menu a {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
ul.sf-menu ul {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 150px;
|
|
top: auto;
|
|
left: -999999px;
|
|
}
|
|
|
|
ul.sf-menu ul a {
|
|
zoom: 1; /* IE6/7 fix */
|
|
}
|
|
|
|
ul.sf-menu ul li {
|
|
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
|
|
width: 150px;
|
|
}
|
|
|
|
ul.sf-menu ul ul {
|
|
top: 0;
|
|
margin: 0 0 0 150px;
|
|
}
|
|
|
|
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
|
|
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
|
|
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
|
|
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
|
|
left: auto;
|
|
}
|
|
|
|
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
|
|
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
|
|
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
|
|
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
|
|
left: -999999px;
|
|
}
|
|
|
|
/* autoArrows CSS */
|
|
span.sf-arrow {
|
|
width: 7px;
|
|
height: 7px;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 5px;
|
|
display: block;
|
|
background: url(../images/arrows-white.png) no-repeat 0 0;
|
|
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
|
|
font-size: 1px;
|
|
}
|
|
|
|
ul ul span.sf-arrow {
|
|
right: 10;
|
|
top: 20px;
|
|
background-position: 0 100%;
|
|
}
|
|
|
|
/* Theming the menu */
|
|
ul#nav {
|
|
float: right;
|
|
}
|
|
|
|
ul#nav ul {
|
|
background: url(../images/menu_hover.png) repeat;
|
|
margin-top: 5px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
ul#nav li a {
|
|
padding:7px 20px 6px 20px;
|
|
font: 170% 'Yanone Kaffeesatz',helvetica,arial,verdana,sans;
|
|
text-shadow: 1px 1px #000;
|
|
text-decoration:none;
|
|
color:#FFF;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
ul#nav li a:hover,ul#nav li a:focus {
|
|
color:#09D4FF;
|
|
}
|
|
|
|
.galleryImage {
|
|
max-width: 720px;
|
|
}
|
|
#news {
|
|
width: 735px;
|
|
}
|
|
|
|
/* /////////\/\\\\\\\\
|
|
// Znote FORUM \\
|
|
/////////\/\\\\\\\\ */
|
|
hr {
|
|
width: 610px;
|
|
margin-left: 20px;
|
|
}
|
|
.adminTable {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
position: relative;
|
|
display: block;
|
|
top: -32px; /* EDIT THIS TO ADJUST BUTTON PRECITION */
|
|
}
|
|
.adminTable tr td {
|
|
width: 210px;
|
|
}
|
|
.adminTable tr td form input {
|
|
width: 150px;
|
|
height: 35px;
|
|
}
|
|
.postButton {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
top: -30px; /* EDIT THIS TO ADJUST BUTTON PRECITION */
|
|
}
|
|
|
|
.editThread {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
top: -36px; /* EDIT THIS TO ADJUST BUTTON PRECITION */
|
|
}
|
|
.editThread tr, .editThread tr td, .editThread tr td form, .editThread tr td form input {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
height: 20px;
|
|
}
|
|
.updateTable tr td input {
|
|
width: 500px;
|
|
}
|
|
|
|
#changelogTable {
|
|
width: 735px;
|
|
}
|
|
|
|
#progress {
|
|
width: 400px;
|
|
position: relative;
|
|
padding: 3px;
|
|
}
|
|
|
|
#percent {
|
|
position: absolute;
|
|
margin-left:175px;
|
|
}
|
|
|
|
#bar {
|
|
height: 20px;
|
|
background-color: green;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
/* ///////////\/\\\\\\\\\\\
|
|
// Znote YOUTUBE BB \\
|
|
///////////\/\\\\\\\\\\\ */
|
|
|
|
div.youtube {
|
|
width: 100%;
|
|
max-width: 560px;
|
|
}
|
|
|
|
div.aspectratio {
|
|
width: 100%;
|
|
padding-bottom: 56.25%; /* 16:9 */
|
|
position: relative;
|
|
}
|
|
|
|
div.aspectratio > iframe {
|
|
position: absolute;
|
|
top: 0; bottom: 0; left: 0; right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|