@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|Cousine:400,700);
/*------------------------------------------*/
/*--- BASE & RESET STYLES ---*/
/*------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, vid eo {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display: block }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
/*--- tables still need cellspacing="0" in the markup ---*/
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
.ie7 img { -ms-interpolation-mode: bicubic; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*--- HTML5 MEDIA ---*/
audio,canvas,video {display: inline-block;*display: inline;*zoom: 1;}
audio:not([controls]) {display: none;}
/*--- MINIMAL BASE STYLES ---*/
html{
font-size: 100%; /* 1 */
overflow-y: scroll; /* 2 */
-webkit-text-size-adjust: 100%; /* 3 */
-ms-text-size-adjust: 100%; /* 3 */
}
body{
min-height:100%;
margin:0 auto;
}
strong, th { font-weight: bold; }
td { vertical-align: top; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
q:before,q:after{ content:''; }
/*------------------------------------------*/
/*--- TYPOGRAPHY ---*/
/*------------------------------------------*/
html {
background:#f8f7ec;
font-size: 100%;
line-height: 1.5;
}
body, select, input, textarea {
color: #444;
}
/*--- Webfonts ---*/
html,
a.cat_link {
font-family: 'Cousine',"Courier New", Courier, mono;
}
#header a,
h1, h2, h3, h4, h5, h6,
#header input {
font-family: 'PT Sans',"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
h1{
font-size:2em; /* 32px */
margin-bottom:0.75em; /* 24px */
line-height:1.5; /* 48px */
}
h2{
font-size:1.5em; /* 24px */
margin-bottom:1em; /* 24px */
line-height:1; /* 24px */
}
h3{
font-size:1.25em; /* 20px */
margin-bottom:1.2em; /* 24px */
line-height:1.2; /* 24px */
}
h4{
font-size:1.125em; /* 18px */
margin-bottom:1.333em; /* 24px */
line-height:1.333; /* 24px */
}
h5,
h6{
font-size:1em; /* 16px */
margin-bottom:1.5em; /* 24px */
line-height:1.5; /* 24px */
}
/*--- FONT SIZES ---*/
p {
font-size: .813em;
margin-bottom:1.5em;
}
#related_item,
#paging a {
font-size: 0.688em;
}
#main article p,
#footer p {
color: #7b7b7b;
}
/*p+p{
text-indent:2em;
margin-top:-1.5em;
}*/
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
dfn { font-style: italic; }
/*------------------------------------------*/
/*--- LINK STYLES ---*/
/*------------------------------------------*/
a:link,a:visited{
color: #000;
font-weight: bold;
text-decoration: none;
}
a:visited {
opacity:0.8;
}
p a:link,p a:visited {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a:hover {color: #a5a5a5;}
a:hover, a:active { outline: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }
a:active, a:focus {
position:relative;
top:1px;
}
a:focus {
text-shadow: #61a0ff 0 0 7px;
outline: thin dotted;
}
.more_link:after,
.more_link::after{
content:" »";
}
/*------------------------------------------*/
/*--- NAV ---*/
/*------------------------------------------*/
.navi.centred,
.navi.centered{
text-align:center;
}
.navi.centred li,
.navi.centered li{
display:inline;
float:none;
}
.navi.centred a,
.navi.centered a{
display:inline-block;
}
.navi.horiz,
.navi.vert {
border: 1px solid #e8e6d7;
border-radius:3px;
}
.navi.horiz li {
float: left;
}
.navi.horiz a,
.navi.centred a,
.navi.centered a {
border-right: 1px solid #e8e6d7;
}
.navi.horiz a,
.navi.vert a {
display: block;
}
.navi.horiz a,
.navi.vert a,
.navi.centred a,
.navi.centered a {
padding: 5px 10px;
}
.navi.vert a {
padding-left: 10px;
border-bottom: 1px solid #ddd;
}
.navi.horiz li:last-child a,
.navi.vert li:last-child a,
.navi.centred li:last-child a,
.navi.centered li:last-child a{
border: none;
}
.navi.horiz,
.navi.vert,
.tabs a {
background-color: #f7f6eb;
}
.navi.horiz a,
.navi.vert a,
.tabs a {
font-size: .9em;
}
/*--- TABBED NAV ---*/
ul.tabs {
display: block;
margin: 0 0 1.5em 0;
padding: 0;
border-bottom: solid 1px #ddd; }
ul.tabs li {
display: block;
width: auto;
height: 30px;
padding: 0;
float: left;
margin-bottom: 0; }
ul.tabs li a {
display: block;
text-decoration: none;
width: auto;
height: 29px;
padding: 0px 20px;
line-height: 30px;
border: solid 1px #ddd;
border-width: 1px 0 0 1px;
margin: 0; }
ul.tabs li a.active {
background: #fff;
height: 30px;
position: relative;
top: -4px;
padding-top: 4px;
border-right-width: 1px;
margin: 0 -1px 0 0;
color: #111;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px; }
ul.tabs li:first-child a {
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px; }
ul.tabs li:last-child a {
border-width: 1px 1px 0 1px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px; }
/*------------------------------------------*/
/*--- LISTS ---*/
/*------------------------------------------*/
ol { list-style-type: decimal; }
nav ul,
nav li,
.ui_list,
.navi.horiz,
.navi.vert,
.navi.centred,
ul.floated,
#live_search .ls_results ol { margin: 0; list-style:none; list-style-image: none;
}
.navi.vert {
margin-bottom: 1.5em;
}
ul,
ol{
margin:0 0 1.5em 45px;
}
ul ul,
ol ol,
ul ol,
ol ul{
margin:0 0 0 45px;
}
/*--- No margins on lists ---*/
.ui_list,
.ui_list .ui_list{
margin: 0 0 1.5em;
}
.ui_list ul,
.ui_list ol,
.ui_list ol,
.ui_list ul{
margin:0 0 0 45px;
}
/*--- DEFINITION LISTS ---*/
dd{
margin-left:45px;
}
dl{
margin-bottom:1.5em;
}
dt{
font-weight:bold;
}
dt:after,
dt::after{
content:":";
}
/*--- FLOATED LISTS ---*/
.floated li {
float: left;
display: inline-block;
}
.floated.half li {
/* 50% width with a bit of padding */
width: 46%;
padding: 2%;
}
.floated.thirds.nopad li {
/* 33% width */
width: 33.3333333333333333%;
}
.floated.thirds li {
/* 33% width with padding */
width: 29%;
padding: 1.2% 2% 2%;
}
/*--- KEYWORDS - Create a list of keywords by adding a single class to a
: ---*/
.keywords{
list-style:none;
margin:0 0 1.5em;
}
.keywords li{
display:inline;
text-transform:lowercase;
}
.keywords li:first-of-type{
text-transform:capitalize;
}
.keywords li:after,
.keywords li::after,
#related_items a:after,
#related_items a::after{
content:", ";
}
.keywords li:last-of-type:after,
.keywords li:last-of-type::after,
#related_items a:last-of-type:after,
#related_items a:last-of-type::after{
content:".";
}
/*--- BREADCRUMBS - Create a breadcrumb list by adding a single class to a : ---*/
.breadcrumb{
margin:0;
list-style:none;
}
.breadcrumb li{
display:inline;
font-weight:bold;
}
.breadcrumb a{
display:inline-block;
font-weight:normal;
}
.breadcrumb li:before{
content:"\0020\00BB\0020";
}
.breadcrumb li:first-child:before{
content:normal;
}
/* IE7 support */
/* Uncomment when supporting IE7
.breadcrumb li{
background:url(/path/to/splitter/image) left center no-repeat;
}
/* Uncomment when supporting IE7
.breadcrumb li:first-child{
background:none;
}
*/
/*--- QUOTES ---*/
blockquote{
text-indent:-0.4em;
}
blockquote b,
blockquote .source{
/* Mark the source up with either a or another element of your choice with a class of source. */
display:block;
text-indent:0;
}
/*--- GENERAL ---*/
q,i,em,cite{
font-style:italic;
font-weight:inherit;
}
b,strong{
font-weight:bold;
font-style:inherit;
}
mark { background: #ff0; color: #000; }
s,del{
text-decoration:line-through;
}
small{
font-size:0.75em;
line-height:1;
}
/*--- CODE ---*/
pre, code{ font-family:monospace;font-size:1em; }
pre{
overflow:auto;
margin-bottom:1.5em;
line-height:24px; /* Having to define explicit pixel values :( */
padding: 10px;
line-height: 1.2;
overflow-x: scroll;
-webkit-box-shadow: inset 0px 4px 7px rgba(0,0,0,.4);
-moz-box-shadow: inset 0px 4px 7px rgba(0,0,0,.4);
-o-box-shadow: inset 0px 4px 7px rgba(0,0,0,.4);
box-shadow: inset 0px 4px 7px rgba(0,0,0,.4);
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-bottom: 20px;
margin-top: 10px;
background: #7E7E7E no-repeat;
}
pre code { color:#fff; line-height:1.5; }
code{ line-height:1; }
pre,code,kbd,samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/*------------------------------------------*/
/*--- EMBEDDED CONTENT ---*/
/*------------------------------------------*/
img{ font-style:italic; color:#c00; border: 0; -ms-interpolation-mode: bicubic; }
img.left { margin:0 20px 0 0; }
img.right { margin:0 0 0 20px; }
svg:not(:root) { overflow: hidden; }
/*--- FLASH/VIDEO ---*/
img,object,embed,video{ max-width:100%; height:auto; }
/*------------------------------------------*/
/*--- LOGO ---*/
/*------------------------------------------*/
#logo,
#logo img{
display:block;
width:274px; /* Width of your logo in pixels (ideally a round grid-number) */
height:61px; /* Height of your logo in pixels */
margin: 0 auto;
}
/* Based on the fact that we need to use an in our markup, let’s hide the actual image and use a background on the --this gives us semantically sound markup and the ability to use sprites for hover effects! */
#logo{
background:url(../img/logo.png);
margin-top: 10px;
margin-bottom: 5px;
}
#logo:hover{
/* Hover states */
background-position:0 0;
}
#logo img{
position:absolute;
left:-99999px;
}
/*------------------------------------------*/
/*--- PAGE PAGINATION ---*/
/*------------------------------------------*/
.page_pagination a {
padding-right:7px;
padding-left:7px;
border:1px solid #fff;
}
.page_pagination a.active {
border-color:#000;
}
/*------------------------------------------*/
/*--- TABS ---*/
/*------------------------------------------*/
ul.tabs_content { margin: 0; display: block; }
ul.tabs_content > li { display:none; }
ul.tabs_content > li.active { display: block; }
/*------------------------------------------*/
/*--- TABLES ---*/
/*------------------------------------------*/
table{
margin-bottom:1.5em;
width:100%;
max-width:100%;
}
thead tr:last-of-type th{
/* Thicker border on the table-headers of the last row in the table head */
border-bottom-width:2px;
}
tbody th{
/* Thicker right border on table-headers in the table body */
border-right-width:2px;
}
th:empty{
/* Hide the borders on any empty table-headers */
border:none;
}
th,td{
vertical-align:top;
padding:0.75em;
border:1px solid #ccc;
}
th{
font-weight:bold;
text-align:center
}
td[colspan]{
text-align:center;
}
td[rowspan]{
vertical-align:middle;
}
tbody tr:nth-of-type(odd){
background:rgba(0,0,0,0.05);
}
tfoot{
text-align:center;
}
tfoot td{
border-top-width:2px;
}
/*------------------------------------------*/
/*--- MESSAGES ---*/
/*------------------------------------------*/
.message{
font-weight:normal;
display:block;
padding:10px 10px 10px 36px;
border:1px solid #ccc;
margin:0 0 1.5em 0;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
/*--- With multiple errors it’s nice to group them. ---*/
ul.message{
list-style:decimal outside;
padding:10px 10px 10px 56px;
}
.error{
border-color:#fb5766;
background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
}
.success{
border-color:#83ba77;
background:url(../img/css/icons/success.png) 10px center no-repeat #d1feba;
}
.info{
border-color:#85a5be;
background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;
}
.warning{
border-color:#d8d566;
background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;
}
/*------------------------------------------*/
/*--- CSS3 ---*/
/*------------------------------------------*/
/*--- Transitions ---*/
a,
#backdrop,
#neighbours span,
#header {
-webkit-transition: all 0.12s ease-in-out;
-moz-transition: all 0.12s ease-in-out;
-o-transition: all 0.12s ease-in-out;
transition: all 0.12s ease-in-out;
}
/*--- Border Radius ---*/
.floated li {
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*--- GRADIENTS ---*/
#header,
#neighbours span {
background: #747d84;
background: -moz-linear-gradient(top, #747d84 0%, #434f56 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#747d84), color-stop(100%,#434f56));
background: -webkit-linear-gradient(top, #747d84 0%,#434f56 100%);
background: -o-linear-gradient(top, #747d84 0%,#434f56 100%);
background: -ms-linear-gradient(top, #747d84 0%,#434f56 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#747d84', endColorstr='#434f56',GradientType=0 );
background: linear-gradient(top, #747d84 0%,#434f56 100%);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.52);
}
/*------------------------------------------*/
/*-----------------------------------------*/
/*--- SITE SPECIFIC STYLES ---*/
/*---------------------------------------*/
/*--------------------------------------*/
html,body {
height: 100%;
}
#header {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 100;
}
.list_page #header { position: fixed; }
#header:after,
.ls_results:after {
display: block;
content: '';
height: 6px;
background: url(../img/css/header-wiggle.png) repeat-x;
position: absolute;
left: 0;
right: 0;
z-index: 0;
}
#nav a {
color: #fff;
font-style: normal;
font-size: 1em;
text-transform: uppercase;
padding: 3px 12px 2px;
border: 1px solid transparent;
margin: 7px 3px;
}
#nav a.active,
#nav a:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.17);
position: relative;
top: 0;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.76);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-color: rgba(0, 0, 0, 0.28);
}
#nav {
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.29);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.29);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.29);
position: relative;
z-index: 1;
}
#header form,
#header input {
display: inline-block;
}
#header input {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height: 24px;
border-style: none;
background-color: rgba(255, 255, 255, 0.29);
padding: 0 0 0 10px;
color: #fff;
position: relative;
top: -2px;
}
#live_search {
position: relative;
padding-left: 10px;
}
.ls_results {
position: absolute;
text-align: left;
background-color: #434f56;
top: 33px;
width: 170px;
left: 50%;
margin-left: -85px;
}
#live_search .ls_results ul {
width: 150px;
}
#live_search .ls_results li,
#live_search .ls_results li a {
display: block;
float: none;
}
#live_search .ls_results li a {
font-size: .8em;
text-transform: none;
font-weight: normal;
font-style: normal;
}
.ls_results p {
padding: 10px 10px 9px;
margin-bottom: 0;
text-align: center;
}
body.default { text-align: center; }
/*--- ARTICLES ---*/
#container {
margin: 143px 120px 0;
}
#main {
margin: 0 auto;
position: relative;
}
.entry_page #main {
margin-top: -80px;
}
.list_page #main article {
width: 321px;
background-color: rgba(255, 255, 255, 1);
text-align: left;
margin: 3px 7px 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 2px #c1c1c1;
-webkit-box-shadow: 0 1px 2px #c1c1c1;
box-shadow: 0 1px 2px #c1c1c1;
position: relative;
opacity: 0;
}
.list_page #main article:hover {
-moz-box-shadow: 0 1px 6px #c1c1c1;
-webkit-box-shadow: 0 1px 6px #c1c1c1;
box-shadow: 0 1px 6px #c1c1c1;
}
#main article div {
padding: 26px;
}
#main article div.has_img {
margin-top: -3px;
position: relative;
background: url(../img/css/article-wiggle.png) repeat-x left top;
}
.site_thumb {
width: 321px;
}
.site_thumb,
.site_thumb img {
display: block;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
a.cat_link {
color: #fff;
background-color: #727272;
display: inline-block;
padding: 3px 5px 1px;
position: relative;
top: -3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-transform: uppercase;
font-weight: normal;
font-style: normal;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18);
font-size: 11px;
}
a.cat_link:hover {
opacity: .6;
}
#article a.cat_link {
position: absolute;
left: -40px;
border-bottom-style: none;
font-weight: bold;
font-size: 22px;
padding: 0.1em .5em 0 1em;
top: -30px;
}
.gallery a.cat_link {
background-color: #39ba7e;
}
.plugins a.cat_link {
background-color: #d95656;
}
.tutorials a.cat_link {
background-color: #55add9;
}
/**** Isotope filtering ****/
.list_page #main article.isotope-item {
opacity: 1;
position: relative;
}
.list_page #main article.isotope-item:after {
display: block;
content: '';
height: 60px;
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
#main {
background: url(../img/ajaxLoader.gif) no-repeat center top;
}
#main.isotope {
background: none;
}
.isotope-item {
z-index: 2;
}
/*.isotope-item:hover {
outline: solid 5px black;
}*/
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity, -webkit-box-shadow;
-moz-transition-property: -moz-transform, opacity, -moz-box-shadow;
transition-property: transform, opacity, box-shadow;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s !important;
-moz-transition-duration: 0s !important;
transition-duration: 0s !important;
opacity:0;
}
/*--- INFINITE SCROLL ---*/
#infscr-loading {
text-align: center;
background-color: red;
font-weight: normal;
font-style: normal;
font-size: .8em;
position: fixed;
bottom: 0;
left: 50%;
z-index: 160;
background: #747d84;
background: -moz-linear-gradient(top, #747d84 0%, #434f56 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#747d84), color-stop(100%,#434f56));
background: -webkit-linear-gradient(top, #747d84 0%,#434f56 100%);
background: -o-linear-gradient(top, #747d84 0%,#434f56 100%);
background: -ms-linear-gradient(top, #747d84 0%,#434f56 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#747d84', endColorstr='#434f56',GradientType=0 );
background: linear-gradient(top, #747d84 0%,#434f56 100%);
width: 90px;
height: 50px;
margin-left: -45px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-indent: -999em;
padding-top: 20px;
}
#infscr-loading img {
display: block;
margin: 0 auto;
}
#paging {
position: fixed;
top: 148px;
right: 20px;
height: 30px;
line-height: 26px;
text-align: left;
}
.entry_page #paging {
display: none;
}
#paging h5 {
margin-bottom: .5em;
}
#paging a {
display: block;
font-weight: normal;
font-style: normal;
border-left-style: solid;
border-left-width: 4px;
width: 70px;
padding: 2px 7px 1px;
margin: 0 0 1px;
text-transform: uppercase;
}
#paging,
#paging a {
color: #bbbbbb;
}
#paging a:hover {
color: #919191;
}
/*--- LIGHTBOX ---*/
.col {
float: none;
}
#article {
text-align: left;
}
.lrg_img,
.lrg_img img {
display: block;
margin-bottom: 1em;
}
.lrg_img img {
padding: .5em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 auto;
border: 1px solid #d8d7cd;
max-width: 97%;
}
a.visit_link {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.77);
font-style: normal;
font-size: .813em;
text-transform: uppercase;
border: 1px solid transparent;
background-color: #e0dfd5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: .4em 1em .3em;
margin: .5em 1em .5px;
}
a.visit_link:hover {
background-color: #c3c2b6;
color: inherit;
}
/*--- LEVELS ---*/
#level_1_container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
#backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
/*width: 150px;*/
right: 0;
z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
}
#backdrop:hover {
background-color: rgba(0, 0, 0, 0.4);
cursor: pointer;
}
#level_1 {
background: #fff;
padding: 170px 20px 70px;
-moz-box-shadow: 0 1px 9px rgba(0, 0, 0, 0.49);
-webkit-box-shadow: 0 1px 9px rgba(0, 0, 0, 0.49);
box-shadow: 0 1px 9px rgba(0, 0, 0, 0.49);
width: 250px;
margin: 0 auto;
position: relative;
z-index: 9;
}
.list_page #level_1 {
position: absolute;
top: 0;
left: 50%;
margin-left: -145px;
}
#level_1:after {
content: '';
display: block;
position: absolute;
background: url(../img/css/header-wiggle.png) repeat-x -4px;
bottom: -5px;
left: 0;
right: 0;
height: 6px;
}
#level_1 > * {
position: relative;
float: none;
clear: both;
}
.levels #container {
position: fixed;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
margin-left: -8px;
margin-right: -8px;
}
#neighbours li {
position: relative;
width: 50%;
text-align: center;
z-index: 1000;
}
#neighbours a {
margin-top: 0;
position: relative;
z-index: 999;
}
#neighbours span {
opacity: 0;
background-color: red;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: .1em 10px;
font-size: .813em;
position: absolute;
top: 0em;
width: 100px;
left: 50%;
margin-left: -60px;
z-index: 998;
}
#neighbours a:hover span {
opacity: 1;
top: 3.5em;
}
/*--- FOOTER ---*/
#footer {
position: fixed;
bottom: 0;
left: 0;
right:0;
z-index: 5;
background-color: #f8f7ec;
text-align: left;
padding: 10px 15px;
}
#footer * {
color: #f0f0f0 !important;
}
#footer:before {
display: block;
content: '';
height: 20px;
position: absolute;
left: 0;
right: 0;
background: url(../img/css/footer-fade.png) repeat-x;
top: -20px;
}
/*--- SOCIAL ---*/
#social {
position: fixed;
left: 0;
bottom: 15%;
width: 74px;
text-align: center;
background-color: #fff;
padding-top: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#social > * {
margin-bottom: 10px;
}
.fb-like {
display: inline-block;
width: 49px;
}
#item_social {
margin-right: auto;
margin-left: auto;
width: 20em
}
#item_social li {
padding: .833em;
}
/*#item_social > * {
display: inline;
}*/
#older_newer {
background: none repeat scroll 0 0 #E97052;
color: #FFFFFF;
display: block;
font-size: 10px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.3em;
padding: 15px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 500px;
display: none;
}
#disqus_thread {
clear: both;
}
/*============= */
/*=== FORMS === */
/*============= */
form { margin: 0; }
fieldset{ padding:10px; border:1px solid #ccc; margin-bottom:1.5em; }
legend { border: 0; *margin-left: -7px; padding: 0; }
label{
display:block;
cursor:pointer;
position: relative;
}
label, input[type=button], input[type=submit], button, input[type="reset"], [placeholder] { cursor: pointer }
label:after, label::after{ content:":"; }
[placeholder]:active, [placeholder]:focus{ cursor:text; }
/*------------------------------------------*/
/*--- LAYOUT ---*/
/*------------------------------------------*/
.form_items {
list-style:none;
margin:0 0 1.5em 0;
}
.form_items li,
.form_item {
margin-bottom: 15px;
padding: 14px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.form_items li:hover,
.form_item:hover {
background-color: #f6f6f6;
}
.focused {
background-color: #eee;
}
.form_items.floated li {
display: inline-block;
margin-bottom: 5px;
}
.form_items.inlined {
text-align: right;
}
.form_items.inlined > li {
display: inline;
}
/*--- RADIO/CHECKBOX HORIZONTAL LIST ---*/
.form_items.inlined .check_list {
display: inline;
}
.check_list {
list-style:none;
margin:0;
}
.check_list li{
float:left;
margin-right: 15px;
margin-bottom: 0;
}
.check_list input {
margin-right: 5px;
}
.check_list label{
display:inline;
vertical-align:middle;
}
.check_list label:after,
.check_list label::after{
content:normal;
}
fieldset > :last-child{
margin:0;
}
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"], input[type="checkbox"] { vertical-align: text-bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button, .button { cursor: pointer; }
input:valid, textarea:valid {}
input:invalid, textarea:invalid {
-webkit-border-radius: 1px;
-khtml-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-moz-box-shadow: 0 0 5px red;
-webkit-box-shadow: 0 0 5px red;
box-shadow: 0 0 5px red;
}
/*--- FORM NOTES ---*/
.form_note {
position: relative;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #cfcfcf;
display: inline-block;
width: 20px;
text-align: center;
color: white;
height: 20px;
line-height: 20px;
float: right;
font-weight: bold;
font-size: 14px;
}
.form_note:hover{
background-color: #888;
}
.form_note span {
position: absolute;
display: none;
background-color: #f7f7f7;
color: #808080;
font-weight: normal;
font-style: normal;
font-size: 11px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: right;
z-index: 2000;
width: 125px;
right: 25px;
top: -1px;
}
.form_note:hover span {
display: inline;
}
/*------------------------------------------*/
/*--- WIDTHS ---*/
/*------------------------------------------*/
.input_tiny {
width: 50px;
}
.input_small {
width: 100px;
}
.input_medium {
width: 150px;
}
.input_large {
width: 200px;
}
.input_xlarge {
width: 250px;
}
.input_xxlarge {
width: 300px;
}
.input_full {
width: 100%;
}
/* Added via JS to