/* ===== HTML5 ================================================================= */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* ===== Global ================================================================= */
html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; font-family:Helvetica, Helvetica Neue, Arial, sans-serif; line-height: 1.231; background-color:#e9e9e9; background-image:url(../img/background.jpg); background-repeat:no-repeat; background-position:top center; margin-top:0px;}
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
::-moz-selection{ background: #4993ae; color: #fff; text-shadow: none; }
::selection { background: #4993ae; color: #fff; text-shadow: none; }
.wrapper { margin:auto; width:960px; }
#header-container{ height:130px; margin-bottom:50px; }
header nav {float:left; margin-top:100px; }
header nav ul li{display:inline;}
nav a {padding:20px; color:white; text-decoration:none; }
article header {margin-top:40px; margin-bottom:50px; padding-bottom:30px; width:700px;}
#footer-container{clear:both; height:75px; margin-top:50px; padding-top:35px; padding-left:25px; padding-bottom:20px; }
#footer-container footer{color:white; }
/* ===== Typography ================================================================= */
.text { font:12px Helvetica, Helvetica Neue, Arial; color:#333; line-height:1.4em; }
.text a { font:12px Helvetica, Helvetica Neue, Arial; color:#333; text-decoration:none; line-height:1.4em; }
.text a:hover { font:12px Helvetica, Helvetica Neue, Arial; color:#333; text-decoration:underline; line-height:1.4em; }
.text a:visited { font:12px Helvetica, Helvetica Neue, Arial; color:#333; text-decoration:none; line-height:1.4em; }
.headtext { font:14px Helvetica, Helvetica Neue, Arial; color:#c8c8c8; line-height:1.6em; }
.headtext a { font:14px Helvetica, Helvetica Neue, Arial; color:#c8c8c8; text-decoration:none; line-height:1.6em; }
.headtext a:hover { font:14px Helvetica, Helvetica Neue, Arial; color:#c8c8c8; text-decoration:underline; line-height:1.6em; }
.headtext a:visited { font:14px Helvetica, Helvetica Neue, Arial; color:#c8c8c8; text-decoration:none; line-height:1.6em; }
.topbannertxt { font:12px Helvetica, Helvetica Neue, Arial; color:#fff; }
.topbannertxt a { font:12px Helvetica, Helvetica Neue, Arial; color:#fff; text-decoration:none; }
.topbannertxt a:hover { font:12px Helvetica, Helvetica Neue, Arial; color:#fff; text-decoration:none; }
.topbannertxt a:visited { font:12px Helvetica, Helvetica Neue, Arial; color:#fff; text-decoration:none; }
.copyrighttxt { font:10px Helvetica, Helvetica Neue, Arial; color:#333; }
.copyrighttxt a { font:10px Helvetica, Helvetica Neue, Arial; color:#333; text-decoration:none; }
.copyrighttxt a:hover { font:10px Helvetica, Helvetica Neue, Arial; color:#999; text-decoration:none; }
.copyrighttxt a:visited { font:10px Helvetica, Helvetica Neue, Arial; color:#333; text-decoration:none; }
/* ===== Graphics ================================================================= */
#logo { width:64px; height:162px; position:absolute; margin-left:-700px; border:0px; }
#logo2 { width:64px; height:162px; position:absolute; margin-left:10px; border:0px; }
#pim { width:39px; height:39px; margin-top:-5px; padding-right:10px; padding-bottom:25px; border:0px; }
#welcomeheader { position:absolute; width:80px; height:29px; margin-top:-700px; margin-left:-440px; padding-bottom:7px; border:0px; }
#servicesheader { width:81px; height:32px; margin-top:0px; margin-left:0px; padding-bottom:7px; border:0px; }
#praiseheader { position:absolute; width:81px; height:32px; margin-top:-380px; margin-left:-10px; padding-bottom:7px; border:0px; }
#galleryheader { width:300px; height:49px; margin-top:0px; margin-left:0px; padding-bottom:7px; border:0px; }
#contactheader { width:83px; height:34px; margin-top:0px; margin-left:0px; padding-bottom:7px; border:0px; }
#newsheader { width:88px; height:28px; margin-left:80px; padding-bottom:7px; border:0px; }
#introheader { width:110px; height:29px; margin-left:58px; padding-top:7px; padding-bottom:7px; border:0px; }
#hrule { width:969px; height:68px; margin-left:-20px; border:0px; }
#socialicons { float:left; width:300px; height:44px; margin-top:30px; margin-left:35px;}
#pagepics { margin-top:-380px; margin-left:-50px; border:0px;}
#praisepic { position:relative; margin-top:-380px; margin-left:-50px; z-index:0; border:0px;}
#gallery { width:947px; height:1250px; margin-top:0px; margin-left:-7px; border:0px;}
#visionboard { width:258px; height:176px; margin-top:30px; margin-left:-20px; border:0px; }
#posterthumb { width:265px; height:122px; position:absolute; margin-top:-50px; margin-left:430px; border:0px; }
/* ===== Layout =================================================================== */
#menu { margin-top:33px; margin-left:170px; }
#main { margin-top:470px; padding-left:30px; }
article { float:left; width:50%; }
aside { float:right; width:50%; }
#sliderbox { position:relative; float:left; margin-top:35px; margin-left:240px; z-index:0; }
#welcomebox { position:relative; width:225px; height:650px; margin-top:-650px; margin-left:-510px; padding-left:5px; padding-right:15px; overflow-x:hidden; overflow-y:scroll; z-index:100; }
#twitbox { width:225px; min-height:500px; margin-top:-692px; margin-left:690px; padding-left:5px; padding-right:15px; }
#servicesbox { width:450px; height:650px; margin-top:-380px; margin-left:-20px; padding-left:5px; padding-right:15px;}
#praisebox { position:relative; width:470px; height:700px; margin-top:-330px; margin-left:-20px; padding-left:5px; padding-right:0px; overflow-x:hidden; overflow-y:scroll; z-index:100; }
#copyright2 {margin-top:575px;}
/* ===== Forms ================================================================= */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; *margin-left: -7px; padding: 0; }
label { cursor: pointer; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* ===== Tables ================================================================= */
table { border-collapse: collapse; border-spacing: 0; }
/* ===== ================================================================= */
/* =============================================================================
Non-semantic helper classes
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide for both screenreaders and browsers:
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Reusable classes ============================================================ */
/* Left & Right alignment */
.left { float: left; }
.right { float: right; }
/* The inside class provides consistent padding. To be used often! */
.inside { padding: 20px; }
/* The fraction classes are useful for column lists */
.half, .third, .quarter, .fifth, .sixth{ width: 100%; }
.half li, .third li, .quarter li, .fifth li, .sixth li{ float: left; }
.half li { padding-right: 5%; width: 45% }
.third li { padding-right: 5%; width: 28.3% }
.quarter li { padding-right: 5%; width: 20% }
.fifth li { padding-right: 5%; width: 15% }
/* =============================================================================
Print styles.
Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
/** FORM **/
.TTWForm{
width: 450px;
}
font-size: 75%;
color: #222;
background: #fff;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.TTWForm-container h2 {
font-size: 2em;
margin-bottom: 0.75em;
color: #333333;
font-weight: normal;
}
/** Field Styles **/
.TTWForm .field, #form-title.field {
padding-bottom: 12px;
padding-top: 12px;
position: relative;
clear: both;
}
/** Field Widths */
.f_25 {
width: 21%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_50 {
width: 46%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_75 {
width: 71%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_100 {
width: 96%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.TTWForm input, .TTWForm textarea, .TTWForm select, div.selector, div.uploader {
width:100%;
font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
padding: 6px 0;
color: #999999;
border: 1px solid #d9d9d9;
outline: none;
display: inline-block;
position: relative;
z-index: 2;
box-shadow: 0 0 10px #eee inset;
-moz-box-shadow: 0 0 10px #eee inset;
-webkit-box-shadow: 0 0 10px #eee inset;
-ms-box-shadow: 0 0 10px #eee inset;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
}
.TTWForm input[type=radio], .TTWForm input[type=checkbox] {
width: 12px;
margin: 8px 12px;
top: 3px;
position: relative;
}
.TTWForm .option{
margin:6px 0;
}
.TTWForm select {
padding: 6px 6px;
}
.TTWForm textarea {
overflow: hidden;
}
.TTWForm label {
color: #666;
text-align: left;
font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
}
.TTWForm .submit input {
text-align: center;
font-size: 14px;
text-decoration: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
text-shadow: 1px 1px 0px #fff;
display: block;
margin: 12px -2px 12px 0;
text-align: center;
float: right;
padding: 6px 12px;
height: 36px;
cursor: pointer;
min-width: 96px;
width:auto;
background: #FBFBFB; /* old browsers */
background: -moz-linear-gradient(top, #FBFBFB 0%, #EEEEEE 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBFBFB), color-stop(99%, #EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FBFBFB', endColorstr = '#EEEEEE', GradientType = 0); /* ie */
border: 1px solid #cfcfcf;
font-weight: bold;
color: #666;
}
#form-title {
padding: 12px;
}
#form-title h2{
margin-bottom:0;
}
/**Error Messages **/
.TTWForm .error {
height: 16px;
font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
color: #ff0033;
padding-left: 12px;
z-index: 999;
position:relative;
top:-1px;
}
/** Loading Indicator **/
.loading-text{
position:relative;
top:-3px;
}
/** Clearfix */
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
zoom: 1;
}