/*
Theme Name: CKC-theme
Theme URI: http://ckellycreative.com/
Description: Made for business and portfolio site.
Version: 1.0
Author: Chris Kelly
Author URI: http://ckellycreative.com/
*/



/********** Structure **********/

* {
margin:0;
padding:0;
}

body {
background: #ffffff;
}


#wrap-header {
height:78px;
width:960px;
margin:0 auto;
position:relative;
}


#wrap-nav {
background: #8a8b8e url(images/back-nav.gif) repeat-x;
width:100%;
height:21px;
border-bottom:2px solid #ffffff;
}

#wrap-banner {
background: #000000;
width:100%;
}

#banner {
width:960px;
margin:0 auto;
}

.wrap-content {
width:100%;
}

.wrap-content.divider{
background: #ffffff url(images/back-divider.gif) repeat-x;
}

.content {
width:960px;
margin:0 auto;
padding:24px 0;
}

.column {
width:210px;
margin-right:40px;
}

.column.double {
width:460px;
}

.column.triple {
width:710px;
}

.column.last {
margin-right:0px;
}



#footer {
width:960px;
margin:0 auto;
clear:both;
}


.clear{
clear:both;
height:0;
font-size:0;
}

img {
border:none;
}

.alignLeft{
float:left;
display:inline;
}

.alignRight{
float:right;
display:inline;
}

.backWhite{
background-color:#ffffff;

}



/********** Text Styles **********/


body {
font-family: "Lucida Grande", "Trebuchet MS", "Helvetica Neue", Helvetical, Arial, san-serif;     
font-size:68%;
color: #4d4d4d;
}

a { 
color:#0092b3;
text-decoration:none;
outline:none;
}

a:hover { 
text-decoration:underline;
}


p {
line-height:150%;
margin-bottom:1em;
}

h1 {
font-size:;
font-weight:;
margin-bottom:1em;
color:;
}

h2 {
font-size:;
font-weight:;
color:;
}

h3 {
font-size:;
font-weight:;
margin-bottom:;
color:;
}

h3.boxhead {
font-size:1.2em;
margin-bottom:2em;
padding:2px 6px;
color:#ffffff;
background: #8a8b8e url(images/back-nav.gif) repeat-x;
}


h4 {
font-size:;
font-weight:;
margin-bottom:;
color:;
}

h5 {
font-size:;
font-weight:;
margin-bottom:;
color:;
}


hr {
margin: 12px 0;
border:none;
}

ul {
list-style-type: none;
}

ol {
list-style-type: none;
}

li {
line-height:140%;
}


/********** Header **********/


#logo {
position:absolute;
left:0;
top:10px;
}

#headlinks {
position:absolute;
right:0;
top:12px;
text-align:right;
}

#headlinks a{
margin-left:1em;
}


/********** Navigation **********/


#navcontainer {
width: 960px;
height: 21px;
position: relative;
margin:0 auto;
}


.nav {
height: 21px;
background: url(images/nav.gif) no-repeat;
position: relative;
}
.nav li  {
height: 21px;
float:left;
}

.nav li a:link, .nav li a:visited {
display:block;
height: 21px;
text-indent: -9000px;
overflow: hidden;
}

.nav .navBrand a:link, .nav .navBrand a:visited {
background: url(images/nav.gif) no-repeat 0 0 ;
width: 68px;
}
.nav .navBrand a:hover, .nav .navBrand a:focus {
background: url(images/nav.gif) no-repeat 0 -21px ;
}


.nav .navIdentity a:link, .nav .navIdentity a:visited {
background: url(images/nav.gif) no-repeat -68px 0 ;
width: 81px;
}
.nav .navIdentity a:hover, .nav .navIdentity a:focus {
background: url(images/nav.gif) no-repeat -68px -21px ;
}


.nav .navDesign a:link, .nav .navDesign a:visited {
background: url(images/nav.gif) no-repeat -149px 0px ;
width: 78px;
}
.nav .navDesign a:hover, .nav .navDesign a:focus {
background: url(images/nav.gif) no-repeat -149px -21px ;
}


.nav .navDevelopment a:link, .nav .navDevelopment a:visited {
background: url(images/nav.gif) no-repeat -227px 0 ;
width: 121px;
}
.nav .navDevelopment a:hover, .nav .navDevelopment a:focus {
background: url(images/nav.gif) no-repeat -227px -21px ;
}


.nav .navOurWork a:link, .nav .navOurWork a:visited {
background: url(images/nav.gif) no-repeat -348px 0 ;
width: 94px;
}
.nav .navOurWork a:hover, .nav .navOurWork a:focus {
background: url(images/nav.gif) no-repeat -348px -21px ;
}

div#clientbrowse{
position:absolute;
right:0;
top:1px;
}

div#clientbrowse a{
display:block;
background: #ccc url(images/arrow-8px-dn-grey.png) no-repeat 99% center;
border:1px solid #fff;
height:17px;
line-height:17px;
padding:0 16px 0 4px;
color: #4d4d4d;
}

div#clientbrowse a:hover{
background: #fff url(images/arrow-8px-dn-grey.png) no-repeat 99% center;
text-decoration:none;
}

div#clientbrowse a.active{
background: #fff url(images/arrow-8px-up-grey.png) no-repeat 99% center;
}

#clientdropdown{
display:none;
}

#clientdropdown p{
font-size:14px;
line-height:200%;
}


/********** Footer Styles **********/

#footer {
color:#b2b2b2;
font-size:11px;
padding:10px 0 20px 0;
text-align:center;
margin-top:24px;
}



/********** Single Template Styles **********/

.navigation.single{
margin-top:30px;
}






/********** Tag Template Styles **********/

span.headKeyword{
text-transform:uppercase;
font-size:13px;

}






/********** Icons  **********/

a.icon{
display:block;
height:60px;
width:60px;
background: url(images/icons-60px.png) no-repeat 0 0;
text-indent:-9999px;
}

a.icon.wordpress{
background-position: 0 -60px;
}



/********** Buttons  **********/

a.btn{
display:block;
text-indent:-9999px;
height:27px;
}

a:hover.btn{
background-position: 0 -27px;
}


a.btn.more{
width:74px;
background:   url(images/btn-more.png) no-repeat 0 0;
}

a.btn.estimate{
width:148px;
background:   url(images/btn-getAnEstimate.png) no-repeat 0 0;
}

a:hover.btn.more, 
a:hover.btn.estimate{
background-position: 0 -27px;
}





/********** Banner Styles **********/

.bannerWhite{
border-bottom:1px solid #ccc;
}






/********** Case Study Containers  **********/

.column.triple.casestudies{
width:750px;
margin-right:0px;
}

.casestudies h2{
margin-bottom:12px;
}

.casestudyContainer{
float:left;
display:inline;
width:209px;
height:140px;
border-right:1px solid #cccccc;
margin-right:40px;
margin-bottom:30px;
}

.casestudyThumb{
float:left;
width:120px;
height:93px;
}

.casestudyThumb img{
width:120px;
height:93px;
}

.casestudyMore{
float:right;
width:89px;
height:93px;
}

.casestudyMore a{
width:27px;
height:27px;
display:block;
background:   url(images/btn-add.png) no-repeat 0 0;
text-indent:-9999px;
margin:24px auto 0 auto;
}

.casestudyMore a:hover{
background-position: 0 -27px;
}

.casestudyDescription{
clear:both;
padding-top:6px;
padding-right:12px;
}

.casestudyDescription h3{
font-size:1.1em;
font-weight:normal;
margin-bottom:3px;
}

.casestudyDescription p{
margin-bottom:3px;
}







/********** Sidebar Styles  **********/

.sidebar .services{
margin-bottom:18px;
}

.sidebar .services a.icon{
float:left;
}

.sidebar .services .servicesText{
float:right;
width:136px;
}


.fourColumnList{

}

.fourColumnList h2 {
font-size:16px;
font-weight:normal;
margin-bottom:.5em;
}


.fourColumnList h2 a:hover{
color: #4d4d4d;
text-decoration:none;
}


.fourColumnList ul{
margin-bottom:1em;
}

.fourColumnList ul li{
margin-bottom:4px;
}










/************************* Page Specific Styles *************************/


.post{
margin-bottom:24px;
padding-bottom:24px;
border-bottom:1px solid #ccc;
position:relative;
}




/********** Home  **********/


#rotator { 
position: relative; 
background: none; 
overflow:hidden;
height: 390px; 
}

#rotator a { 
height: 390px; 
width: 960px; 
display: block; 
position: absolute; 
bottom: 0; 
left: 0; 
background: none; 
}


#pager { 
text-align:center;
height:16px;
margin-top:4px;
}

#pager a { 
background:   url(images/dot-16px-grey.png) no-repeat ;
display:inline-block;
width:16px;
height:16px;
text-decoration: none; 
text-indent:-9999px;
margin: 0 4px;
}

#pager a:hover, #pager a.activeSlide  { 
background:   url(images/dot-16px-blue.png) no-repeat ;
}







/********** Portfolio  **********/


#columnPortfolioL {
width:320px;
float:left;
padding-top:30px;
}



#columnPortfolioR {
width:600px;
float:right;
padding-top:10px;
}



#columnPortfolioL h2{
font-size:22px;
color:#0092b3;
margin-bottom:.2em;
}

#columnPortfolioL h3{
font-size:16px;
margin-top:1.5em;
margin-bottom:.5em;
}

ul.servicesProvided{
font-size:13px;
list-style:outside url('images/bullet-blue-8.gif');
margin-left:16px;
line-height:150%;
}

ul.relatedCaseStudies li{
float:left;
}

ul.relatedCaseStudies li a{
border: 1px solid #b2b2b2;
display:block;
width:85px;
margin-right:4px;
}

ul.relatedCaseStudies li a:hover{
border-color: #e05d00;
}







	/* slider1 */


#wrap-clients {
background: #ebebeb;
border-top:5px solid #b2b2b2;
border-bottom:5px solid #b2b2b2;
height:62px;
text-align:center;
}

#wrap-slider{ 
width:950px;
margin:0 auto;
position:relative;
height:62px;
}

#slider{ 
width:810px;
line-height:62px;
float:left;
margin-left:70px;
}


#slider li{ 
margin-right:18px;
}	

#slider li a{ 
text-transform:uppercase;
text-decoration:none;
font-size:12px;
}	

#slider li a:hover{ 
text-decoration:underline;
}	

#prevBtn, #nextBtn{ 
position:absolute;
top:6px;
}	

#prevBtn{ 
left:0;
}	

#nextBtn{ 
right:0;
}	

#prevBtn a, #nextBtn a{ 
width: 50px;
height: 50px;
cursor: pointer;
outline:none;
display:block;
text-indent: -2000em;
}	

#prevBtn a {
background: url('images/btn_left.png') no-repeat center left; 
}

#nextBtn a{ 
background: url('images/btn_right.png') no-repeat center left; 
}

#prevBtn a:hover , #nextBtn a:hover{ 
background-position: -50px center; 
}

#prevBtn a:active , #nextBtn a:active{ 
background-position: -100px center; 
}



	/* slider2 */

#wrap-slider2 { 
width:580px;
height:480px;
padding:10px;
background: url('images/back-GalleryFrame.png') no-repeat ; 
position:relative;
}	

#slider2 { 
}	

#slider2 li{ 
width:580px;
}	

#slider2 li img{ 
width:580px;
height:480px;
}	

#controls2{
position:absolute;
bottom:10px;
background: url('images/back-transBlue85.png') ; 
width:570px;
padding:5px;
}

#prevBtn2 a, #nextBtn2 a{ 
width: 25px;
height: 25px;
margin-right:10px;
cursor: pointer;
outline:none;
display:block;
float:left;
text-indent: -2000em;
}	

#prevBtn2 a {
background: url('images/btn_left2.png') no-repeat center left; 
}

#nextBtn2 a{ 
background: url('images/btn_right2.png') no-repeat center left; 
}

#prevBtn2 a:hover , #nextBtn2 a:hover{ 
background-position: -25px center; 
}

#prevBtn2 a:active , #nextBtn2 a:active{ 
background-position: -50px center; 
}




/********** Development  **********/


div.post.services{
min-height:100px;
}

div.post.services p img{
position:absolute;
left:0;
top:0;
}

div.post.services p, 
div.post.services h3, 
div.post.services h4{
padding-left:130px;
}




/********** Blog  **********/


.blogentry .post {
background:#eee;
padding:20px;
}

.blogentry .post h2{
font-size:36px;
margin-bottom:12px;
}

.postmeta{
margin-top:12px;
}

.blogsidebar div.post{
margin-bottom:12px;
padding-bottom:12px;
}

.blogsidebar div.post.services{
min-height:50px;
}

.blogsidebar .services img{
width:50px;
height:50px;
}

.blogsidebar div.post.services p, 
.blogsidebar div.post.services h3, 
.blogsidebar div.post.services h4{
padding-left:62px;
}



/********** Get an Estimate  **********/

div.last.estimate {
background:#eee;
padding:20px;
width:420px;
}

div.last.estimate h2{
margin-bottom:12px;
}




/********** Forms  **********/


.formdiv {
margin-bottom:12px;
background:#fff;
padding:8px;
}

.formdiv h4{
margin-bottom:4px;
}

.formdiv h4 span{
font-size:11px;
font-weight:normal;
}

.formtextfield {
margin-bottom:6px;
}

.formtextfield h3{
margin-bottom:3px;
margin-top:12px;
}

.formtextfield label, .formTextfield input{
display:block;
}

.formtextfield label{
margin-bottom:3px;
}

.formtextfield input{
width:412px;
padding:4px;
font-size:16px;
font-weight:bold;
color:#0092B3;
}

.formgroup {
margin-bottom:12px;
}


.formgroup label{
margin-right:12px;
}


.formgroup option {
padding:0 6px;
margin-bottom:4px;
}




.estimate hr{
border:none;
border-top:1px solid #fff;
}

/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #FF6900;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #eee;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF6900;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #CCFFFF;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {
	color: red !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
	/*color: red !important;*/
}

/* These are the classes applied on the messages
 * (required message, minSelections message and maxSelections message)
 * which prevent them from being displayed by default.
 */
.checkboxRequiredMsg, .checkboxMinSelectionsMsg, .checkboxMaxSelectionsMsg{
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and font color for the error text.
 * The state class (e.g. .checkboxRequiredState) is applied on the top-level container for the widget, 
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.checkboxRequiredState .checkboxRequiredMsg,
.checkboxMinSelectionsState .checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState .checkboxMaxSelectionsMsg {
	display: inline;
	color: #FF6900;
}



/********** Terms **********/

.terms ol{
list-style:outside decimal;
margin-left:18px;
}

.terms ol li{
margin-bottom:1em;
}

.terms #textarea-estimate {
width:700px;
padding:4px;
}

.terms #textarea-terms {
width:700px;
height:200px;
padding:4px;
font-size:11px;
}

.formtextfield estimate{
}

div.estimate ul{
list-style:outside;
margin-left:18px;
margin-bottom:1em;
}


.terms .formtextfield input{
font-size:12px;
font-weight:bold;
color:#0092B3;
}

.terms h3{
margin: 1.5em 0 6px 0;
}