/* 2010 Chris Pierre CSS Style Sheet*/

body {
background: url(../images/bg-slice.jpg) repeat-x #000033;
font-family:Arial;
margin:0px;
padding:0px;
}

#wrapper {
width:960px;
height:1480px;
margin:0 auto 0 auto;
}


/* Top*/
#header {
width:960px;
height: 100px;
}

#logo {
width:235px;
height: 98px;
float:left;
background-image: url(../images/cp-logo.png);
}

#navbar {
width: 500px;
height: 20px;
float:right;
margin-top:55px;
display: inline;
}

#navbar img{
padding-right:15px;
}
/*End Of Top*/ 

#about {
width:960px;
height:375px;
font-size: 16px;
color: #cac6c6;
}

#about p {
text-align:justify;
}

#about-left-col {
width: 540px;
float:left;
}

#about-right-col {
width: 420px;
float:right;
}

#about-right-col img {
padding-left:60px;
margin-top:-2px;
}

#about-title {
margin-top:35px;

}

#services-title {
margin-top:35px;


}

#work-title {
margin-top:2px;

}

#contact-title {

float:left;
}

#social-media-title {

float:right;
}




#position-title {
margin-top:42px;
}
#get-close-btn {
 margin-top:-5px; 
}
/*CSS For Chrome / Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
#get-close-btn {margin-top: -12px;}
#back-btn2 {margin-top:20px;}
}
/*End Of CSS For Chrome / Safari */

#services {
width:960px;
height:340px;
}

#content {
cursor:pointer;
padding-top:15px;
font-style:bold;

}

.accordionButton {
color:#0099ff ;
font-size: 18px;
font-weight:bold;
}

.accordionContent {
color:#878787;
font-size: 16px;
padding:5px 0 5px 0 ;
}

#back-btn {
float:right;
}

#back-btn2 {
float:right;
}

#back-btn3 {
margin-bottom:15px;
}
#work {
height:475px;
}

#contact {
height:515px;
color:#fff;
font-size:18px;
}

#footer-col-left {
width: 450px;
float:left;

}

.tweetList {
list-style-type:none;
}

#footer-col-right {
width: 510px;
float:right;
}

#follow-twitter {
width: 430px;
height: 115px;
}
.follow-twitter {
width: 430px;
height: 115px;
}
#twitter-feed {
height:285px;
background-image:url(../images/speech-bubble.png);
background-repeat:no-repeat;
margin-left:45px;
color:#333333;
font-weight:bold;
padding:10px 0 0 15px;
}

#twitter-feed h2 {
padding:10px 0 0 15px;
}

#twitter_update_list {
list-style-type:none;
}

.tweet-name {
float:right;
margin-top:-20px;
padding-right:20px;

}

.tweet-name a{
color:#333333 ;
text-decoration:none;
}

#footer-text {
width:305px;
height:160px;
float:right;
color:#4094E9;
}

.url-text {
color:#fff;
font-size:12px;
padding-left:35px;
}

.url-text a {
color:#4094E9;
text-decoration:none;
}

.url-text a visited {
color:#4094E9;
}

#twitter {
	width: 500px; margin: 130px auto;
}

	#twitter h1 a {
		display: block; margin: 0 0 15px 0;
		font: 90px Helvetica, Arial, Sans-Serif; color: rgba(255,255,255,0.2);
		text-decoration: none;
	}
		#twitter h1 a:hover { color: rgba(255,255,255,0.3); }

	#twitter ul {
		list-style: none; padding: 0 0 0 140px;
		background: url(bird.png) 0 0 no-repeat;
	}
		#twitter ul li {
			padding: 20px;
			background: rgba(255,255,255,0.1);
			border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
		}
			#twitter ul li a {
				font: italic 14px/30px Georgia, Times, Serif;
				color: #555b6e;
			}
				#twitter ul li a:hover { color: #1b2f6f; }

		#twitter ul li span {
			font: 22px/30px Helvetica, Arial, Sans-Serif; color: #fff;
		}
			#twitter ul li span a {
				font: 22px/30px Helvetica, Arial, Sans-Serif;
			}

			
			
			
			.phone {
			padding-left:55px;
			}
			
			.email {
			padding-left:75px;
			}
			
			.skype {
			padding-left:185px;
			}
			
			
			.icons {padding-left:45px}
			
/* Sliding Doors Jquery */

.image-slide {
	
	/* the image size is 126x126, it's adjusted to fit the border as well*/
	width:290px;
	height:290px;

	/* important, allow the children object to move inside its parent obj */
	position:relative;	

	/* important, it hides the moved image */
	overflow:hidden;
	
	/* with the clear class, make it into 3 x 3 layout */
	float:left;
	
	/* IE float bug fix */
	display:inline;
	
	/* styling */
	margin-top:25px;
	font-size:12px;
	
	
}



.image-slide img {
	display:block;
	width:270px;
	height:270px;
	
	/* styling */
	text-decoration:none;
	border:10px solid #ccc;
	background:#ddd;

	/* important, it allows this obj to move by jquery */
	position:absolute;
	
	/* make sure it appears above the caption */
	z-index:500;
	
	cursor:pointer; cursor:hand;
}


.image-slide .caption {
	/* should be the same size with the image */
	width:270px;
	height:270px;
	
	/* styling */
	background:#333;
	border:10px solid #ccc;
	color:#eee;
	
	/* set the position to 0, 0 and appear under the image */
	position:absolute;
	top:0; left:0;
	z-index:0;
}


/* extra styling*/

.image-slide .caption a.header {
	margin:10px 5px 5px 5px;
	display:block;
	font-size:14px;	
	font-weight:700;
	color:#4ed7f4;
}

.image-slide .caption p {
	margin:5px;	
}

.clear {clear:both}



.image-slide2 {
	
	/* the image size is 126x126, it's adjusted to fit the border as well*/
	width:290px;
	height:290px;

	/* important, allow the children object to move inside its parent obj */
	position:relative;	

	/* important, it hides the moved image */
	overflow:hidden;
	
	/* with the clear class, make it into 3 x 3 layout */
	float:left;
	
	/* IE float bug fix */
	display:inline;
	
	/* styling */
	margin-top:25px;
	font-size:12px;
	
	margin-left:45px;
}

.image-slide2 img {
	display:block;
	width:270px;
	height:270px;
	
	/* styling */
	text-decoration:none;
	border:10px solid #ccc;
	background:#ddd;

	/* important, it allows this obj to move by jquery */
	position:absolute;
	
	/* make sure it appears above the caption */
	z-index:500;
	
	cursor:pointer; cursor:hand;
}


.image-slide2 .caption {
	/* should be the same size with the image */
	width:270px;
	height:270px;
	
	/* styling */
	background:#333;
	border:10px solid #ccc;
	color:#eee;
	
	/* set the position to 0, 0 and appear under the image */
	position:absolute;
	top:0; left:0;
	z-index:0;
}


/* extra styling*/

.image-slide2 .caption a.header {
	margin:10px 5px 5px 5px;
	display:block;
	font-size:14px;	
	font-weight:700;
	color:#4ed7f4;
}

.image-slide2 .caption p {
	margin:5px;	
}

.clear {clear:both}

.image-slide3 {
	
	/* the image size is 126x126, it's adjusted to fit the border as well*/
	width:290px;
	height:290px;

	/* important, allow the children object to move inside its parent obj */
	position:relative;	

	/* important, it hides the moved image */
	overflow:hidden;
	
	/* with the clear class, make it into 3 x 3 layout */
	float:left;
	
	/* IE float bug fix */
	display:inline;
	
	/* styling */
	margin-top:25px;
	font-size:12px;
	margin-left:45px;
}

.image-slide3 img {
	display:block;
	width:270px;
	height:270px;
	
	/* styling */
	text-decoration:none;
	border:10px solid #ccc;
	background:#ddd;

	/* important, it allows this obj to move by jquery */
	position:absolute;
	
	/* make sure it appears above the caption */
	z-index:500;
	
	cursor:pointer; cursor:hand;
}


.image-slide3 .caption {
	/* should be the same size with the image */
	width:270px;
	height:270px;
	
	/* styling */
	background:#333;
	border:10px solid #ccc;
	color:#eee;
	
	/* set the position to 0, 0 and appear under the image */
	position:absolute;
	top:0; left:0;
	z-index:0;
}


/* extra styling*/

.image-slide3 .caption a.header {
	margin:10px 5px 5px 5px;
	display:block;
	font-size:14px;	
	font-weight:700;
	color:#4ed7f4;
}

.image-slide3 .caption p {
	margin:5px;	
}

.clear {clear:both}