/*
=========================================

Project Name: Stellasoft
Creation date: 22 November 2011
Last modified: 25 Jan 2012
Description: 
Version: 1.0
Author: Matt Tymus | matt@stellasoft.co.uk
Company: Stellasoft
Company URI: http: //www.stellasoft.co.uk

===========[TABLE OF CONTENTS]===========

1. BASE
-1.1. CSS Reset [RES]
-1.2. Global Settings [GLO]
-1.3. Common Formatting [COM]
-1.4. Links [LIN]
-1.5. Forms [FOR]
-1.6. Tables [TAB]
-1.7. Global Classes [GLC]
-----
2. CONTENT
-2.1. Header [HEA]
-2.2. Nav [NAV]
-2.3. Content [CON]
-2.4. Footer [FOO]
-2.5. Classes [CLA]
-2.6. Media Queries [MDQ]

=========================================
*/


/* =[RES]= CSS Reset - derivative of YUI Reset CSS - http://developer.yahoo.com/yui/reset/#code ===== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, 
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{margin: 0; padding: 0; border: 0; border: none; line-height: 1; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
h1, h2, h3, h4, h5, h6, p{font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal;line-height: 1.1em;}
.clear { clear:both;}
img, embed, object, video {max-width: 100%;}

/* =[GLO]= Global Settings ===== */
html { font-size: 100%; height: 100%; overflow-y: scroll;}
body {text-align:center; margin: 0 auto; background: scroll #F4F3F7 url(../images/main_bg.png) repeat-x center top;}
hr {display: block; height: 0; line-height: 0; border: 0; border-top: 1px solid; border-bottom: 1px solid; margin: 0; float: none; clear: both; padding: 0; border-image: initial; border-top-color: #E1E1E1; border-bottom-color: white;}
/* =[TXT] Text Formatting ===== */
p {font-size: .9em; margin: 0 5% 30px 0; line-height: 1.4em;  color: #333; text-align:left; }

/* =[LIN]= Links ===== */
a {color: #f05125; text-decoration: none; font-weight: bold; }
a:hover {color: #666;}


/* =================================
2. CONTENT STYLES
==================================== */

/* =[HEA]= Header ===== */
header { height: 370px; padding-top: 55px; position:relative; width:100%;}
header #logo {width:205px; height:153px; text-indent:-99999px; background: url(../images/stellasoft.png) no-repeat; margin: 0 auto;}

header #email {width:207px; height:22px; position:absolute; top:30px; right: 0; text-indent:-99999px; background: url(../images/email_header.png) no-repeat;}
#strap { display:block; height:120px;}
header h2 {color:#c0c0c0; line-height:50px; padding:0; font-size:1.8em;}
header h1 {font-style:italic; color:#c0c0c0; line-height:50px; font-size:1.4em; }
header h3 {font-style:italic; color:#c0c0c0; line-height:50px; font-size:1.4em; }

/* =[NAV]= Nav ===== */
nav ul li, ul.latest-work li {display:inline-block;	width:95%;}
nav ul li a {padding:8px 20px; background:#010101; border:solid 3px #222222; margin:0 7px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display:block; margin-bottom:10px; font-size: 1.3em; color: #c0c0c0; -webkit-transition-duration:0.6s; -webkit-transition-timing-function:linear; -moz-transition-duration:0.6s; -moz-transition-timing-function:linear  transition-duration:0.6s; transition-timing-function:linear; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
nav ul li a:hover {background-color: #222; color: #666;border:solid 3px #666;}

/* =[CON]= Content ===== */
#content {margin: 0 auto; width: 90%;}
#content h4 {color: #333; text-align:left; font-size:1.4em; text-transform: uppercase; padding: 30px 0 20px 0;text-shadow: 1px 1px 2px #999;}
#content h4 a {color: #333; text-shadow: none;}
.serviceIteam {width: 14%; float:left; margin-bottom:30px;}
.serviceIteam img { margin-bottom:15px;}
.serviceIteam h5 {color: #333; text-align: center; margin: 0!important; text-transform: uppercase;}
#work a img{ float:left; margin:0 3% 3% 0;box-shadow: 1px 1px 2px #999; -webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;}
#work a img:hover{-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);}

.x4,.x8 { float:left; min-width:250px; text-align:left;}
.x4 { width:33.33333333333%;}
.x8 { width:66.66666666666%;}
.x4 img { margin-right:5px; width:33px!important;}


.short { width:30%; min-width:200px; float:left; margin-right:3%;}
/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {width: 100%; padding:10px 0 0 20px; }
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {position: relative; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}
#container {width: 100%; max-width: 1000px; margin: 0 auto; position:relative;}
#container h3 {color:#333; line-height:50px; font-size:1.2em; text-align:left;}
/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}

/* Direction Nav */
.flex-direction-nav li a { width: 28px; height: 57px; margin: -40px 0 0 0; display: block; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; background: url(../images/bg_direction_nav.png) no-repeat 0 0;}
.flex-direction-nav li .next {background-position: -28px 0; right: -40px;}
.flex-direction-nav li .prev {left: -50px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

.item img{-webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; border: solid 10px #F4F3F7;}
.item img:hover{-webkit-box-shadow: 0px 0px 5px 2px #999; -moz-box-shadow: 0px 0px 5px 2px #999; box-shadow: 0px 0px 5px 2px #999; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); border: solid 10px #F4F3F7}

#credit {margin:0 auto; width:100%; border-top:solid 1px #333;}
#credit p {color:#FFF; line-height:40px;margin:0 !important; font-size: .8em;}
#credit .stella{ display:block; float:right;}

footer {min-height: 450px; width: 100%; margin: 0 auto; background: url(../images/footer_bg.jpg) #000;}
#footerContent { padding-top:30px; width: 90%;margin: 0 auto;}
#footerInfo { float:left}
#footerForm {float:right;}
#footerInfo p {font-size: .9em; margin: 0 0 25px 0; line-height: 1.2em; color: #fff; text-align:left;}

#footerForm { margin-bottom:30px; }
#footerForm label {display: block;}
#footerForm input {-moz-box-sizing: border-box;	font-size: 1em; padding: 0 0 0 5px; margin: 0 0 10px 0; width: 100%; background-color:#333; border:1px solid #999; color: #FFFFFF; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; height:35px;}
#footerForm textarea {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important; -moz-box-sizing: border-box; font-size: 1em; padding: 5px; margin: 0 0 10px 0; width: 60%; height:120px; float:left; background-color:#333; border:1px solid #999; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; color: #FFFFFF;}

#footerForm input[type="submit"] {-webkit-appearance: none; padding:0 !important; margin:0 !important; background:#010101; border:solid 5px #333; border-radius: 10px; -webkit-border-radius: 10px !important; -moz-border-radius: 10px; color: #c0c0c0; cursor: pointer; float:right !important; letter-spacing: 0.15em; height:130px; font-size:1.2em; text-transform: uppercase; width: 35%; -webkit-transition-duration:0.6s; -webkit-transition-timing-function:linear; -moz-transition-duration:0.6s; -moz-transition-timing-function:linear  transition-duration:0.6s; transition-timing-function:linear;}
#footerForm input[type="submit"]:hover {background-color: #000; color: #FFF; border:solid 5px #222;}
#footerForm h5 {color: #fff; text-align:left; font-size:1em; text-transform: uppercase; padding: 0 0 10px 0;text-shadow: 1px 1px 2px #000;}

/* =[MDQ]= Media Queries ===== */
 @media only screen and (min-width: 480px) {
body {background-image:url(../images/main_bg.png);}
nav ul li {width:auto;}
#footerInfo, #footerForm {width:100% !important;}
}

 @media only screen and (max-width: 500px) {
nav ul li {width:40%;}
#work img {width:100%;}
#strap { display:none;}
#footerInfo, #footerForm {width:100% !important;}
}

 @media only screen and (min-width: 640px) {
nav ul li {width:auto;}
#work img {width:45%;}
.serviceIteam {width: 50% !important;}
.serviceIteam h5 {line-height:40px;font-size:1em!important; margin: 0 0 0 120px!important;}
.serviceIteam img { float:left !important; max-width:75px !important; width:75px !important; min-width:75px !important; height:75px !important;}
}

 @media only screen and (max-width: 650px) {
nav ul li {width:40%;}
#strap { display:none;}
.serviceIteam {width: 100% !important; text-align:left !important;}
.serviceIteam h5 {text-align: left !important;line-height:50px;font-size:1em!important; margin: 0 0 0 70px!important;}
.serviceIteam img { float:left !important; max-width:50px !important; width:50px !important; min-width:50px !important; height:50px !important;}
}

 @media only screen and (max-width: 765px) {
body {background: url(../images/mobile_bg.png) no-repeat scroll center top #F4F3F7 !important;}
header h2 {font-size:1.6em !important;}
header h3 {font-size:1.2em !important; }
nav ul li { width:33%;}
.serviceIteam h5 {text-align: left !important;}
}

/*IPHONE LANDSCAPE*/
@media only screen and (min-width: 765px) {
#content, #footerContent {width:85%; margin: 0 auto; max-width: 800px;}
nav ul li { width:auto;}
#work { width:100%;}
#work img {width:30%;}
.serviceIteam {width: 14% !important;}
.serviceIteam h5 {text-align: center !important;line-height:20px;font-size:1em!important; margin: 0!important;}
.serviceIteam img { float:none !important;}
#footerInfo {width:40% !important;}
#footerForm {width:50% !important;}
}

/*DESKTOP*/
@media only screen and (min-width: 1000px) {
body {margin: 0 auto;}
#content, #footerContent {width:90%; margin: 0 auto; max-width: 1000px;}
.serviceIteam {width: 14% !important;}
.serviceIteam h5 {text-align: center !important;line-height:20px;font-size:1em!important; margin: 0!important;}
.serviceIteam img { float:none !important;}
#footerInfo {width:40% !important;}
#footerForm {width:50% !important;}
}

 @media only screen and (min-width: 1200px) {
body {margin: 0 auto;}
.serviceIteam {width: 14% !important;}
.serviceIteam h5 {text-align: center !important;line-height:20px;font-size:1em!important; margin: 0!important;}
.serviceIteam img { float:none !important;}
#footerInfo {width:40% !important;}
#footerForm {width:50% !important;}
}

.x8 .flexslider {margin:20px 0;}
.x8 .flexslider img {-webkit-box-shadow: 0px 0px 5px 3px #d4d4d4; -moz-box-shadow: 0px 0px 5px 3px #d4d4d4; box-shadow: 0px 0px 5px 3px #d4d4d4;}