/*
Divino - A premium Church theme available in HTML/CSS
CSS Style File - 9th of August 2011
Author: Paul Roman - Kiwi Studio - http://paulroman.wordpress.com/
- General
>> General Formatting
>> @font-face
- Layout
> Grid System
> Pages
>> About
>> News
>> Subscribe
> Header
> Navigation
> Content
>> Main Content
>> Sidebar
> Footer
>> Columns
>> Social Contacts
- Contact Form
- Scripts Related
*/
/* -----------
= --- GENERAL
= --------------------------- */
body {
background-color:#eaeaea;
margin:0 auto;
position:relative;
background:url(../images/textures/light-textures/noise_pattern_with_crosslines.png);
}
body,
input,
textarea {
font:14px/1.3em 'PTSansRegular', ShantiRegular, 'Lucida Sans Unicode', Arial, sans;
}
p {
color:#444;
line-height:1.3em;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.31);
}
a {
color:#222;
text-decoration:none;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.31);
}
a:hover {
text-decoration:none;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
clear: both;
font-family:ShantiRegular,'Lucida Sans Unicode', Arial, sans;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
color:#444;
}
h1 {
font-size: 24px;
line-height: 1.3em;
padding: 15px 0;
}
h2 {
font-size: 18px;
line-height: 1.3em;
padding: 15px 0;
}
h3 {
font-size: 14px;
line-height: 1.3em;
padding:15px 0;
}
h4 {
font-size: 12px;
line-height: 1.3em;
padding:15px 0;
}
h5 {
font-size: 10px;
line-height: 1.3em;
padding:12px 0;
}
h6 {
font-size: 8px;
line-height: 1.3em;
padding:10px 0;
}
/* Text Elements */
address {
font-style: italic;
}
abbr[title], acronym[title], dfn[title] {
cursor: help;
}
blockquote {
font-family: ShantiRegular, Arial, sans;
font-size: 14px;
line-height: 1.3em;
font-style:italic;
}
blockquote p {
line-height: 1.3em;
}
blockquote.alignleft {
float:left;
}
blockquote.alignright {
float:right;
}
em, dfn, cite {
font-style: italic;
}
dfn {
font-weight: bold;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
small {
font-size: 12px;
}
strong {
font-weight: bold;
}
del {
text-decoration: line-through;
}
ins {
text-decoration: underline;
}
code, pre {
line-height: 16px;
}
var, kbd, samp, code, pre {
font: 12px/1.4em Courier, "Courier New", monospace;
}
kbd {
font-weight: bold;
}
samp, var {
font-style: italic;
}
pre {
clear:both;
overflow:auto;
padding:10px;
white-space:pre;
}
code {
padding: 0px 3px;
}
/* Lists: (ul, ol, dl) */
ul, ol, dl {
margin-left: 15px;
}
li ul, li ol {
margin-bottom: 0;
}
ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul ul {
list-style-type: none;
}
ul ul ul {
list-style-type: none;
}
dt {
font-weight: bold;
}
/* Images */
img.alignleft {
float: left;
margin-right: 20px;
margin-top: 5px;
}
img.alignright {
display: block;
float: right;
margin-left: 20px;
margin-top: 5px;
}
img.aligncenter {
margin-left: auto;
margin-right: auto;
display: block;
clear: both;
margin-top: 5px;
}
/* Gallery display */
gallery {
display:inline-block;
}
/* Basic Alignments */
.alignleft {
float: left;
margin-right: 15px;
margin-bottom: 5px;
}
.alignright {
float: right;
margin-left: 15px;
margin-bottom: 5px;
}
.aligncenter {
clear:both;
display:block;
margin-left: auto;
margin-right: auto;
}
/* -----------
= --- @FONT-FACE
= --------------------------- */
@font-face {
font-family: 'PTSansNarrowRegular';
src: url('../fonts/PTN57F-webfont.eot');
src: url('../fonts/PTN57F-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/PTN57F-webfont.woff') format('woff'),
url('../fonts/PTN57F-webfont.ttf') format('truetype'),
url('../fonts/PTN57F-webfont.svg#PTSansNarrowRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansCaptionBold';
src: url('../fonts/PTC75F-webfont.eot');
src: url('../fonts/PTC75F-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/PTC75F-webfont.woff') format('woff'),
url('../fonts/PTC75F-webfont.ttf') format('truetype'),
url('../fonts/PTC75F-webfont.svg#PTSansCaptionBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansCaptionRegular';
src: url('../fonts/PTC55F-webfont.eot');
src: url('../fonts/PTC55F-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/PTC55F-webfont.woff') format('woff'),
url('../fonts/PTC55F-webfont.ttf') format('truetype'),
url('../fonts/PTC55F-webfont.svg#PTSansCaptionRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansBoldItalic';
src: url('../fonts/PTS76F-webfont.eot');
src: url('../fonts/PTS76F-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/PTS76F-webfont.woff') format('woff'),
url('../fonts/PTS76F-webfont.ttf') format('truetype'),
url('../fonts/PTS76F-webfont.svg#PTSansBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansBold';
src: url('../fonts/PTS75F-webfont.eot');
src: url('../fonts/PTS75F-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/PTS75F-webfont.woff') format('woff'),
url('../fonts/PTS75F-webfont.ttf') format('truetype'),
url('../fonts/PTS75F-webfont.svg#PTSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansItalic';
src: url('../fonts/PTS56F-webfont.eot');
src: url('../fonts/PTS56F-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/PTS56F-webfont.woff') format('woff'),
url('../fonts/PTS56F-webfont.ttf') format('truetype'),
url('../fonts/PTS56F-webfont.svg#PTSansItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansRegular';
src: url('../fonts/PTS55F-webfont.eot');
src: url('../fonts/PTS55F-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/PTS55F-webfont.woff') format('woff'),
url('../fonts/PTS55F-webfont.ttf') format('truetype'),
url('../fonts/PTS55F-webfont.svg#PTSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansNarrowBold';
src: url('../fonts/PTN77F-webfont.eot');
src: url('../fonts/PTN77F-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/PTN77F-webfont.woff') format('woff'),
url('../fonts/PTN77F-webfont.ttf') format('truetype'),
url('../fonts/PTN77F-webfont.svg#PTSansNarrowBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ShantiRegular';
src: url('../fonts/Shanti-Regular-webfont.eot');
src: url('../fonts/Shanti-Regular-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Shanti-Regular-webfont.woff') format('woff'),
url('../fonts/Shanti-Regular-webfont.ttf') format('truetype'),
url('../fonts/Shanti-Regular-webfont.svg#ShantiRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AmaranthRegular';
src: url('../fonts/Amaranth-webfont.eot');
src: url('../fonts/Amaranth-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Amaranth-webfont.woff') format('woff'),
url('../fonts/Amaranth-webfont.ttf') format('truetype'),
url('../fonts/Amaranth-webfont.svg#AmaranthRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AmaranthBold';
src: url('../fonts/Amaranth-Bold-webfont.eot');
src: url('../fonts/Amaranth-Bold-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Amaranth-Bold-webfont.woff') format('woff'),
url('../fonts/Amaranth-Bold-webfont.ttf') format('truetype'),
url('../fonts/Amaranth-Bold-webfont.svg#AmaranthBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BevanRegular';
src: url('../fonts/Bevan-webfont.eot');
src: url('../fonts/Bevan-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Bevan-webfont.woff') format('woff'),
url('../fonts/Bevan-webfont.ttf') format('truetype'),
url('../fonts/Bevan-webfont.svg#BevanRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ArmWrestlerBold';
src: url('../fonts/ArmWrestler-webfont.eot');
src: url('../fonts/ArmWrestler-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/ArmWrestler-webfont.woff') format('woff'),
url('../fonts/ArmWrestler-webfont.ttf') format('truetype'),
url('../fonts/ArmWrestler-webfont.svg#ArmWrestlerBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ChunkFiveRegular';
src: url('../fonts/Chunkfive-webfont.eot');
src: url('../fonts/Chunkfive-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Chunkfive-webfont.woff') format('woff'),
url('../fonts/Chunkfive-webfont.ttf') format('truetype'),
url('../fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WalkwaySemiBoldRegular';
src: url('../fonts/Walkway_SemiBold-webfont.eot');
src: url('../fonts/Walkway_SemiBold-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Walkway_SemiBold-webfont.woff') format('woff'),
url('../fonts/Walkway_SemiBold-webfont.ttf') format('truetype'),
url('../fonts/Walkway_SemiBold-webfont.svg#WalkwaySemiBoldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WalkwayBoldRegular';
src: url('../fonts/Walkway_Bold-webfont.eot');
src: url('../fonts/Walkway_Bold-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Walkway_Bold-webfont.woff') format('woff'),
url('../fonts/Walkway_Bold-webfont.ttf') format('truetype'),
url('../fonts/Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WalkwayUltraBoldRegular';
src: url('../fonts/Walkway_UltraBold-webfont.eot');
src: url('../fonts/Walkway_UltraBold-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Walkway_UltraBold-webfont.woff') format('woff'),
url('../fonts/Walkway_UltraBold-webfont.ttf') format('truetype'),
url('../fonts/Walkway_UltraBold-webfont.svg#WalkwayUltraBoldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WalkwayBlackRegular';
src: url('../fonts/Walkway_Black-webfont.eot');
src: url('../fonts/Walkway_Black-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/Walkway_Black-webfont.woff') format('woff'),
url('../fonts/Walkway_Black-webfont.ttf') format('truetype'),
url('../fonts/Walkway_Black-webfont.svg#WalkwayBlackRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/BebasNeue-webfont.eot');
src: url('../fonts/BebasNeue-webfont_2d2816fe.eot#iefix') format('embedded-opentype'),
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* -----------
= --- LAYOUT
= --------------------------- */
.main-wrapper {
padding:0 0;
margin:0 auto;
width:960px;
height:auto;
}
.clear {
clear:both;
}
.clear:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
/* -----------
= --- LAYOUT >
= >> INUIT CSS
= >> GRID SYSTEM
= --------------------------- */
/*------------------------------------*\
GRID.INUIT.CSS
\*------------------------------------*/
/*
grid.inuit.css is an inuit.css igloo
igloos are CSS plugins which extend the inuit.css framework
They are released under the Apache License, Version 2.0 -- http://www.apache.org/licenses/LICENSE-2.0
@inuitcss
inuitcss.com
*/
/*------------------------------------*\
GRIDS
\*------------------------------------*/
/*
Page wrapper. Apply to the body where possible, as per: http://csswizardry.com/2011/01/using-the-body-element-as-a-wrapper/
*/
.wrapper{
width:940px;
margin:0 auto;
padding:0 10px;
}
/*
Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in ...
*/
.grids{
clear:both;
max-width:960px;
margin:0 0 0 -20px;
list-style:none; /* So we can make grids out of lists */
}
/*
Here we are using an attribute selector to detect the string 'grid-' in an element's class.
This works by assuming that anything we call grid- we also want to be a grid item. It means less code and less for you to remember!
Ensure any grid item's FIRST class is a grid- class. e.g.
VALID: class="grid-4 text-centre"
INVALID: class="left grid-4"
*/
[class^="grid-"]{
float:left;
margin:0 20px 0 0;
}
.grids [class^="grid-"]{
margin:0 0 0 20px;
}
.grid-1{ width:40px }
.grid-2{ width:100px }
.grid-3{ width:160px }
.grid-4{ width:220px }
.grid-5{ width:280px }
.grid-6{ width:340px }
.grid-7{ width:400px }
.grid-8{ width:460px }
.grid-9{ width:520px }
.grid-10{ width:580px }
.grid-11{ width:640px }
.grid-12{ width:700px }
.grid-13{ width:760px }
.grid-14{ width:820px }
.grid-15{ width:880px }
.grid-16{ width:940px; margin:0 }
/* -----------
= --- LAYOUT > PAGES
= --- >> ABOUT PAGE WITH SIDEBAR
= --------------------------- */
.first-col {
float:left;
width:295px;
margin-right:10px;
}
.second-col {
float:left;
width:320px;
margin-left:0px;
}
.first-col a h1.name {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:20px/0.8em AmaranthBold, Arial, sans;
color:#e7e5e5;
padding-left:40px;
position:relative;
margin-top:15px;
margin-bottom:18px;
margin-left:0px;
padding-top:19px;
height:21px;
text-align:center;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background:url(../images/heading-ribbon.png) no-repeat #4b33a3;
width:230px;
}
.first-col a h1:hover {
text-decoration:none;
color:#fff;
}
.first-col ul { /* For use on the body text - when you want to make unordered lists */
padding-left:40px;
padding-right:20px;
padding-top:5px;
margin-bottom:0px;
width:80%;
}
.first-col ul li { /* For use on the body text */
background:url(../images/cross-icon.png) left center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
padding-bottom:7px;
padding-left:30px;
padding-top:7px;
border-bottom:1px dotted #999;
cursor:pointer;
}
.first-col ul li:last-child {
border-style:none;
}
.first-col ul li:hover {
color:#333;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
}
.second-col a h1.name {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:24px/1.5 'Maiden Orange',Arial,sans;
color:#fff;
padding-left:30px;
position:relative;
padding-bottom:15px;
border-bottom:1px dotted #999; width:85%;
}
.second-col a h1:hover {
text-decoration:none;
color:#fff;
}
.second-col ul { /* For use on the body text - when you want to make unordered lists */
padding-left:20px;
padding-right:20px;
padding-top:20px;
margin-bottom:10px;
width:80%;
}
.second-col ul li { /* For use on the body text */
background:url(../images/cross-icon.png) left center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
padding-bottom:7px;
padding-left:30px;
padding-top:7px;
border-bottom:1px dotted #999;
cursor:pointer;
}
.second-col ul li:last-child {
border-style:none;
}
.second-col ul li:hover {
color:#333;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
}
/* -----------
= --- LAYOUT > PAGES
= --- >> HOME PAGE
= --------------------------- */
/* BUTTONS */
/*------------------------------------*\
CONTENTS
\*------------------------------------*/
/*
WRAPPER
BUTTON
BUTTON LABEL
BUTTON ICON
ICONS
DROPDOWN MENU
*/
/*------------------------------------*\
$WRAPPER
\*------------------------------------*/
.buttons {/* Style as you wish (toolbar) */}
/* The Magnificent CLEARFIX */
.buttons:before, .buttons:after {
content: "\0020"; display: block; height: 0; visibility: hidden;
}
.buttons:after { clear: both; }
.buttons { zoom: 1; }
/* ------------------------ */
/*------------------------------------*\
$BUTTON
\*------------------------------------*/
button,
.button {
text-decoration: none;
text-shadow: 0 1px 0 #fff;
font: bold 11px Helvetica, Arial, sans-serif;
color: #444;
line-height: 17px;
height: 18px;
float: left;
margin: 5px;
padding: 5px 6px 4px 6px;
background: #F3F3F3;
border: solid 1px #D9D9D9;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
box-shadow:0 0 1px rgba(0, 0, 0, 0.15);
-webkit-transition: border-color .20s;
-moz-transition: border-color .20s;
-o-transition: border-color .20s;
transition: border-color .20s;
}
button {
height: 29px !important;
cursor: pointer;
}
button.left,
.button.left {
margin: 5px 0 5px 5px;
border-top-right-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
}
button.middle,
.button.middle {
margin: 5px 0;
border-left-color: #F4F4F4;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
button.right,
.button.right {
margin: 5px 5px 5px 0;
border-left-color: #F4F4F4;
border-top-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-bottom-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
}
button:hover,
.button:hover {
background: #F4F4F4;
border-color: #C0C0C0;
color: #333;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.16) inset;
}
button:active,
.button:active {
border-color: #4D90FE;
color: #4D90FE;
-moz-box-shadow:inset 0 0 10px #D4D4D4;
-webkit-box-shadow:inset 0 0 10px #D4D4D4;
box-shadow:inset 0 0 10px #D4D4D4;
}
button.on,
.button.on {
border-color: #BBB;
-moz-box-shadow:inset 0 0 10px #D4D4D4;
-webkit-box-shadow:inset 0 0 10px #D4D4D4;
box-shadow:inset 0 0 10px #D4D4D4;
}
button.on:hover,
.button.on:hover {
border-color: #BBB;
-moz-box-shadow:inset 0 0 10px #D4D4D4;
-webkit-box-shadow:inset 0 0 10px #D4D4D4;
box-shadow:inset 0 0 10px #D4D4D4;
}
button.on:active,
.button.on:active {
border-color: #4D90FE;
}
button.action,
.button.action {
border: 1px solid #D8D8D8 !important;
background: #F2F2F2;
background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
background: -ms-linear-gradient(top, #F5F5F5, #F1F1F1);
background: -o-linear-gradient(top, #F5F5F5, #F1F1F1);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.action:hover,
.button.action:hover {
border: 1px solid #C6C6C6 !important;
background: #F3F3F3;
background: -webkit-linear-gradient(top, #F8F8F8, #F1F1F1);
background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);
background: -ms-linear-gradient(top, #F8F8F8, #F1F1F1);
background: -o-linear-gradient(top, #F8F8F8, #F1F1F1);
}
button.blue,
.button.blue {
border: 1px solid #3079ED !important;
background: #4B8DF8;
background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
background: -o-linear-gradient(top, #4C8FFD, #4787ED);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.blue:hover,
.button.blue:hover {
border: 1px solid #2F5BB7 !important;
background: #3F83F1;
background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
background: -moz-linear-gradient(top, #4D90FE, #357AE8);
background: -ms-linear-gradient(top, #4D90FE, #357AE8);
background: -o-linear-gradient(top, #4D90FE, #357AE8);
}
button.green,
.button.green {
border: 1px solid #29691D !important;
background: #3A8E00;
background: -webkit-linear-gradient(top, #3C9300, #398A00);
background: -moz-linear-gradient(top, #3C9300, #398A00);
background: -ms-linear-gradient(top, #3C9300, #398A00);
background: -o-linear-gradient(top, #3C9300, #398A00);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.green:hover,
.button.green:hover {
border: 1px solid #2D6200 !important;
background: #3F83F1;
background: -webkit-linear-gradient(top, #3C9300, #368200);
background: -moz-linear-gradient(top, #3C9300, #368200);
background: -ms-linear-gradient(top, #3C9300, #368200);
background: -o-linear-gradient(top, #3C9300, #368200);
}
button.red,
.button.red {
border: 1px solid #D14836 !important;
background: #D64937;
background: -webkit-linear-gradient(top, #DC4A38, #D14836);
background: -moz-linear-gradient(top, #DC4A38, #D14836);
background: -ms-linear-gradient(top, #DC4A38, #D14836);
background: -o-linear-gradient(top, #DC4A38, #D14836);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.red:hover,
.button.red:hover {
border: 1px solid #B0281A !important;
background: #D14130;
background: -webkit-linear-gradient(top, #DC4A38, #C53727);
background: -moz-linear-gradient(top, #DC4A38, #C53727);
background: -ms-linear-gradient(top, #DC4A38, #C53727);
background: -o-linear-gradient(top, #DC4A38, #C53727);
}
button.action:hover,
.button.action:hover {
-moz-box-shadow: 0 1px 0px #DDD;
-webkit-box-shadow: 0 1px 0px #DDD;
box-shadow:iset 0 1px 0px #DDD;
}
button.action:active,
.button.action:active {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-color: #C6C6C6 !important;
}
button.blue:active,
.button.blue:active {
border-color: #2F5BB7 !important;
}
button.green:active,
.button.green:active {
border-color: #2D6200 !important;
}
button.red:active,
.button.red:active {
border-color: #B0281A !important;
}
/*------------------------------------*\
$BUTTON LABEL
\*------------------------------------*/
.ddm span.label,
button span.label,
.button span.label {
display: inline-block;
float: left;
line-height: 17px;
height: 18px;
padding: 0 1px;
margin:0 auto;
overflow: hidden;
color: #222;
-webkit-transition: color .20s;
-moz-transition: color .20s;
-o-transition: color .20s;
transition: color .20s;
}
button span.label {
line-height: 15px !important;
}
.ddm:active span.label,
button:active span.label,
.button:active span.label {
color: #4D90FE;
}
button:hover .label,
.button:hover .label {
color: #333;
}
button:hover .label.red,
.button:hover .label.red {
color: #DB4A37;
}
button:hover .label.blue,
.button:hover .label.blue {
color: #7090C8;
}
button:hover .label.green,
.button:hover .label.green {
color: #42B449;
}
button:hover .label.yellow,
.button:hover .label.yellow {
color: #F7CB38;
}
button.blue .label,
.button.blue .label {
color: #FFF !important;
text-shadow: 0 1px 0 #2F5BB7 !important;
}
button.green .label,
.button.green .label {
color: #FFF !important;
text-shadow: 0 1px 0 #2D6200 !important;
}
button.red .label,
.button.red .label {
color: #FFF !important;
text-shadow: 0 1px 0 #B0281A !important;
}
button.action .label,
.button.action .label {
padding: 0 17px !important;
}
button.action:active .label,
.button.action:active .label {
color: #333 !important;
}
button.blue:active .label,
button.green:active .label,
button.red:active .label,
.button.blue:active .label,
.button.green:active .label,
.button.red:active .label {
color: #FFF !important;
}
/*------------------------------------*\
$BUTTON ICON
\*------------------------------------*/
.ddm span.icon,
button span.icon,
.button span.icon {
background-image: url(../images/google -ui-sprite-gray.png);
display: inline-block;
margin: 0 7px;
float: left;
line-height: 18px;
height: 18px;
width: 18px;
max-width: 18px;
overflow: hidden;
text-indent: -9999px;
background-repeat: no-repeat;
-webkit-transition: background-image 0.20s linear;
-moz-transition: background-image 0.20s linear;
-o-transition: background-image 0.20s linear;
transition: background-image 0.20s linear;
}
.ddm:hover span.icon,
button:hover span.icon,
.button:hover span.icon {
background-image: url(../images/google -ui-sprite-colour.png);
}
span.icon {
background-image: url(../images/google -ui-sprite-gray.png);
display: inline-block;
margin: 0 7px;
float: left;
line-height: 18px;
height: 18px;
width: 18px;
max-width: 18px;
overflow: hidden;
text-indent: -9999px;
background-repeat: no-repeat;
-webkit-transition: background-image 0.20s linear;
-moz-transition: background-image 0.20s linear;
-o-transition: background-image 0.20s linear;
transition: background-image 0.20s linear;
}
span.icon:hover {
background-image: url(../images/google -ui-sprite-colour.png);
}
/*------------------------------------*\
$ICONS
\*------------------------------------*/
/* Sprite Row 1 */
span.icon1 {background-position: -0px -0px;}
span.icon2 {background-position: -18px -0px;}
span.icon3 {background-position: -36px -0px;}
span.icon4 {background-position: -54px -0px;}
span.icon5 {background-position: -72px -0px;}
span.icon6 {background-position: -90px -0px;}
span.icon7 {background-position: -108px -0px;}
span.icon8 {background-position: -126px -0px;}
span.icon9 {background-position: -144px -0px;}
span.icon10 {background-position: -162px -0px;}
span.icon11 {background-position: -180px -0px;}
span.icon12 {background-position: -198px -0px;}
span.icon13 {background-position: -216px -0px;}
span.icon14 {background-position: -234px -0px;}
span.icon15 {background-position: -252px -0px;}
span.icon16 {background-position: -270px -0px;}
span.icon17 {background-position: -288px -0px;}
span.icon18 {background-position: -306px -0px;}
span.icon19 {background-position: -324px -0px;}
span.icon20 {background-position: -342px -0px;}
/* Sprite Row 2 */
span.icon21 {background-position: -0px -18px;}
span.icon22 {background-position: -18px -18px;}
span.icon23 {background-position: -36px -18px;}
span.icon24 {background-position: -54px -18px;}
span.icon25 {background-position: -72px -18px;}
span.icon26 {background-position: -90px -18px;}
span.icon27 {background-position: -108px -18px;}
span.icon28 {background-position: -126px -18px;}
span.icon29 {background-position: -144px -18px;}
span.icon30 {background-position: -162px -18px;}
span.icon31 {background-position: -180px -18px;}
span.icon32 {background-position: -198px -18px;}
span.icon33 {background-position: -216px -18px;}
span.icon34 {background-position: -234px -18px;}
span.icon35 {background-position: -252px -18px;}
span.icon36 {background-position: -270px -18px;}
span.icon37 {background-position: -288px -18px;}
span.icon38 {background-position: -306px -18px;}
span.icon39 {background-position: -324px -18px;}
span.icon40 {background-position: -342px -18px;}
/* Sprite Row 3 */
span.icon41 {background-position: -0px -36px;}
span.icon42 {background-position: -18px -36px;}
span.icon43 {background-position: -36px -36px;}
span.icon44 {background-position: -54px -36px;}
span.icon45 {background-position: -72px -36px;}
span.icon46 {background-position: -90px -36px;}
span.icon47 {background-position: -108px -36px;}
span.icon48 {background-position: -126px -36px;}
span.icon49 {background-position: -144px -36px;}
span.icon50 {background-position: -162px -36px;}
span.icon51 {background-position: -180px -36px;}
span.icon52 {background-position: -198px -36px;}
span.icon53 {background-position: -216px -36px;}
span.icon54 {background-position: -234px -36px;}
span.icon55 {background-position: -252px -36px;}
span.icon56 {background-position: -270px -36px;}
span.icon57 {background-position: -288px -36px;}
span.icon58 {background-position: -306px -36px;}
span.icon59 {background-position: -324px -36px;}
span.icon60 {background-position: -342px -36px;}
/* Sprite Row 4 */
span.icon61 {background-position: -0px -54px;}
span.icon62 {background-position: -18px -54px;}
span.icon63 {background-position: -36px -54px;}
span.icon64 {background-position: -54px -54px;}
span.icon65 {background-position: -72px -54px;}
span.icon66 {background-position: -90px -54px;}
span.icon67 {background-position: -108px -54px;}
span.icon68 {background-position: -126px -54px;}
span.icon69 {background-position: -144px -54px;}
span.icon70 {background-position: -162px -54px;}
span.icon71 {background-position: -180px -54px;}
span.icon72 {background-position: -198px -54px;}
span.icon73 {background-position: -216px -54px;}
span.icon74 {background-position: -234px -54px;}
span.icon75 {background-position: -252px -54px;}
span.icon76 {background-position: -270px -54px;}
span.icon77 {background-position: -288px -54px;}
span.icon78 {background-position: -306px -54px;}
span.icon79 {background-position: -324px -54px;}
span.icon80 {background-position: -342px -54px;}
/* Sprite Row 5 */
span.icon81 {background-position: -0px -72px;}
span.icon82 {background-position: -18px -72px;}
span.icon83 {background-position: -36px -72px;}
span.icon84 {background-position: -54px -72px;}
span.icon85 {background-position: -72px -72px;}
span.icon86 {background-position: -90px -72px;}
span.icon87 {background-position: -108px -72px;}
span.icon88 {background-position: -126px -72px;}
span.icon89 {background-position: -144px -72px;}
span.icon90 {background-position: -162px -72px;}
span.icon91 {background-position: -180px -72px;}
span.icon92 {background-position: -198px -72px;}
span.icon93 {background-position: -216px -72px;}
span.icon94 {background-position: -234px -72px;}
span.icon95 {background-position: -252px -72px;}
span.icon96 {background-position: -270px -72px;}
span.icon97 {background-position: -288px -72px;}
span.icon98 {background-position: -306px -72px;}
span.icon99 {background-position: -324px -72px;}
span.icon100 {background-position: -342px -72px;}
/* Sprite Row 6 */
span.icon101 {background-position: -0px -90px;}
span.icon102 {background-position: -18px -90px;}
span.icon103 {background-position: -36px -90px;}
span.icon104 {background-position: -54px -90px;}
span.icon105 {background-position: -72px -90px;}
span.icon106 {background-position: -90px -90px;}
span.icon107 {background-position: -108px -90px;}
span.icon108 {background-position: -126px -90px;}
span.icon109 {background-position: -144px -90px;}
span.icon110 {background-position: -162px -90px;}
span.icon111 {background-position: -180px -90px;}
span.icon112 {background-position: -198px -90px;}
span.icon113 {background-position: -216px -90px;}
span.icon114 {background-position: -234px -90px;}
span.icon115 {background-position: -252px -90px;}
span.icon116 {background-position: -270px -90px;}
span.icon117 {background-position: -288px -90px;}
span.icon118 {background-position: -306px -90px;}
span.icon119 {background-position: -324px -90px;}
span.icon120 {background-position: -342px -90px;}
/* Sprite Row 7 */
span.icon121 {background-position: -0px -108px;}
span.icon122 {background-position: -18px -108px;}
span.icon123 {background-position: -36px -108px;}
span.icon124 {background-position: -54px -108px;}
span.icon125 {background-position: -72px -108px;}
span.icon126 {background-position: -90px -108px;}
span.icon127 {background-position: -108px -108px;}
span.icon128 {background-position: -126px -108px;}
span.icon129 {background-position: -144px -108px;}
span.icon130 {background-position: -162px -108px;}
span.icon131 {background-position: -180px -108px;}
span.icon132 {background-position: -198px -108px;}
span.icon133 {background-position: -216px -108px;}
span.icon134 {background-position: -234px -108px;}
span.icon135 {background-position: -252px -108px;}
span.icon136 {background-position: -270px -108px;}
span.icon137 {background-position: -288px -108px;}
span.icon138 {background-position: -306px -108px;}
span.icon139 {background-position: -324px -108px;}
span.icon140 {background-position: -342px -108px;}
/* Sprite Row 8 */
span.icon141 {background-position: -0px -126px;}
span.icon142 {background-position: -18px -126px;}
span.icon143 {background-position: -36px -126px;}
span.icon144 {background-position: -54px -126px;}
span.icon145 {background-position: -72px -126px;}
span.icon146 {background-position: -90px -126px;}
span.icon147 {background-position: -108px -126px;}
span.icon148 {background-position: -126px -126px;}
span.icon149 {background-position: -144px -126px;}
span.icon150 {background-position: -162px -126px;}
span.icon151 {background-position: -180px -126px;}
span.icon152 {background-position: -198px -126px;}
span.icon153 {background-position: -216px -126px;}
span.icon154 {background-position: -234px -126px;}
span.icon155 {background-position: -252px -126px;}
span.icon156 {background-position: -270px -126px;}
span.icon157 {background-position: -288px -126px;}
span.icon158 {background-position: -306px -126px;}
span.icon159 {background-position: -324px -126px;}
span.icon160 {background-position: -342px -126px;}
/* Sprite Row 9 */
span.icon161 {background-position: -0px -144px;}
span.icon162 {background-position: -18px -144px;}
span.icon163 {background-position: -36px -144px;}
span.icon164 {background-position: -54px -144px;}
span.icon165 {background-position: -72px -144px;}
span.icon166 {background-position: -90px -144px;}
span.icon167 {background-position: -108px -144px;}
span.icon168 {background-position: -126px -144px;}
span.icon169 {background-position: -144px -144px;}
span.icon170 {background-position: -162px -144px;}
span.icon171 {background-position: -180px -144px;}
span.icon172 {background-position: -198px -144px;}
span.icon173 {background-position: -216px -144px;}
span.icon174 {background-position: -234px -144px;}
span.icon175 {background-position: -252px -144px;}
span.icon176 {background-position: -270px -144px;}
span.icon177 {background-position: -288px -144px;}
span.icon178 {background-position: -306px -144px;}
span.icon179 {background-position: -324px -144px;}
span.icon180 {background-position: -342px -144px;}
/* Sprite Row 10 */
span.icon181 {background-position: -0px -162px;}
span.icon182 {background-position: -18px -162px;}
span.icon183 {background-position: -36px -162px;}
span.icon184 {background-position: -54px -162px;}
span.icon185 {background-position: -72px -162px;}
span.icon186 {background-position: -90px -162px;}
span.icon187 {background-position: -108px -162px;}
span.icon188 {background-position: -126px -162px;}
span.icon189 {background-position: -144px -162px;}
span.icon190 {background-position: -162px -162px;}
span.icon191 {background-position: -180px -162px;}
span.icon192 {background-position: -198px -162px;}
span.icon193 {background-position: -216px -162px;}
span.icon194 {background-position: -234px -162px;}
span.icon195 {background-position: -252px -162px;}
span.icon196 {background-position: -270px -162px;}
span.icon197 {background-position: -288px -162px;}
span.icon198 {background-position: -306px -162px;}
span.icon199 {background-position: -324px -162px;}
span.icon200 {background-position: -342px -162px;}
/*------------------------------------*\
$DROPDOWN MENU
\*------------------------------------*/
div.dropdown {
float: left;
position: relative;
}
div.dropdown span.toggle {
width: 19px;
height: 16px;
margin-left: 7px;
margin-top: 1px;
margin-right: 2px;
padding-left: 8px;
float: right;
background: url(../images/toggle.png) top right no-repeat;
border-left: 1px solid #D9D9D9;
-webkit-transition: border-color .20s;
-moz-transition: border .20s;
-o-transition: border-color .20s;
transition: border-color .20s;
}
div.dropdown span.toggle.active {
background: url(../images/toggle.png) bottom right no-repeat;
}
div.dropdown
button:hover span.toggle,
.button:hover span.toggle {
border-color: #C0C0C0;
}
div.dropdown-slider {
display: none;
overflow: hidden;
margin: 0 7px 5px 7px;
position: absolute;
top: 34px;
right: 0;
background: #F2F2F2;
border-right: solid 1px #D9D9D9;
border-bottom: solid 1px #D9D9D9;
border-left: solid 1px #D9D9D9;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
-webkit-transition: border-color .20s;
-moz-transition: border .20s;
-o-transition: border-color .20s;
transition: border-color .20s;
}
.left div.dropdown-slider {
margin: 0 1px 5px 7px;
}
.middle div.dropdown-slider {
margin: 0 1px 5px 1px;
}
.right div.dropdown-slider {
margin: 0 7px 5px 1px;
}
div.dropdown-slider .ddm {
display: block;
background: #F2F2F2;
color: #585858;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
font: bold 11px Helvetica, Arial, sans-serif;
line-height: 18px;
height: 18px;
margin: 0;
padding: 5px 6px 4px 6px;
width: 100%;
float: left;
border-top: 1px solid #FFF;
border-bottom: 1px solid #D9D9D9;
}
div.dropdown-slider .ddm:hover {
background: #F4F4F4;
border-bottom-color: #C0C0C0;
}
div.dropdown-slider .ddm:active {
border-bottom-color: #4D90FE;
color: #4D90FE;
-moz-box-shadow:inset 0 0 10px #D4D4D4;
-webkit-box-shadow:inset 0 0 10px #D4D4D4;
box-shadow:inset 0 0 10px #D4D4D4;
}
div.dropdown-slider .ddm:last-child {
border-bottom: none;
}
/* LAYOUT */
.intro-slider {
width:630px;
margin-top:0;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
float:left;
}
.intro-slider-nivo {
width:630px;
margin-top:15px;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
float:left;
margin-left:0px;
}
.intro-welcome {
width:290px;
float:left;
padding-left:10px;
}
.intro-welcome-nivo {
width:290px;
float:left;
margin-left:20px;
}
.intro-welcome a h1 {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:20px/0.8em AmaranthBold, Arial, sans;
color:#e7e5e5;
position:relative;
margin-top:15px;
padding-left:20px;
padding-top:18px;
margin-bottom:15px;
height:21px;
width:273px;
/* border-bottom:1px dotted #999; */
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background-color:#4b33a3;
background:url(../images/sidebar-heading-ribbon.png) center right no-repeat;
cursor:pointer;
}
.intro-welcome a h1:hover {
text-decoration:none;
color:#fff;
}
.intro-welcome a.homepage-button {
margin-top:30px;
margin-bottom:-30px;
opacity:.9;
display: block;
-webkit-transition:.5s ease-out border;
-moz-transition:.5s ease-out border;
-o-transition:.5s ease-out border;
transition:.5s ease-out border;
}
.intro-welcome a.homepage-button:hover {
opacity:1;
}
.intro-welcome p {
font:14px/20px ShantiRegular,Arial, sans;
color:#333;
margin-top:10px;
margin-bottom:10px;
text-indent:30px;
}
.what-we-believe {
background:url(../images/what-we-believe-btn.png) no-repeat;
width:300px;
height:55px;
}
.read-latest-posts {
background: url(../images/read-latest-posts-btn.png) no-repeat;
width:300px;
height:55px;
}
.how-we-organise {
background: url(../images/how-we-organise-btn.png) no-repeat;
width:300px;
height:55px;
}
/* -----------
= --- LAYOUT > PAGES
= --- >> NEWS PAGE WITH SIDEBAR
= --------------------------- */
.post-item {
margin-top:10px;
margin-bottom:20px;
font:14px/20px ShantiRegular, Arial, Sans;
padding-bottom:40px;
}
.post-item-single {
margin-top:10px;
margin-bottom:20px;
font:14px/20px ShantiRegular, Arial, Sans;
}
.post-title {
width:630px;
}
.post-entry {
margin-top:-10px;
margin-bottom:20px;
font:14px/20px ShantiRegular, Arial, Sans;
}
.post-homepage {
margin-top:-10px;
margin-bottom:10px;
font:14px/20px ShantiRegular, Arial, Sans;
}
.post-meta {
margin-top:-10px;
color:#444;
width:620px;
margin-bottom:10px;
padding-bottom:0px;
padding-right:20px;
min-height:40px;
font:12px/18px ShantiRegular, Arial, Sans;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
font-style:italic;
}
.post-meta-bg {
background:url(../images/post-meta-bg.png) repeat-x;
min-height:23px;
padding-top:7px;
padding-left:5px;
padding-right:12px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6), inset 1px 1px 1px rgba(0 , 0 , 0, 0.1);
border-radius:3px;
}
.post-meta-home {
margin-top:10px;
text-align:right;
color:#888;
margin-bottom:15px;
font:12px/18px ShantiRegular, Arial, Sans;
}
.date {
margin-left:-115px;
margin-top:55px;
color:#666;
text-align:center;
width:75px;
height:75px;
background: url(../images/rounded-sewn-patch.png) no-repeat;
}
.date-home {
margin-left:-115px;
margin-top:55px;
color:#666;
text-align:center;
width:75px;
height:75px;
background: url(../images/rounded-sewn-patch.png) no-repeat;
}
.date p.day {
font-size:24px;
color:#666;
margin-top:10px;
margin-left:-25px;
font-family:ShantiRegular, ShantiRegular, Arial, sans;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.date p.month {
text-transform:uppercase;
color:#666;
margin-left:-30px;
margin-top:-8px;
font-size:18px;
font-family:ShantiRegular, Arial, sans;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.date-home p.day {
font-size:24px;
color:#666;
margin-top:10px;
margin-left:-25px;
font-family:ShantiRegular, Arial, sans;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.date-home p.month {
text-transform:uppercase;
color:#666;
margin-left:-30px;
margin-top:-8px;
font-size:18px;
font-family:ShantiRegular, Arial, sans;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.post-meta .author {
color:#666;
background:url(../images/user-icon.png) left center no-repeat;
padding: 0 0 0 25px;
}
.post-meta .comments {
color:#666;
background:url(../images/comments-icon.png) left center no-repeat;
padding: 0 0 0 25px;
margin-left:25px;
}
.post-meta .tags {
color:#666;
background:url(../images/tag-icon.png) left center no-repeat;
padding: 0 0 0 25px;
margin-left:25px;
}
.post-meta-home {
margin-top:-15px;
margin-bottom:25px;
margin-right:20px;
margin-bottom:30px;
}
.post-meta-home .author {
color:#666;
background:url(../images/user-icon.png) left center no-repeat;
padding: 0 0 0 25px;
}
.post-meta-home .comments {
color:#666;
background:url(../images/comments-icon.png) left center no-repeat;
padding: 0 0 0 25px;
margin-left:25px;
}
.post-meta-home .tags {
color:#666;
background:url(../images/tag-icon.png) left center no-repeat;
padding: 0 0 0 25px;
margin-left:25px;
}
.read-more {
margin-top:-15px;
margin-bottom:-35px;
background:url(../images/read-more.png) no-repeat;
width:120px;
height:40px;
opacity:0.90;
}
.read-more:hover {
opacity:1;
}
/* -----------
= --- LAYOUT > PAGES
= --- >> SUBSCRIBE PAGE
= --------------------------- */
.form-wrapper {
margin:0;
}
.form-message h1 {
font:24px/1.5 ShantiRegular, Arial, Sans;
color:#666;
width:100%;
text-align:justify;
text-indent:20px;
margin-bottom:-30px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
form.form-layout {
padding-top:15px;
}
.submit-button {
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeeg 99%);
background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
border: 1px solid #aaa;
border-radius:3px;
padding-top: 8px;
padding-bottom:8px;
padding-left:12px;
padding-right:12px;
color: #666;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-o-transition:ease-out .5s;
-moz-transition:ease-out .5s;
}
.submit-button:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.75);
color:#111;
}
/* -----------
= --- LAYOUT > PAGES
= --- >> MEDIA PAGE
= --------------------------- */
ul.media {
padding-left:20px;
padding-right:20px;
margin-top:-5px;
margin-bottom:5px;
}
ul.media li > a {
font-size:20px;
}
ul.media li > p {
margin-top:-5px;
margin-left:-30px;
font-style:italic;
}
ul.media li.gallery {
background: url(../images/pic-icon.png) left center no-repeat;
background: url(../images/pic-icon.png) left center no-repeat, url(../images/separator.png) bottom center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:-20px;
margin-bottom:0px;
padding-bottom:30px;
padding-left:70px;
padding-top:30px;
cursor:pointer;
}
ul.media li.sermon {
background: url(../images/mic-icon.png) left center no-repeat;
background: url(../images/mic-icon.png) left center no-repeat, url(../images/separator.png) bottom center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:-20px;
margin-bottom:0px;
padding-bottom:30px;
padding-left:70px;
padding-top:30px;
cursor:pointer;
}
ul.media li.movie {
background: url(../images/movie-icon.png) left center no-repeat;
background: url(../images/movie-icon.png) left center no-repeat, url(../images/separator.png) bottom center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:-20px;
margin-bottom:0px;
padding-bottom:30px;
padding-left:70px;
padding-top:30px;
cursor:pointer;
}
ul.media li.last {
border:none;
}
/* -----------
= --- LAYOUT > PAGES
= --- >> ERROR PAGE
= --------------------------- */
.error-bg {
background:#eaeaea url(../images/textures/noise-grey.png) repeat;
max-height:300px;
}
.error-msg {
background:url(../images/404.png) no-repeat;
margin:0 auto;
margin-top:14%;
width:470px;
height:150px;
}
/* -----------
= --- LAYOUT > PAGES
= --- >> CALENDAR PAGE
= --------------------------- */
/* Events Widget */
.calendar-single-entry-widget {
background: url(../images/separator.png) no-repeat bottom center;
padding-bottom:85px;
margin-bottom:25px;
margin-top:15px;
width:100%;
}
.calendar-single-entry-widget .date {
float:left;
margin-left:0px;
margin-top:-5px;
color:#666;
text-align:center;
border-radius:40px;
background: url(../images/rounded-sewn-patch.png) repeat;
}
.calendar-single-entry-widget .date p.day {
font-size:16px;
color:#666;
margin-left:-25px;
margin-top:18px;
margin-bottom:5px;
text-align:center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.calendar-single-entry-widget .date p.dayname {
text-transform:uppercase;
color:#666;
font-size:18px;
margin-left:-30px;
margin-top:-10px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.calendar-single-entry-widget .description-widget > p {
width:72%;
float:right;
margin-right:0px;
margin-top:2px;
text-indent:0px;
font-size:13px;
}
.calendar-single-entry-widget span.location-widget {
background:url(../images/location-icon.png) left center no-repeat;
padding:5px 0 0 20px;
margin:5px;
margin-left:10px;
font-style:italic;
font-size:11px;
min-height:32px;
width:100%;
}
.calendar-single-entry-widget span.time-widget {
background:url(../images/clock-icon.png) left center no-repeat;
padding:5px 0 0 20px;
font-style:italic;
font-size:11px;
}
/* Calendar Styling */
[class^="panel"]{
float: left;
margin: 20px;
}
.calendar-single-entry {
background: url(../images/separator.png) no-repeat bottom center;
padding-bottom:105px;
margin-top:10px;
}
.calendar-single-entry .date {
float:left;
margin-left:30px;
margin-top:-5px;
color:#666;
text-align:center;
border-radius:40px;
background: url(../images/rounded-sewn-patch.png) repeat;
}
.calendar-single-entry .date p.day {
font-size:16px;
color:#666;
margin-left:-25px;
margin-top:15px;
margin-bottom:5px;
text-align:center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.calendar-single-entry .date p.dayname {
text-transform:uppercase;
color:#666;
font-size:18px;
margin-left:-30px;
margin-top:-10px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.calendar-single-entry .description {
margin:20px;
margin-top:5px;
width: 450px;
float: right;
display: inline;
font-size: 24px;
font-family:AmaranthRegular, ShantiRegular, Arial, sans;
color:#444;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.calendar-single-entry .description p {
margin-top:15px;
margin-left:-50px;
float:left;
font-style:italic;
}
.calendar-single-entry span.location {
background:url(../images/location-icon.png) left center no-repeat;
padding:0 0 0 20px;
margin:20px;
width:100%;
height:28px;
}
.calendar-single-entry span.time {
background:url(../images/clock-icon.png) left center no-repeat;
padding:0 0 0 20px;
}
/* ----------
= --- LAYOUT > HEADER
= --------------------------- */
.header {
width:960px;
height:103px;
min-width:960px;
}
.logo {
background-image:url(../images/Logo.png);
background-repeat:no-repeat;
background-color:#4b33a3;
float:left;
margin-top:-5px;
width:150px;
height:63px;
box-shadow:0 -1px 3px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);
border-radius:3px;
}
div.logo p {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
color: #e5e5e5;
font:24px/1.5 'Pacifico',Arial,sans;
position:relative;
margin-top:12px;
padding-left:12px;
text-shadow: #000 1px 1px 5px;
text-indent:-9999px;
}
.socialize-wrapper {
float:right;
position:relative;
width:200px;
height:40px;
z-index:-1;
}
.socialize-content {
float:right;
margin-top:5px;
margin-right:5px;
margin-left:-200px;
position:relative;
z-index:1;
}
.socialize-content ul li {
display:inline-block;
margin-left:1px;
padding:4px 1px 3px 4px;
opacity:0.7;
transition:ease-out 0.5s;
-webkit-transition:ease-out 0.5s;
-moz-transition:ease-out 0.5s;
-o-transition:ease-out 0.5s;
}
.socialize-content ul li:hover {
opacity:1
}
.socialize-image {
float:right;
margin-top:1px;
margin-right:105px;
margin-left:-200px;
}
.weekly-quote {
background-image:url(../images/quote-noise2.png);
background:url(../images/quote-mark.png) no-repeat center left, url(../images/quote-noise2.png) repeat;
width:223px;
margin:0 auto;
width:974px;
padding-top:15px;
padding-left:50px;
box-shadow:inset 0 1px 15px rgba(0,0,0,0.3);
height:auto;
min-height:70px;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
}
.weekly-quote:hover {
box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.weekly-quote ul {
margin:0 auto;
margin-top:10px;
height:auto;
}
.weekly-quote ul#quote-rotator li {
border:none;
list-style-image:none;
background:none;
min-height:30px;
width:900px;
color:#666;
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
font-style:italic;
margin:0 auto;
margin-top:0px;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
font-style:normal;
text-align: center;
}
.weekly-quote ul#quote-rotator li blockquote {
font:22px/1.4em ShantiRegular,Arial,sans;
}
/* ----------
= --- LAYOUT > NAVIGATION
= --------------------------- */
.nav-container {
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
background: url(../images/nav-sewn.png) #4b33a3 repeat-x;
margin:0 auto;
margin-top:-52px;
width:1024px;
height:53px;
z-index:20;
border-radius:3px;
}
#nav-wrapper {
padding:0 0;
margin:0 auto;
width:960px;
height:52px;
line-height:60px;
}
.nav {
margin-top: -2px;
padding: 7px 6px 0;
font-family: BebasNeueRegular, arial, serif;
font-weight:500;
font-size:24px;
line-height: 1.3em;
}
.nav li {
margin: 0 5px;
padding: 0 10px 8px 0;
float: left;
position: relative;
list-style: none;
background:url(../images/nav-separator.png) right center no-repeat;
}
.nav li:last-child {
background:none;
}
/* main level link */
.nav a {
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
margin-top:-2px;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
/* main level link hover */
.nav li:hover > a {
color:#fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
/* sub levels link hover */
.nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.nav ul li a:hover,
.nav ul li ul a:hover {
background-color: rgba( 0, 0, 0, 0.5);
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0; }
/* level 2 list */
.nav ul {
background-color: #666; /* for non-css3 browsers */
background: rgba(0, 0, 0, 0.75);
background-image:url(../images/nav-texture.png);
display: none;
margin: 0;
padding: 0;
width:160%;
position: absolute;
padding-top:10px;
padding-bottom:10px;
border: solid 1px #b4b4b4;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
box-shadow: 0 0 7px rgba(0, 0, 0, .6);
z-index:10000;
margin-top:2px;
border-style:none;
border-top:5px solid rgba(255, 255, 255, 0.1);
border-bottom:5px solid rgba(0, 0, 0, 0.3);
}
/* dropdown */
.nav li:hover > ul {
display: block;
}
.nav ul li {
float: none;
margin: 0;
padding: 0;
font-family:BebasNeueRegular, ShantiRegular, Arial, sans;
font-size:14px;
line-height:20px;
box-shadow:rgba(1, 1, 1, 0.4) 0px 3px 5px;
background:none;
}
.nav ul li:last-child {
box-shadow:none;
}
.nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
/* level 3+ list */
.nav ul li ul {
margin-left:3px;
left: 150px;
margin-top: -50px;
width:150%;
}
.nav ul li ul li {
float: none;
margin: 0;
padding: 0;
font-family:BebasNeueRegular, ShantiRegular, Arial, sans;
font-size:14px;
line-height:1.5em;
}
/* rounded corners for first and last child */
.nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
.nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
.nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.nav {
display: inline-block;
}
/* = -----
/* --- Subscribe Button
/* ---------------------- */
.call-to-action {
margin-top:10px;
margin-right:5px;
float:right;
width:100px;
height:33px;
border-radius:3px;
box-shadow:inset 0 0 10px rgba(0, 0, 0, 0.75);
}
.call-to-action:hover {
box-shadow:inset 0 0 1px rgba(0, 0, 0, 0.75);
-webkit-transition:.5s ease-out;
-moz-transition:.5s ease-out;
-o-transition:.5s ease-out;
transition:.5s ease-in-out;
}
.subscribe {
background-image:url(../images/subscribe.png);
background-repeat:no-repeat;
background-color:#ff0988;
}
/* ----------
= --- LAYOUT > CONTENT
= --------------------------- */
.content-background { /* Background color with texture */
padding-top:15px;
background: #d9d9d9; /* For non-CSS3 browsers */
background-image:url(../images/content-footer-separator.png), url(../images/Header-bg.png);
background-repeat: repeat-x, repeat;
background-position:center top, top left;
margin:0 auto;
margin-top:-1px;
width:1024px;
height:auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
z-index:300;
}
.content-wrapper { /* Wraps all content in a 960px grid system */
margin:0 auto;
width:960px;
padding:30px;
padding-top:20px;
padding-bottom:5px;
margin-top:1px;
}
/* ----------
= --- LAYOUT > SLIDER
= --------------------------- */
#s3slider {
width: 620px; /* important to be same as image width */
height: 410px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
margin-top:5px;
margin-left:0px;
margin-bottom:20px;
border: 5px solid white; /* Non rgba browsers */
border: 5px solid rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
}
#s3sliderContent {
width: 625px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
font: 10px/15px ShantiRegular,Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 200px;
background-color: #000;
text-indent:30px;
filter: alpha(opacity=80); /* here you can set the opacity of box with text */
-webkit-opacity: 0.8; /* here you can set the opacity of box with text */
-moz-opacity: 0.8; /* here you can set the opacity of box with text */
-khtml-opacity: 0.8; /* here you can set the opacity of box with text */
opacity: 0.8; /* here you can set the opacity of box with text */
color: #eaeaea;
display: none; /* important */
bottom:20px;
right:20px;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
border-radius:3px;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.s3sliderImage span a.readmore {
font:10px/15px Arial, Helvetica, sans-serif;
color:#333;
position:relative;
float:right;
margin-right:-300px;
}
.s3sliderImage span a {
font:10px/15px Arial, Helvetica, sans-serif;
text-shadow:none;
color:#999;
}
/* ----------
= --- LAYOUT > CONTENT
= --- >> MAIN CONTENT
= --------------------------- */
.main-content {
width:630px;
margin-top:0;
padding-right:20px;
padding-bottom:20px;
margin-bottom:10px;
border-right:1px dashed #999;
float:left;
}
.main-content a { /* For use - Main content links */
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:14px/1.5 ShantiRegular,Arial,sans;
color:#4b33a3;
}
.main-content a:hover {
text-decoration:none;
}
.main-content a h1 { /* Main content headings */
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:20px/0.8em AmaranthBold, Arial, sans;
color:#e7e5e5;
padding-left:40px;
position:relative;
margin-top:15px;
margin-bottom:18px;
margin-left:0px;
padding-top:19px;
height:21px;
width:590px;
text-align:center;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background:url(../images/heading-ribbon.png) no-repeat;
}
.main-content a h1:hover {
text-decoration:none;
color:#fff;
}
.main-content p {
font:14px/1.4em 'ShantiRegular',ShantiRegular,Arial, sans;
color:#333;
margin-top:7px;
text-indent:30px;
}
.main-content img.border { /* Sets a 5px border with box-shadow */
margin:10px;
margin-top:25px;
margin-bottom:25px;
border: 5px solid white; /* Non rgba browsers */
border: 5px solid rgba(255, 255, 255, 0.5);
max-width:600px;
background-clip: padding-box;
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
position:relative;
display:inline;
}
.main-content img.ministries {
margin:10px;
margin-top:0px;
border: 5px solid white; /* Non rgba browsers */
border: 5px solid rgba(255, 255, 255, 0.5);
max-width:600px;
background-clip: padding-box;
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
position:relative;
display:inline;
}
.main-content img.border:hover { /* Blue box shadow hover effect with small transition */
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
border: 5px white solid; /* Fallback for rgba */
border: 5px solid rgba(255, 255, 255, 0.25);
-webkit-box-shadow: 0 0 5px rgba(28, 127, 159, 1);
-moz-box-shadow: 0 0 5px rgba(28, 127, 159, 1);
box-shadow: 0 0 5px rgba(28, 127, 159, 1);
}
.main-content img.featured { /* For use when you are writing a post */
margin:10px;
margin-top:25px;
margin-bottom:25px;
border: 5px white solid; /* Fallback for rgba */
border: 5px solid rgba(255, 255, 255, 0.5);
max-width:600px;
background-clip: padding-box;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
position:relative;
display:block;
}
.main-content img.featured:hover { /* Blue box shadow hover effect with small transition */
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
border: 5px white solid; /* Fallback for rgba */
border: 5px solid rgba(255, 255, 255, 0.25);
-webkit-box-shadow: 0 0 5px rgba(28, 127, 159, 1);
-moz-box-shadow: 0 0 5px rgba(28, 127, 159, 1);
box-shadow: 0 0 5px rgba(28, 127, 159, 1);
}
.main-content ul.main { /* ALWAYS use this class when you want to add ul so it won't interfere with the slider */
padding-left:20px;
padding-right:20px;
padding-top:5px;
margin-bottom:25px;
width:40%;
}
.main-content ul.main li {
background:url(../images/cross-icon.png) left center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
padding-bottom:7px;
padding-left:30px;
padding-top:7px;
border-bottom:1px dotted #999;
cursor:pointer;
}
.main-content ul.main li:hover { /* Hover effect on the list element : Turns blue with transition */
color:#666;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
}
ul.main li:last-child {
border-style:none;
}
.main-content blockquote {
margin:30px;
padding-top:15px;
padding-bottom:15px;
padding-left:50px;
padding-right:15px;
font-style:italic;
font-size:16px;
line-height:1.5;
border-left:1px solid #999;
}
/* ----------
= --- LAYOUT > CONTENT
= --- >> SIDEBAR
= --------------------------- */
.sidebar {
width:290px;
float:right;
padding-left:10px;
}
.sidebar a {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:14px/1.3 ShantiRegular, Arial, sans;
color:#666;
}
.sidebar a:hover {
text-decoration:none;
color:#333;
}
.sidebar a h1 {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:20px/0.8em AmaranthBold, Arial, sans;
color:#e7e5e5;
position:relative;
margin-top:15px;
padding-left:20px;
padding-top:18px;
height:21px;
width:273px;
/* border-bottom:1px dotted #999; */
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background-color:#4b33a3;
background:url(../images/sidebar-heading-ribbon.png) center right no-repeat;
cursor:pointer;
}
.sidebar a h1:hover {
text-decoration:none;
color:#fff;
}
.sidebar p {
font:14px/20px ShantiRegular,Arial, sans;
color:#333;
margin-top:10px;
margin-bottom:10px;
text-indent:30px;
}
.sidebar img.border {
margin:10px;
margin-top: 25px;
border: 5px solid white; /* Non rgba browsers */
border: 5px solid rgba(255, 255, 255, 0.5);
max-width:255px;
background-clip: padding-box;
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
position:relative;
display:inline;
}
.sidebar img.border:hover {
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
border: 5px solid white; /* Non rgba browsers */
border: 5px solid rgba(255, 255, 255, 0.25);
-webkit-box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
-moz-box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
}
.sidebar div.team {
margin-left:-5px;
}
.sidebar div.team img {
width:110px;
height:83px;
}
.sidebar div.team p {
width:80%;
margin-top:-3px;
margin-bottom:2px;
font:14px/1.5 ShantiRegular, Arial, sans;
font-style:italic;
text-align:center;
margin-left:8px;
}
.sidebar div.team p.title {
font-style:normal;
margin-left:10px;
}
.main-content .ornament {
background:url(../images/separator.png) center bottom no-repeat;
width:95%;
margin-top:5px;
margin-bottom:5px;
height:30px;
}
.sidebar .ornament {
background:url(../images/separator.png) center bottom no-repeat;
width:95%;
margin-top:-25px;
margin-bottom:25px;
height:30px;
}
.sidebar ul {
padding-left:20px;
padding-right:20px;
padding-top:5px;
margin-bottom:25px;
width:80%;
}
.sidebar ul li {
background:url(../images/cross-icon.png) left center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
padding-bottom:7px;
padding-left:30px;
padding-top:7px;
border-bottom:1px dotted #999;
cursor:pointer;
}
ul.service li {
background:url(../images/clock-list-icon.png) left center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
padding-bottom:7px;
padding-left:30px;
padding-top:7px;
border-bottom:1px dotted #999;
cursor:pointer;
}
ul.contact li {
background:url(../images/info-list-icon.png) left center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
padding-bottom:7px;
padding-left:30px;
padding-top:7px;
border-bottom:1px dotted #999;
cursor:pointer;
}
.sidebar ul li:hover {
color:#666;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
}
.sidebar ul li:last-child {
border-style:none;
}
/* ----------
= --- LAYOUT > FOOTER
= --------------------------- */
.footer-background {
margin:0 auto;
width:1024px;
height:auto;
min-height:200px;
padding-top:15px;
}
.footer-wrapper {
margin:0 auto;
width:960px;
height:auto;
padding-top:5px;
padding-bottom:5px;
margin-top:1px;
display:block;
overflow:hidden;
}
.column {
display:inline-block;
width:290px;
padding-right:14px;
padding-left:10px;
margin-right:20px;
float:left;
padding-bottom:-10px;
margin-bottom:10px;
min-height:315px;
}
.column-last {
display:inline-block;
width:286px;
min-height:150px;
float:left;
padding-bottom:10px;
margin-bottom:-7px;
min-height:315px;
}
.column p,
.column-last p {
margin-top:10px;
margin-left:30px;
color:#777;
font:14px/1.5 ShantiRegular, Arial, sans;
text-indent:30px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.column a,
.column-last a {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:14px/1.5 ShantiRegular, Arial, sans;
color:#4b33a3;
text-shadow:none;
}
.column a:hover {
text-decoration:none;
}
.column span.heading {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:20px/.7em AmaranthBold, Arial, sans;
color:#444;
padding-left:130px;
padding-top:15px;
margin-left:-70px;
margin-top:15px;
margin-bottom:15px;
width:260px;
height:30px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
background:url(../images/footer-heading-ribbon.png) no-repeat center top;
border-radius:3px;
float:left;
cursor:pointer;
}
.column span.heading span.text {
margin:0 auto;
margin-left:10px;
text-align:center;
width:270px;
}
.column-last span.heading span.text {
margin-left:20px;
width:270px;
}
.column-last span.heading {
-webkit-transition:all ease-out .5s;
-moz-transition:all ease-out .5s;
-o-transition:all ease-out .5s;
transition:all ease-out .5s;
font:20px/.7em AmaranthBold, Arial, sans;
color:#444;
padding-left:130px;
padding-top:15px;
margin-left:-50px;
margin-top:15px;
margin-bottom:15px;
width:260px;
height:30px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
background:url(../images/footer-heading-ribbon.png) no-repeat center top;
border-radius:3px;
float:left;
cursor:pointer;
}
.column span.heading:hover,
.column-last span.heading:hover {
text-decoration:none;
color:#111;
}
.column h1,
.column h2,
.column h3,
.column-last h1,
.column-last h2,
.column-last h3 {
margin-left:30px;
color:#666;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
.column-last h3 {
margin-top:0px;
font-size:26px;
font-weight:bold;
margin-left:50px;
margin-bottom:-10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
cursor:pointer;
}
.column-last h3:hover {
color:#333;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
cursor:pointer;
}
.column-last p {
margin-left:20px;
}
.column ul.social-contacts li ,
.column-last ul.social-contacts li {
padding-top:10px;
margin-bottom:10px;
border:none;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:0;
margin-left:3px;
padding-bottom:5px;
padding-top:5px;
cursor:pointer;
opacity:.8;
}
.column ul.social-contacts li:hover,
.column-last ul.social-contacts li:hover {
opacity:1;
}
.column ul li:last-child,
.column-last ul li:last-child {
border:none;
}
.column-last ul.social-contacts {
padding-top:10px;
margin-left:5px;
padding-left:13px;
}
.column-last ul.social-contacts li
{
width:30px;
height:30px;
margin-bottom:2px;
list-style-image:none;
position:relative;
display:inline-block;
}
.footer-credits {
color:#999;
font-family:ShantiRegular, Arial, Sans;
font-size:12px;
margin:0 auto;
width:100%;
float:left;
line-height:1.5;
padding-top:30px;
padding-bottom:10px;
margin-bottom:-15px;
}
/* ----------
= --- CONTACT FORM
= --------------------------- */
input[type="text"], input[type="password"], input[type="email"], textarea, select .2col {
min-width:255px;
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
padding-top:3px;
padding-bottom:3px;
padding-left:15px;
padding-right:5px;
border-radius:5px;
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
border: 1px solid #aaa;
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
border-radius:3px;
}
input[type="submit"]:hover {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
::-webkit-input-placeholder, ::-moz-placeholder {
color:#444;
}
::-webkit-input-data-placeholder, ::-moz-data-placeholder {
margin-left:-50px;
}
input[value] {
color:#444;
}
textarea:hover, select:hover, input:hover {
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, .3);
-o-box-shadow: 0 0px 5px rgba(0, 0, 0, .3);
box-shadow: 0 0px 5px rgba(0, 0, 0, .3);
}
textarea:focus, select:focus, input:focus {
color:#666;
-webkit-box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
-moz-box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
outline:none;
}
.grid-5 ul {
padding-top:30px;
padding-bottom:20px;
padding-left:10px;
padding-right:10px;
}
.grid-5 ul li {
background:url(../images/cross-icon.png) left center no-repeat;
font:14px/1.3em ShantiRegular, Arial, sans;
color:#333;
position:relative;
font-size:14px;
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
padding-bottom:7px;
padding-left:30px;
padding-top:7px;
border-bottom:1px dotted #999;
cursor:pointer;
}
.grid-5 ul li:last-child {
border:none;
}
/* -----------
= --- SCRIPTS RELATED
= --------------------------- */
/* tipsy */
.tipsy { padding: 5px; font-size: 10px; opacity: 0.9; filter: alpha(opacity=90); background-repeat: no-repeat; background-image: url(../images/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }
/* Google Maps API */
#map_canvas {
width: 590px; height: 300px;
margin:25px;
border: 5px solid rgba(255, 255, 255, 0.5);
max-width:600px;
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
position:relative;
margin-top:9px;
}
#map_canvas-footer {
width: 240px; height: 240px;
border: 5px solid rgba(255, 255, 255, 0.5);
max-width:250px;
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
position:relative;
margin-top:85px;
margin-left:0px;
}
#map_canvas:hover {
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
border: 5px solid rgba(255, 255, 255, 0.25);
-webkit-box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
-moz-box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
}
#pano {
width: 590px; height: 300px;
margin:25px;
border: 5px solid rgba(255, 255, 255, 0.5);
max-width:600px;
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.1) inset;
position:relative;
margin-top:15px;
}
#pano:hover {
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
border: 5px solid rgba(255, 255, 255, 0.25);
-webkit-box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
-moz-box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
box-shadow: 0 0px 5px rgba(28, 127, 159, 1);
}
/* NIVO SLIDER */
/*
* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background-color:#eaeaea;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*
Skin Name: Divino Theme
Skin Type: fixed
Version: 1.0
Author: Paul Roman
*/
.theme-Divino.slider-wrapper {
margin-left:0;
background:url(../images/slider.png) no-repeat;
width:620px;
height:470px;
padding-top:18px;
position:relative;
margin-bottom:-20px;
}
.theme-Divino .nivoSlider {
position:relative;
width:600px;
height:415px;
margin-left:9px;
margin-top:-10px;
background:url(../images/loading.gif) no-repeat 50% 50%;
}
.theme-Divino .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:600px; /* Make sure your images are the same size */
height:255px; /* Make sure your images are the same size */
}
.theme-Divino .nivoSlider a {
border:0;
display:block;
}
.theme-Divino .nivo-controlNav {
position:absolute;
left:50%;
bottom:-25px;
margin-left:-30px; /* Tweak this to center bullets */
}
.theme-Divino .nivo-controlNav a {
display:block;
width:10px;
height:10px;
background:url(../images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}
.theme-Divino .nivo-controlNav a.active {
background-position:0 -10px;
}
.theme-Divino .nivo-directionNav a {
display:block;
width:25px;
height:200px;
background:url(../images/arrows.png) no-repeat 0% 50%;
text-indent:-9999px;
border:0;
top:25%;
}
.theme-Divino a.nivo-nextNav {
background-position:100% 50%;
right:-30px;
padding-right:20px;
}
.theme-Divino a.nivo-prevNav {
left:-30px;
padding-left:20px;
}
.theme-Divino .nivo-caption {
font-family:ShantiRegular, Helvetica, Arial, sans-serif;
opacity:1;
}
.theme-Divino .nivo-caption a {
color:#999;
}
.theme-Divino .nivo-caption a:hover {
color:#fff;
}
/* PrettyPhoto Gallery items */
ul.gallery {
margin-left:20px;
margin-top:10px;
margin-bottom:10px;
}
ul.gallery li a img {
width:158px;
height:67px;
}
ul.gallery li {
float:left;
display:inline;
margin-left:5px;
margin-right:5px;
margin-top:-10px;
margin-bottom:-5px;
padding-right:10px;
padding-left:-10px;
width:176px;
background:url(../images/separator.png) center bottom no-repeat;
}
ul.gallery li > p {
margin-top:-15px;
margin-left:10px;
margin-right:-10px;
margin-bottom:25px;
font-size:12px;
text-indent:0px;
}
ul.gallery li.last {
border:none;
background:none;
}
/* STYLE SWITCHER */
#switcher {
position:fixed;
top:8%;
left:0;
background: url(../images/switcher-bg.png) repeat-y;
width:200px;
height:280px;
margin-left:-170px;
transition:ease-in-out .5s;
-webkit-transition:ease-in-out .5s;
-moz-transition:ease-in-out .5s;
-o-transition:ease-in-out .5s;
z-index:1000;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
box-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
}
#switcher:hover {
left:170px;
}
#switcher_wrapper {
width:170px;
height:340px;
}
#switcher p {
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 3px;
margin: 0;
padding-bottom:-10px;
transition: ease-out .5s;
-webkit-transition: ease-out .5s;
-moz-transition: ease-out .5s;
-o-transition: ease-out .5s;
margin:12px;
font-weight:bold;
font:24px/1.3em 'BebasNeueRegular', Arial, sans;
}
#switcher a {
color:#eaeaea;
text-decoration:none;
}
#switcher ul {
list-style-type:none;
list-style:none;
margin:5px;
width:175px;
margin-top:-10px;
}
#switcher ul li {
display:inline-block;
margin:2px;
}
#switcher ul li:hover {
transition:ease-out .5s;
-webkit-transition:ease-out .5s;
-moz-transition:ease-out .5s;
-o-transition:ease-out .5s;
}
/* AnythingSlider */
/* Set AnythingSlider panel sizes, Main & FX demo pages */
#anythingslider .panel1 { width: 100%; height:700px; }
#anythingslider .panel2 { width: 100%; height:600px; }
#anythingslider .panel3 { width: 100%; }
#anythingslider .panel4 { width: 100%; }
#anythingslider .panel5 { width: 100%; }
#anythingslider .panel6 { width: 100%; }
.textSlide { padding: 10px 30px; }
.textSlide h3 { font: 20px Georgia, Serif; }
.textSlide h4 { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul { list-style: disc; margin: 0; padding-left: 20px; }
.textSlide ul li { display: list-item; }
.rightside { float: right; margin: 0 0 2px 10px; }
.quoteSlide { padding: 20px; }
.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
.quoteSlide p { text-align: center; }
/***************************
Video Compatibility table
***************************/
.video-info { width: 700px; margin: 0 auto; margin-top: 50px; font-size: 18px; }
.video-info h2 { text-align: center; }
.video-info ul,
.video-info li { margin: 0; }
.video-info sup { font-size: 12px; }
.video-info th.header { width: 25px; }
.good { background: #080; }
.bad { background: #800; }
.prob { background: #880; }
.group { border: #000 1px solid; }
/* External Nav for Slider */
.external-nav {
margin:0;
color:#111;
}
/** Style the tweets */
.twitter-item {
padding:11px 0 11px 0;
width:275px;
}
.twitter-image {
width:25px;
height:25px;
float:left;
padding-right:15px;
}
.twitter-text {
color:#777;
font:13px/18px ShantiRegular, Arial, Sans;
text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
cursor:pointer;
border-top:1px dotted #999;
padding-bottom:5px;
padding-top:0px;
margin-bottom:-20px;
margin-right:25px;
clear:both;
}
.twitter-text a {
font:13px/18px ShantiRegular, Arial, Sans;
}