/* RESET DEFAULT BROWSER CSS */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display: block;
}
body {
line-height: 24px;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
/* Remove possible quote marks (") from , . */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* Remove annoying border on linked images. */
a img { border: none; }
/* DEFAULT */
html {
}
body {
font-family: georgia, serif;
font-size: 16px;
line-height: 24px;
background: #404040 url(../img/background-blog.png);
color: Black;
color: #111;
}
/* WP-EDIT */
* .wp-edit {
font-family: georgia, serif !important;
font-weight: normal !important;
}
* .wp-edit a {
color: rgba(0, 0, 0, 0.25) !important;
}
/* LINKS */
a {
text-decoration: underline;
color: Black;
}
a:focus, a:hover, a:active {
color: #619210;
}
/* TITLE COLORS */
h1, h2, h3 {
color: Black;
}
h1 a, h2 a, h3 a {
color: Black;
text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover {
color: Black;
text-decoration: underline;
}
/* TITLES */
h1 {
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 36px;
line-height: 42px;
font-weight: normal;
letter-spacing: -1px;
margin: 0 0 24px 0;
}
h1 + h3,
h1 + div + h3,
h1 + aside + h3 {
font-family: georgia, serif;
font-weight: normal;
font-size: 20px;
line-height: 30px;
margin: 0 0 24px 0;
color: #111;
}
h2 {
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 30px;
margin: 0;
}
h2 + h3 {
margin: 14px 0 0 0;
}
h3 {
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0;
}
h4 {
font-size: 16px;
font-weight: bold;
line-height: 24px;
margin: 0;
}
h5 {
font-size: 14px;
font-weight: normal;
font-style: italic;
line-height: 24px;
margin: 0 0 0;
}
h6 {
font-size: 12px;
line-height: 18px;
margin: 0 0 18px 0;
}
/* TEXT */
p {
font-size: 16px;
line-height: 24px;
margin: 0 0 24px 0;
}
p small,
ul li small,
ol li small {
font-size: 12px;
}
p strong,
ul li strong,
ol li strong {
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
color: Black;
}
blockquote {
margin: 0;
}
q {
font-style: italic;
}
q:before,
q:after {
content: none;
}
cite {
font-style: normal;
}
strong, b {
font-weight: bold;
}
em, dfn, i {
font-style: italic;
}
dfn {
font-weight: bold;
}
sup, sub {
line-height: 0;
}
abbr, acronym {
border-bottom: 1px dotted #111;
}
address {
font-style: italic;
}
del {
color: ;
}
pre {
white-space: pre;
margin: 0 0 24px 0;
}
pre, code, tt {
font-family: 'andale mono', 'lucida console', monospace;
font-size: 13px;
}
/* LISTS */
li ul, li ol {
}
ul, ol {
list-style: outside;
margin: 0 0 24px 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
dl {
margin: 0 0 24px 0;
}
dl dt {
font-weight: normal;
color: Black;
}
dl dd {
margin: 0 0 12px 0;
}
/* TABLES */
table {
width: 100%;
margin: 0 0 24px 0;
}
th,
td {
font-size: 16px;
line-height: 24px;
vertical-align: top;
}
th, td, caption {
padding: 4px 10px;
}
tr.even td {
}
tfoot {
font-style: italic;
}
caption {
}
/* HTML+BODY */
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
}
/* GRID */
#grid {
position: relative;
width: 960px;
padding: 0;
margin: 0 auto;
}
/* COLUMNS */
.c1 {
float: left;
width: 80px;
padding: 0 10px;
}
.c2 {
float: left;
width: 140px;
padding: 0 10px;
}
.c3 {
float: left;
width: 210px;
padding: 0 20px 0 10px;
}
.c4 {
float: left;
width: 300px;
padding: 0 10px;
}
.c6 {
float: left;
width: 460px;
padding: 0 10px;
}
.c7 {
float: left;
width: 520px;
padding: 0 10px;
}
.c8 {
float: left;
width: 620px;
padding: 0 10px;
}
.c9 {
float: left;
width: 700px;
padding: 0 10px;
}
.c12 {
float: left;
width: 940px;
padding: 0 10px;
}
/* CONTENT */
#content {
float: right;
width: 620px;
padding: 0 10px;
}
/* HEAD */
#content #head {
position: relative;
float: left;
width: 940px;
margin: 0 0 20px -320px;
}
#content #head h1 {
position: absolute;
left: 320px;
}
#content #head img {
float: left;
}
/* SECTION */
section {
position: relative;
display: inline; /* ie fix */
float: left;
width: 960px;
margin: 0 0 0 -330px;
}
section .c1 {
float: left;
width: 300px;
padding: 0 10px;
}
section .c2 {
float: left;
width: 620px;
padding: 0 10px;
}
section .c3 {
float: left;
width: 940px;
padding: 0 10px;
}
/* ASIDE */
aside {
position: relative;
clear: left;
display: inline; /* ie fix */
float: left;
width: 280px;
margin: 0 0 0 -320px;
}
/* ASIDE QUOTE */
aside blockquote {
}
aside blockquote h3 {
font-family: georgia, serif;
font-size: 30px;
font-weight: normal;
line-height: 36px;
color: #619210;
margin: 0 0 16px 0;
}
aside blockquote h3 a {
color: #619210;
}
aside blockquote h3 a:hover {
color: #619210;
text-decoration: underline;
}
aside blockquote h5 {
width: 200px;
font-family: "Avant Garde";
font-size: 12px;
font-style: normal;
line-height: 18px;
text-transform: uppercase;
color: Black;
margin: 0 0 20px 0;
}
/* MAP */
#content #map_canvas {
width: 100%;
height: 480px;
margin: 0 0 24px 0;
}
/* IMAGES */
/* large */
#content .image-large {
}
#content .image-large img {
position: relative;
float: left;
width: 940px;
margin: 0 0 24px -320px;
}
#content .image-large h5 {
clear: both;
float: left;
width: 280px;
margin: 0 0 24px -320px;
color: #619210;
}
/* medium */
#content .image-medium {
}
#content .image-medium img {
position: relative;
float: left;
margin: 0 0 12px 0;
}
#content .image-medium h5 {
clear: both;
margin: 0 0 24px 0;
color: #619210;
}
/* small */
#content .image-small {
float: left;
width: 280px;
margin: 0 0 24px -320px;
}
#content .image-small img {
width: 280px;
margin: 8px 0 4px 0;
}
#content .image-small h5 {
color: #619210;
}
/* METADATA */
#content .metadata ul {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
}
#content .metadata ul li {
position: relative;
font-size: 20px;
line-height: 30px;
padding: 0;
margin: 0;
}
#content .metadata ul li strong {
position: absolute;
left: -70px;
width: 60px;
padding: 2px 0 0 0;
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
text-align: right;
}
#content .metadata ul li em {
font-size: 13px;
padding: 0 0 0 70px;
}
/* TABLE */
#content table {
position: relative;
float: left;
width: 100%;
margin: 0 0 24px 0;
}
#content table thead tr th {
}
#content table tbody tr td {
}
/* FORM */
#content form input[type=text],
#content form input[type=password],
#content form textarea {
font-family: Georgia, serif;
font-size: 16px;
line-height: 24px;
padding: 0px 5px;
border: 1px solid inset;
margin: 0;
}
#content form input[type=submit] {
border: 0;
width: auto;
padding: 0 15px;
height: 30px;
margin: 0;
/* typography */
font-family: "Avant Garde";
font-size: 14px;
line-height: 20px;
/* colors */
background: Black;
color: White;
background: Black;
color: Black;
}
#content form input[type=submit]:hover {
cursor: pointer;
/* shadow */
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* generic form */
#content .form {
float: left;
width: 620px;
margin: 0 0 0 -10px;
/* border-top: 1px dotted Black;
padding: 20px 10px 0 10px; */
padding: 0 10px;
}
#content .form fieldset {
clear: both;
margin: 0 0 20px 0;
}
#content .form fieldset h4 {
float: left;
width: 100%;
font-size: 14px;
font-weight: normal;
line-height: 20px;
margin: 0 0 4px 0;
}
#content .form fieldset p {
float: left;
width: 100%;
font-size: 14px;
line-height: 30px;
margin: 0 0 8px 0;
}
#content .form fieldset p em {
font-style: normal;
}
#content .form fieldset p input.medium {
float: left;
width: 150px;
margin: 0 10px 0 0;
}
#content .form fieldset p input.large,
#content .form fieldset p textarea {
float: left;
width: 400px;
margin: 0 10px 0 0;
}
#content .form fieldset p input.checkbox {
margin: 0 5px 0 0;
}
#content .form fieldset p input.postcode {
float: left;
width: 60px;
margin: 0 6px 0 0;
}
#content .form fieldset p input.postoffice {
float: left;
width: 320px;
margin: 0 10px 0 0;
}
/* list of options */
#content .form fieldset.options ul {
float: left;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
#content .form fieldset.options ul li {
float: left;
width: 100%;
font-size: 14px;
}
#content .form fieldset.options ul li label {
position: relative;
float: left;
display: block;
}
#content .form fieldset.options ul li label strong {
font-size: 16px;
font-weight: normal;
line-height: 24px;
text-transform: none;
}
#content .form fieldset.options ul li label input {
position: absolute;
top: 3px;
left: -30px;
}
#content .form fieldset.options ul li.on label,
#content .form fieldset.options ul li.on label strong {
color: #619210;
}
/* protected post form */
#content .protected-post-form {
position: relative;
background: url(../img/vault.png) no-repeat;
width: 430px;
height: 400px;
margin: 0 0 24px -20px;
}
#content .protected-post-form .password {
position: absolute;
top: 180px;
left: 155px;
width: 120px;
text-align: center;
font-size: 24px;
}
#content .protected-post-form .submit {
background: none;
position: absolute;
top: 180px;
left: 313px;
width: 60px;
padding: 0;
font-size: 24px;
color: Black;
}
#content .protected-post-form .submit:hover {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/* COMMENTS */
#comments {
float: left;
width: 100%;
}
#comments ol,
#comments ul {
float: left;
width: 100%;
}
#comments ol li,
#comments ul li {
float: left;
width: 100%;
}
#comments ol li h5,
#comments ul li h5 {
}
#comments ol li h5 a,
#comments ul li h5 a {
}
#comments ol li p,
#comments ul li p {
}
/* RESPOND */
#respond {
float: left;
width: 100%;
margin: 0 0 24px 0;
}
#respond h2 {
margin: 0 0 4px 0;
}
#respond ul {
float: left;
width: 100%;
margin: 0 0 24px 0;
}
#respond ul li {
float: left;
width: 100%;
position: relative;
font-size: 20px;
line-height: 30px;
list-style: none;
padding: 0;
margin: 0;
}
#respond ul li strong {
position: absolute;
left: -120px;
width: 110px;
font-family: georgia, serif;
font-size: 14px;
font-weight: normal;
text-transform: none;
text-align: right;
margin: -2px 0 0 0;
}
#respond form fieldset {
float: left;
width: 100%;
clear: both;
}
#respond form ul li input[type=text],
#respond form textarea {
font-family: Georgia, serif;
font-size: 14px;
line-height: 20px;
padding: 0px 5px;
border: 1px solid inset;
margin: 0;
}
#respond form ul li input#author,
#respond form ul li input#email {
float: left;
width: 200px;
margin: 0 10px 0 0;
}
#respond form ul li input#url {
display: block;
float: left;
width: 300px;
margin: 0 10px 0 0;
}
#respond form textarea {
float: left;
width: 600px;
margin: 0 10px 12px 0;
}
#respond ul li em {
font-size: 14px;
}
#respond h4 {
font-size: 14px;
font-weight: normal;
line-height: 20px;
margin: 0 0 4px 0;
}
#respond p {
margin: 0 0 12px 0;
}
#respond h5 {
font-size: 14px;
font-weight: normal;
line-height: 20px;
margin: 0 0 24px 0;
}
/* SEARCH */
#search input#s {
font-family: Georgia, serif;
font-size: 14px;
line-height: 20px;
padding: 0px 5px;
border: 1px solid inset;
margin: 0;
float: left;
width: 120px;
margin: 0 10px 0 0;
}
#search input[type=submit] {
border: 0;
width: auto;
padding: 0 15px;
height: 24px;
margin: 0;
/* typography */
font-family: "Avant Garde", Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
/* colors */
background: Black;
color: White;
background: Black;
color: Black;
}
#search input[type=submit]:hover {
cursor: pointer;
/* shadow */
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* CATEGORIES */
#categories ul {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
}
#categories ul li {
font-size: 18px;
line-height: 32px;
color: #619210;
}
#categories ul li a {
font-size: 24px;
font-weight: normal;
margin: 0;
}
/* ARCHIVE */
#archive {
position: relative;
float: left;
/* width: 100%; */
width: 630px;
border-top: 1px dotted #111;
padding: 30px 0;
}
#archive h2 {
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
margin: 0 0 4px 0;
/*
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 0 6px 0;
*/
}
#archive ol,
#archive ul {
float: left;
width: 280px;
padding: 0 20px 0 0;
}
#archive ol li,
#archive ul li {
color: ;
}
#archive ol li em {
display: none;
background: #95cd28;
color: Black;
font-family: arial, sans-serif;
font-size: 9px;
font-weight: bold;
font-style: normal;
padding: 0 2px;
}
/* FOOTER */
#footer {
float: left;
width: 100%;
border-top: 1px solid #9F9F9F;
padding: 24px 0;
}
#footer h2 {
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
margin: 0;
}
#footer .contact,
#footer .visit,
#footer .twitter {
float: left;
width: 300px;
padding: 0 10px;
}
#footer p {
}
/* IDENT */
#ident {
clear: both;
float: right;
width: 293px;
}
#ident h2 {
}
#ident h2,
#ident h2 a {
background: url(../img/header-netlife.png) no-repeat;
width: 110px;
height: 50px;
display: block;
line-height: 1000px;
overflow: hidden;
}
/* SIDEBAR */
#sidebar {
float: right;
width: 280px;
padding: 3px 10px 0 10px;
}
#sidebar h1 {
margin-bottom:10px;
margin-top: 20px;
white-space: nowrap;
}
#sidebar a#submitPost {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
float: left;
font-family: "Avant Garde", helvetica, sans-serif;
line-height: 30px;
margin-bottom: 30px;
padding: 0 15px;
text-decoration: none;
}
#sidebar h2 {
clear: both;
/* color: #9F9F9F; */
/* float: left; */
font-size: 20px;
line-height: 20px;
margin: 0 0 10px 0;
/* width: 300px; */
}
#sidebar h2.topRated {
/* background: url("../img/worst-trophy.png") no-repeat scroll right center transparent; */
padding-right: 25px;
}
#sidebar ul,
#sidebar ol {
clear: both;
float: left;
list-style: none;
width: 200px;
}
#sidebar ol.worstposts {
}
#sidebar ol.worstPosts li {
font-size: inherit;
list-style: decimal inside none;
margin-bottom: 10px;
position: relative;
}
#sidebar ol.worstPosts li:first-child {
list-style: none outside none;
margin-top: 0;
text-indent: 21px;
}
#sidebar ol.worstPosts li:first-child:before {
background: url("../img/worst-trophy.png") no-repeat scroll 0 0 transparent;
content: "";
display: block;
height: 25px;
left: -2px;
position: absolute;
top: 5px;
width: 25px;
z-index: -1;
}
#sidebar ol.worstPosts li a {
/* display: block; */
white-space: normal;
}
#sidebar ul li {
font-size: 13px;
line-height: 20px;
margin: 0;
}
#sidebar p {
clear: both;
float: left;
margin: 0 0 30px 0;
top: 60px;
width: 240px;
}
#sidebar p#description {
font-style: italic;
}
#sidebar p#description span {
display: none;
}
/* TAGS (overwrite properties from article tags) */
#sidebar ul.wp-tag-cloud {
width: 280px;
}
/* LINK TO TOP */
#topLink {
background: #2F2F2F;
display: block;
height: 40px;
position: fixed;
top: -60px;
width: 40px;
}
#topLink:hover,
#topLink:focus {
background: #fff;
}
#topLink:hover:after {
color: #2F2F2F;
content: "To top";
display: block;
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
left: 55px;
position: absolute;
top: 10px;
}
#triangle-up {
border-bottom: 10px solid #FFFFFF;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
left: 11px;
position: absolute;
top: 15px;
width: 0;
}
#topLink:hover #triangle-up,
#topLink:focus #triangle-up {
border-bottom-color: #2F2F2F;
}
/* HOME */
#home {
clear: both;
float: left;
position: relative;
}
#home h2 {
position: absolute;
top: -60px;
left: 230px;
}
#home h2 a {
background: url(../img/blog-home.gif) no-repeat;
width: 50px;
height: 100px;
display: block;
line-height: 1000px;
overflow: hidden;
}
#home h2 a:hover {
background: url(../img/blog-home-anim-8.gif) no-repeat;
}
#search {
float: left;
clear: both;
}
#search input {
float: left;
}
#search input[type="submit"] {
color: #666;
text-transform: uppercase;
}
#search input[type="submit"]:hover {
color: #86AC2A;
}
/* Import fonts */
@font-face {
font-family: "Avant Garde";
src:url("../fonts/85564178-fd88-4387-9226-0e632723ca24.eot?iefix") format("eot");
}
@font-face {
font-family: "Avant Garde";
src:url("../fonts/85564178-fd88-4387-9226-0e632723ca24.eot?iefix");
src:url("../fonts/e9a79553-7093-47c7-8d9c-70dc3619e94b.woff") format("woff"),url("../fonts/7265b8d0-a67c-4a8b-84aa-273d1759270a.ttf") format("truetype"),url("../fonts/75d377f2-28ee-43f8-b231-44f8eba218c4.svg#75d377f2-28ee-43f8-b231-44f8eba218c4") format("svg");
}
/* STORY COMMENTS */
/* article */
h1 {
float: left;
}
h1 em {
position: relative;
}
h1 em a {
position: absolute;
display: block;
left: 0;
top: 5px;
background: url(../img/comments-medium.png) right no-repeat;
color: Black;
font-size: 16px;
line-height: 20px;
font-style: normal;
width: 20px;
text-align: center;
text-decoration: none;
padding: 6px 0 10px 0;
}
/* LOOP */
.loop {
position: relative;
float: left;
width: 100%;
}
/* STORY */
.story {
float: left;
margin-bottom: 120px;
position: relative;
width: 100%;
}
.story .image,
.story .video,
#content .image,
#content .video {
margin-bottom: 20px;
}
.story .video,
#content .video {
background: #fff;
/* border: 1px solid #C8C8C8; */
padding: 10px;
padding-bottom: 4px;
max-width: 100%;
}
#content h1,
.story h1 {
letter-spacing: 0;
white-space: normal;
margin-bottom: 15px;
}
#content h1 a {
white-space: normal !important;
}
.story h1 a {
position: relative;
}
.story h1 em {
position: relative;
margin: 0;
}
.story h1 em a {
position: absolute;
display: block;
left: 0;
top: 8px;
background: url(../img/comments-large.png) left no-repeat;
color: Black;
font-size: 24px;
line-height: 20px;
font-style: normal;
width: 32px;
text-align: center;
text-decoration: none;
padding: 14px 0 20px 0;
}
#content h4.dateTag {
background: url("../img/date-triangle-tag-bg.png") no-repeat scroll -3px center #C4C4C4;
color: #FFFFFF;
float: right;
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
margin-top: 5px;
padding: 0 5px 0 35px;
text-align: right;
width: 60px;
}
/* default */
.story h2 {
font-size: 23px;
}
.story h2 em {
position: relative;
}
.story h2 em a {
position: absolute;
display: block;
left: 0;
top: 4px;
background: url(../img/comments-small.png) right no-repeat;
color: Black;
font-size: 12px;
line-height: 20px;
font-style: normal;
width: 14px;
text-align: center;
text-decoration: none;
padding: 0 0 4px 0;
}
/* small */
.story h3 em {
position: relative;
}
.story h3 em a {
position: absolute;
display: block;
left: 0;
top: 4px;
background: url(../img/comments-small.png) right no-repeat;
color: Black;
font-size: 11px;
line-height: 20px;
font-style: normal;
width: 14px;
text-align: center;
text-decoration: none;
padding: 2px 0 2px 0;
}
.story a {
white-space: normal;
}
/* FEATURE */
.story.feature {
position: relative;
float: left;
width: 940px;
margin: 0 0 30px 0;
}
.story.feature .image img {
width: 600px;
margin: 0 0 12px 0;
}
.story.feature h1 {
font-size: 46px;
line-height: 54px;
}
.story.feature h5 {
padding: 0;
font-size: 20px;
line-height: 30px;
margin: 0 0 0 0;
}
.story.feature p {
padding: 0;
font-size: 20px;
line-height: 30px;
margin: 0 0 0 0;
}
.story.feature .avatar {
margin: -4px 10px 0 0;
}
/* WP CAPTION */
.wp-caption.alignleft {
float: left;
margin: 5px 20px 0 0;
}
/* TAGS */
.story ul {
/* border-top: 1px solid #C1C1C1; */
margin: 0;
padding: 10px 0;
}
.story ul,
ul.wp-tag-cloud {
float: left;
width: 620px;
}
.story ul li,
ul.wp-tag-cloud li {
list-style: none;
}
.story ul li a,
ul.wp-tag-cloud li a,
li a[rel="tag"] {
background: url(../img/background-tag-triangle.png) no-repeat 0 center #C4C4C4;
color: #898989;
display: inline-block;
float: left;
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 12px;
margin: 0 10px 10px 0;
padding: 4px 10px 1px 22px;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.story ul li a:hover,
.story ul li a:focus,
ul.wp-tag-cloud li a:hover,
ul.wp-tag-cloud li a:focus,
li a[rel="tag"]:hover,
li a[rel="tag"]:focus {
background: url(../img/background-tag-triangle-hover.png) no-repeat 0 center #7FAD3C;
color: #222;
}
body.single #content ul li {
list-style: none;
}
/* TEMPORARY FIX. REMOVE! */
img.alignleft {
float: left;
margin: 5px 10px 0 0;
}
.tweets p {
overflow: hidden;
}
/* AVATAR */
img.avatar {
clear: right;
float: right;
display: block;
/* background-color: #95cd28; */
background: #C1C1C1;
width: 50px; /* was 90x90 */
height: 50px;
/* margin: 0 10px 0 0; */
border: 0;
}
/* BYLINE */
.byline h5 {
color: #9F9F9F /* #619210 */;
}
.byline h5 a {
/* color: #619210; */
}
.byline h5 a:hover {
/* color: Black; */
color: #619210;
}
.byline img {
float: left;
margin: -8px 10px 0 0;
}
/* BIOGRAPHY */
.biography {
float: left;
width: 620px;
padding: 20px 10px;
margin: 0 0 0 -10px;
}
.biography .avatar {
}
.biography p {
font-size: 14px;
margin: 0;
}
.biography h5 {
font-size: 14px;
line-height: 24px;
}
.share-btn {
background: url("../img/share-btn.png") no-repeat scroll 3px 2px #FFFFFF;
float: right;
height: 20px;
margin-top: 5px;
position: relative;
width: 21px;
}
.share-btn:hover {
background: #FFFFFF;
}
.share-btn:after {
border-color: transparent transparent #FFFFFF;
border-style: solid;
border-width: 5px;
content: "";
position: absolute;
right: 5px;
top: -10px;
}
.really_simple_share {
background: none repeat scroll 0 0 #FFFFFF;
display: none;
height: 46px !important;
padding: 10px !important;
position: absolute;
right: 0;
top: 0;
}
.really_simple_share > div {
padding: 0 !important;
width: 90px !important;
}
.really_simple_share_twitter {
}
.really_simple_share_facebook_like {
}
/* FACEBOOK */
/*
.facebook_like {
float: left;
width: 100%;
margin: 0 0 24px 0;
}
*/
/* TWITTER */
/*
#content iframe.twitter-share-button {
background: transparent;
border: none;
clear: left;
float: left;
padding: none;
}
*/
/* COMMENTS */
#comments {
border-top: 1px dotted Black;
width: 620px;
padding: 20px 10px 0 330px;
margin: 0 0 0 -330px;
}
/* SUBMIT FORM */
body#submit #content h1 {
margin: 3px 0 12px 0;
width: 600px;
}
body#submit #content p {
width: 600px;
}
div#usp {
width: 460px !important;
}
form#usp_form {
position: relative;
}
ul#usp_list {
}
ul#usp_list li {
width: 600px;
margin-bottom: 15px;
}
.usp_textarea {
/* width: 600px; */
resize: vertical;
}
#content form input[type="text"], #content form textarea {
border: none;
outline: none;
padding: 7px 10px;
width: 570px;
}
#content form input[type="text"]:hover, #content form textarea:hover {
border: 1px solid #999;
padding: 6px 9px;
}
#content form input[type="text"]:focus, #content form textarea:focus {
border: 1px solid #555;
padding: 6px 9px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
.placeholder {
color: #ccc;
}
input:-moz-placeholder, textarea:-moz-placeholder,
.placeholder {
color: #ccc;
}
#usp label {
font-family: "Avant Garde", helvetica, sans-serif;
margin-bottom: 5px;
}
#usp input.usp_input {
padding: 10px;
width: inherit;
}
#content form input[type="submit"]{
color: #fff;
-webkit-appearance: none;
}
#content form input[type="submit"]:hover {
background: #fff;
color: #619210;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*
#image-upload-box {
background: #fff;
padding: 7px 10px;
width: 570px;
}
*/
#content form input[type="file"]{
padding: 7px 10px;
}
#usp_error_message {
color: #619210;
position: absolute;
right: 12px;
top: 0;
}
#usp div#usp_success_message {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
font-style: italic;
margin-bottom: 40px;
margin-top: 60px;
padding: 20px;
position: relative;
width: 370px;
}
#usp div#usp_success_message:before {
background: url("../img/sprite-rating-icons-lg.png") no-repeat scroll 0 -110px #5F8344;
content: "";
height: 38px;
margin-left: -10px;
position: absolute;
top: -57px;
width: 38px;
z-index: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#usp div#usp_success_message:after {
border-color: transparent transparent #FFFFFF;
border-style: solid;
border-width: 10px;
content: "";
left: 20px;
position: absolute;
top: -20px;
}
/* STYLE UNWIELDY FILE INPUT */
/*
.usp_images {
margin-bottom: 50px !important;
position: relative;
}
*/
#and-or {
color: #A2A2A2;
float: left;
font-family: "Avant Garde", helvetica, sans-serif;
margin-bottom: 10px;
margin-left: 278px;
text-shadow: 0 1px 0 #EEEEEE;
}
/*
.usp_images:after {
content:'and / or';
position: absolute;
top: 40px;
left: 260px;
}
.usp_images input {
overflow: visible !important;
}
*/
.SI-FILES-STYLIZED #image-upload-box {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
float: left;
height: 32px;
/* overflow: hidden; */
padding: 1px;
position: relative;
width: 235px;
}
.SI-FILES-STYLIZED #image-upload-box:before {
background: none repeat scroll 0 0 white;
color: #CCCCCC;
content: "Choose fileâ¦";
display: block;
height: 32px;
left: 0;
padding: 5px 3px 0 12px;
position: absolute;
top: 0;
width: 235px;
z-index: -1;
}
.SI-FILES-STYLIZED #image-upload-box:hover {
/* border: 1px solid #999; */
cursor: pointer;
/* padding: 0; */
}
.SI-FILES-STYLIZED #image-upload-box input.file {
cursor: pointer;
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#usp_form .error {
color: #619210;
}
body.error404 p {
float: left;
width: 400px;
}
/* TABLE */
table thead tr th {
border-top: 1px solid #353535;
border-bottom: 1px solid #353535;
padding: 4px 10px;
font-weight: bold;
}
table tbody tr td,
table tbody tr th {
border-bottom: 1px solid #353535;
padding: 4px 10px;
}
body {
background-color: #dbdcdf;
color: #222;
}
body.single-post #content:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a {
outline:none;
-moz-outline-style:none;
white-space: nowrap;
}
#content {
float: left;
padding: 30px 10px 0;
z-index: 4;
}
#content h1 {
font-size: 26px;
line-height: 30px;
width: 460px;
}
.wp-post-image {
background: none repeat scroll 0 0 #FFFFFF;
/* border: 1px solid #C8C8C8; */
padding: 10px;
}
.story h2 {
float: left;
font-size: 26px;
margin-bottom: 15px;
width: 470px;
}
#content > p,
.story p {
float: left;
width: 460px;
}
.story ul {
padding: 20px 0 10px;
}
#sidebar ul li {
line-height: inherit;
position: relative;
}
.story ul li a,
ul.wp-tag-cloud li a {
font-family: "Avant Garde", helvetica, sans-serif;
font-weight: bold;
}
.byline {
clear: right;
float: right;
margin-bottom: 10px;
text-align: right;
}
#search input#s {
border: 0 !important;
clear: left;
color: #767676;
font-family: "Avant Garde", helvetica, sans-serif;
height: auto;
padding: 5px 10px;
}
#search input#s:hover,
#search input#s:focus {
border: 1px solid #767676 !important;
padding: 4px 9px;
}
#search input[type="submit"] {
background: #767676;
border: 0 !important;
color: #fff;
font-family: "Avant Garde", helvetica, sans-serif;
text-transform: none;
height: auto;
padding: 5px 10px;
}
#search input[type="submit"]:hover {
background: #7FAD3C;
color: #222;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* Fix pixel offset in FF: */
#search input[type="submit"]::-moz-focus-inner {
border:0;
}
#content .facebook_like iframe {
background: transparent;
}
/* Slider track */
.rating {
float: left;
margin-bottom: 60px;
padding: 0 0 0;
width: 620px;
height: 90px;
}
body.single-post .rating {
height: 160px;
}
.rating:after {
content: '';
display: table;
clear: both;
}
.slider {
background: none repeat scroll 0 0 #9F9F9F;
clear: both;
cursor: pointer;
display: block;
float: left;
height: 11px;
margin:0 0 10px 0;
position: relative;
width: 460px;
}
.graph-bg {
background: url("../img/graph-bg.png") repeat scroll 0 7px transparent; /* scroll 0 0 rgba(159,159,159,0.2) */
position: absolute;
right: -11px;
top: 0;
width: 471px;
z-index: -1;
}
/* Slider button */
.ui-slider-handle {
background: url("../img/sprite-rating-icons-lg.png") no-repeat 0 0 #9F9F9F scroll;
/* border: 4px solid #9F9F9F; */
height: 38px;
margin-left: -14px;
position: absolute;
top: -13px;
width: 38px;
z-index: 200;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.slider a {
text-decoration: none;
}
a div.vote-tooltip {
background: none repeat scroll 0 0 #FFFFFF;
color: #444444;
display: none;
font-size: 13px;
left: 10px;
padding: 2px 8px;
position: absolute;
text-align: center;
text-decoration:none;
font-style: italic;
top: 55px;
white-space: nowrap;
}
a div.vote-tooltip-arrow {
border-color: transparent transparent #FFFFFF;
border-style: solid;
border-width: 10px;
display: none;
left: 9px;
position: absolute;
top: 35px;
}
.ui-slider-handle:hover {
/* background-position: -40px 0 !important; */ /* temporary important until a better solution is found */
margin-left: -17px;
top: -16px;
border: 3px solid #fff;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.ui-slider-disabled .ui-slider-handle:hover {
margin-left: -14px;
top: -13px;
border: 0;
cursor: -webkit-default;
cursor: -moz-default;
cursor: default;
}
.ui-slider-handle.grabbing {
cursor:grabbing;
cursor:-moz-grabbing;
cursor:-webkit-grabbing;
}
.ui-slider-disabled .ui-slider-range, .slider.ui-slider-disabled {
cursor: -webkit-default;
cursor: -moz-default;
cursor: default;
}
/* Result div where the slider value is displayed */
.slider-header,
.slider-result {
float: left;
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 16px;
margin: 0 0 24px;
text-align: left;
/* width: 130px; */
}
.slider-header span {
/* color: #5F8344; */
}
.story p.slider-result {
float: right;
line-height: 18px;
margin-right: 150px;
width: 220px;
text-align: right;
}
.slider-result span {
color: #AD3C3C;
}
/* Fill bar colour */
.ui-widget-header {
height: 11px;
left: 0;
position: absolute;
}
ul.notches {
border: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
ul.notches li {
background: none repeat scroll 0 0 #9F9F9F;
display: block;
height: 17px;
position: absolute;
top: 0;
width: 11px;
-webkit-border-radius: 0 0 16px 16px;
-moz-border-radius: 0 0 16px 16px;
border-radius: 0 0 16px 16px;
}
ul.notches li .notch-tooltip {
background: none repeat scroll 0 0 #FFFFFF;
color: #444444;
display: none;
font-size: 13px;
left: 10px;
line-height: 19px;
padding: 2px 8px;
position: absolute;
text-align: center;
text-decoration:none;
font-style: italic;
bottom: -78px;
white-space: nowrap;
}
ul.notches li .notch-tooltip-arrow {
border-color: transparent transparent #FFFFFF;
border-style: solid;
border-width: 10px;
bottom: -40px;
display: none;
left: -4px;
position: absolute;
}
.your-vote .notch-tooltip {
}
.your-vote .notch-tooltip-arrow {
}
.other-vote {
}
input[disabled] {
/* display: none; */
/* opacity: 0.4; */
}
#content .rating form input[type="submit"]{
background: none repeat scroll 0 0 #2F2F2F;
clear: right;
color: #fff;
border: 0 none;
display: none;
float: right;
font-family: "Avant Garde", helvetica, sans-serif;
font-size: 15px;
margin-top: -10px;
-webkit-appearance: none;
}
#content .rating form input:hover {
background: #fff !important;
color: #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#content .rating form input[disabled]:hover {
background: #2F2F2F !important;
color: #fff;
}
p.tooltip {
background: none repeat scroll 0 0 #FFFFFF;
color: #444444;
float: right;
font-size: 14px;
font-style: italic;
margin: -9px 0 0 0;
padding: 3px 5px;
position: relative;
text-align: center;
width: 100px;
}
p.tooltip:after {
border-color: transparent #FFFFFF transparent transparent;
border-style: solid;
border-width: 7px;
bottom: 7px;
content: "";
display: block;
height: 0;
left: -14px;
position: absolute;
width: 0;
}
p.thanks,
p.alreadyvoted {
color: #9F9F9F;
display: none;
float: right;
font-size: 14px;
font-style: italic;
margin-top: -10px;
padding: 5px;
position: relative;
text-align: right;
width: 120px;
}
/*
a.tip {
position: relative;
text-decoration: none;
}
a.tip:hover:before {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: 120px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
background: rgba(0,0,0,.8);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
color: #fff;
font-size: .86em;
}
a.tip:hover:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top: -8px;
left:1em;
}
*/
/*
ul.notches li::before {
background: url("../img/sprite-rating-icons.png") repeat scroll 0 0 transparent;
content: "";
height: 17px;
left: -7px;
position: absolute;
top: -27px;
width: 16px;
}
ul.notches li.notch2::before { background-position: -40px 0; }
ul.notches li.notch3::before { background-position: -80px 0; }
ul.notches li.notch4::before { background-position: -120px 0; }
ul.notches li.notch1.selected::before,
ul.notches li.notch1:hover::before { background-position: 0 -40px; cursor: pointer; }
ul.notches li.notch2.selected::before,
ul.notches li.notch2:hover::before { background-position: -40px -40px; cursor: pointer; }
ul.notches li.notch3.selected::before,
ul.notches li.notch3:hover::before { background-position: -80px -40px; cursor: pointer; }
ul.notches li.notch4.selected::before,
ul.notches li.notch4:hover::before { background-position: -120px -40px; cursor: pointer; }
*/
/* ---------------------------------------------------------------------------------------
"RETINA" Displays only
--------------------------------------------------------------------------------------- */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
}
/* ---------------------------------------------------------------------------------------
< 860 px
--------------------------------------------------------------------------------------- */
@media screen and (max-width: 940px) {
}
/* ---------------------------------------------------------------------------------------
< 768 px
--------------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
body {
width: 100%;
padding: 0;
overflow: hidden;
}
input, textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#grid {
/* margin: 0 auto; */
float: left;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.image {
width: 100%;
}
.image img {
/* box-sizing: border-box; */
height: inherit;
max-width: 600px;
width: 100%;
}
div#content {
clear: both;
float: none;
margin: 180px auto 0;
}
div#sidebar {
float: none;
padding: 0 10px;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
div#sidebar p {
clear: both;
float: left;
margin: 0;
width: 270px;
}
#centering {
margin: 0 auto;
overflow: hidden;
width: 640px;
}
#bu-ident {
float: left;
margin-right: 40px;
}
#bu-submit {
float: left;
}
#bu-ident,
#bu-submit {
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out; /* Firefox 4 */
-webkit-transition: all 0.3s ease-out; /* Safari and Chrome */
-o-transition: all 0.3s ease-out; /* Opera */
}
.topRated,
.worstPosts {
display: none;
}
#sidebar h2 {
margin: 38px 0 14px;
}
#footer {
clear: both;
float: none;
margin: 0 auto 30px;
width: 620px;
}
#ident {
width: auto;
}
}
/* ---------------------------------------------------------------------------------------
< 600 px
--------------------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
}
/* ---------------------------------------------------------------------------------------
< 480 px
--------------------------------------------------------------------------------------- */
/* @media screen and (max-width: 480px) { */
/* @media only screen and (min-width : 320px) and (max-width: 480px) { */
/* @media only screen and (min-device-width : 320px) and (max-device-width: 480px) { */
@media only screen and (max-device-width: 720px) {
body {
/* min-width: 320px; */
width: 90%;
padding: 0 5%;
overflow: hidden;
}
input, textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
#grid {
margin: 0 0 0 0;
padding: 0;
width: 100%;
box-sizing: border-box;
}
#sidebar p {
width: 100%;
}
#bu-ident {
margin-right: 0;
width: 100%;
}
div#content {
margin-top: 200px;
}
div#content,
div#sidebar {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.story {
margin-bottom: 140px;
width: 100%;
}
.image img {
box-sizing: border-box;
}
.story h2 {
width: 85%;
}
.story > p {
margin-bottom: 10px;
width: 100%;
}
.story .byline {
float: left;
text-align: left;
width: 100%;
}
.byline {
margin-bottom: 30px;
}
.byline h5 br {
display:none
}
.byline a {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
#sidebar p#description span {
display: inline;
}
#bu-submit {
display: none;
}
.rating {
margin-left: 6%;
width: 87% !important;
}
p.tooltip {
float: left;
margin: -15px 0 0 0;
}
p.tooltip:after {
bottom: 30px;
left: 0;
border-color: transparent transparent #FFFFFF transparent;
}
#content .rating form input[type=submit] {
clear: both;
display: block;
float: none;
margin: 0 auto;
margin-top: 100px;
padding: 15px 35px 34px;
/*
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
*/
}
.slider {
margin-bottom: 50px;
width: 90%;
}
.slider:after {
content: '';
clear: both;
display: block;
}
h6.slider-header {
line-height: 22px;
width: 100% !important;
}
div.graph-bg {
width: 105%;
}
.rating form {
position: relative;
width: 100%;
}
a div.vote-tooltip {
top: -50px;
}
a div.vote-tooltip-arrow {
border-color: #FFFFFF transparent transparent transparent;
top: -22px;
}
.thanks {
display: none !important;
}
.navigation p a {
display: block;
margin-bottom: 40px;
text-align: center;
width: 100%;
}
.navigation p a span {
float: none !important;
}
#topLink {
display: none !important;
}
/* follow us */
.c4 {
padding: 0;
}
#ident {
margin-bottom: 10px;
}
/* SINGLE PAGE */
#content > p,
.story > p {
width: 100%;
}
#content h1, .story h1 {
width: 85%;
}
.video object {
height: auto;
width: 100% !important;
}
.video object embed {
height: auto;
width: 100% !important;
}
}