@charset "UTF-8";
/* CSS Document */

* {margin: 0; padding: 0; font-family:Arial, Helvetica, sans-serif; font-size: 18px; letter-spacing: 3px; color:#FFF;}
.index_bg {background-image:url(images/universal/images/site_index_bg.jpg); background-position:center top; background-repeat:no-repeat; background-attachment:fixed;}
.sub_bg { background-image:url(images/universal/images/body_bg_02.jpg); background-position: center top; background-repeat:no-repeat;}
body { background-color: #04356c;}
a {text-decoration:none; border: none; color:#FFF;}
img {border: none; outline: none;}

.contact_headers {width: 100%; float: left; font-size: 12px; letter-spacing: 1px; text-indent: 0px;}
.contact_input {margin-bottom: 10px; font-color: #000; background: transparent; border: 1px solid #fff; background-image:url(images/universal/images/bg_black.png); font-size: 12px; padding: 5px; width: 300px;}

.blog_image {float:left; margin-right: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid 2px #FFF;}
.blog_image_large {float:left; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid 2px #FFF; margin-bottom: 20px;}

.retweet_btn {display: block; z-index:100; position: relative; float: right; width: 120px; height: 101px; background-image:url(images/client_images/retweet_button.png);}

.inset-text { color: #FFF; text-shadow: 1px 1px 0px #000;}
.body_width {width: 940px; float:left;}
.header_height {height: 72px;}
h1 {font-size: 25px; font-weight:normal;}
h1 i {font-size:25px;}
a:hover h1 {text-decoration: underline;}
h2 a {font-size:14px; color:#add7fe; font-weight:bold; letter-spacing:normal; margin-left: 10px; margin-top: 10px;}
.footer_blog_txt {font-size:10px; color:#FFF; letter-spacing:normal; margin-left: 10px; width: 280px;}
.footer_blog_txt p {letter-spacing: normal;}
.footer_blog_txt a {color:#add7fe; font-size:12px; letter-spacing: normal;}

ul {letter-spacing: 1px;}
li {margin-left: 20px; font-size:12px; color: #add7fe; line-height:23px; letter-spacing:1px; position: relative;}
li strong {font-size: 12px; color: #add7fe; letter-spacing: normal;}
p {text-indent: 20px; line-height: 16px; font-size:12px;}
#nav_categories, .nav_categories {float:left;}

#main_wrapper {
	width: 940px;
	margin: 0 auto;
	padding: 0 10px;

}
#header_wrapper {
	margin-bottom: 16px;
}
#header_left {
	width: 250px;
	float:left;
	float:left;
	background-image:url(images/universal/ericrier_header_logo.png);
}
#header_right {
	height: 18px;
	width: 675px;
	float: right;
	margin-top: 54px;
	text-align:right;
}

#header_right a { padding: 0 20px; float: right;}

.sub_head_height {height: 310px;}
.bg_black {background-image:url(images/universal/images/bg_black.png);}
#left_recent_work_wrapper {
	width: 300px;
	float:left;
	margin-right: 20px;
}
#left_categories_wrapper {
	width: 300px;
	float:left;
	margin-right: 20px;
	padding-bottom: 20px;
}
#left_categories_wrapper ul {margin-left: 20px;}
#left_categories_wrapper ul li a {font-size: 12px; letter-spacing: normal;}
#left_categories_wrapper ul li a:hover {color: #add7fe; text-decoration: underline;}

#left_recent_work_wrapper a img {
	padding: 4px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #FFF;
	margin: 0 10px;
	margin-top: 15px;
}
#left_recent_work_wrapper a:hover img {
	border: 1px solid #2acc46;
}
#left_recent_work_title {
	height: 47px;
	width: 290px;
	float:left;
	background-image:url(images/universal/images/left_header_01.png);
	padding-top: 8px;
	padding-left: 10px;
}
#index_right_wrapper {
	width: 620px;
	float:left;
}
#index_right_header {
	height: 47px;
	width: 610px;
	float:left;
	padding-left: 10px;
	background-image:url(images/universal/images/index_right_header.png);
	padding-top: 8px;
	padding-left: 10px;
}
#blog_right_header {
	height: 40px;
	width: 610px;
	float:left;
	padding-left: 10px;
	background-image:url(images/universal/images/index_right_header.png);
	padding-top: 11px;
	padding-left: 10px;
	font-size:14px;
}
#index_right_welcome_txt {
	width: 600px;
	margin-left: 20px;
	height: 105px;
	float:left;
}
#blog_right_welcome_txt {
	width: 610px;
	margin-left: 10px;
	margin-bottom: 10px;
	float:left;
}
#blog_right_blog_txt {width: 580px; padding:20px; float:left; margin-bottom: 20px;}
#paginate_txt {width: 580px; padding:10px 20px; float:left; margin-bottom: 20px; font-size: 12px;}
.next_page {float:right; padding: 0 20px; font-size: 12px; display: block; height: 24px; padding-top: 8px;}
.prev_page {float:left; padding: 0 20px; font-size: 12px; display: block; height: 24px; padding-top: 8px;}
.paginate_number_wrapper {float: right;}
.paginate_number_wrapper strong { padding: 3px 0px; width: 40px; text-align: center; font-size: 12px;; float:left; margin: 0 2px;}
.paginate_number_wrapper a {color:#add7fe; border: 1px solid #FFF; padding: 2px 12px; font-size: 12px;; float:left; color:#add7fe;  margin: 0 2px;}
.paginate_number_wrapper a:hover { background-color: #000;}
#client_right_desc_title {width: 600px; padding:10px; float:left;}
#client_right_summary_headers {width: 600px; padding:4px 10px 0px 10px; float:left; font-size: 12px; letter-spacing:1px;}
#client_right_summary_headers a { color:#add7fe; text-decoration : underline; font-size: 12px; letter-spacing:1px;}
.blog_txt {font-size:14px; letter-spacing:normal; line-height: 18px; text-indent: 20px;}
.blog_txt a {font-size: 14px; letter-spacing: 1px; text-decoration: underline; color:#add7fe;}
.blog_txt p {text-indent: 20px; letter-spacing: 1px;  margin-bottom: 5px;}
.blog_txt u {text-align: center; font-size: 10px; margin-bottom: 3px; letter-spacing: 1px;}
.dropcap:first-letter{
color:white;
font-size:300%;
font-weight: bold;
margin-right: 2px;
text-shadow: 1px 1px 0px #000;
}
.blog_txt p .dropcap {color:white; font-size:300%; font-weight: bold; margin-right: 2px; text-shadow: 1px 1px 0px #000;}
.blog_txt p a {font-size: 12px; letter-spacing: 1px; text-decoration: underline; color:#add7fe;}
.blog_txt strong { position: relative; width: 580px; font-size: 24px;}
.blog_txt strong.normalize {font-size: 14px;}
.client_summary_txt {float: left; padding: 0 10px; font-size:12px; letter-spacing:1px; line-height: 18px; margin-top: 10px; text-indent: 20px;}
.client_summary_txt strong, .client_summary_txt a {font-size: 12px;}
.client_summary_txt a {color:#add7fe; letter-spacing: 1px;}
.index_right_list_btn_height {height: 150px;}
#index_right_expl_btn {
	font-size:12px;
	width: 620px;
	float:left;
}
.sub_footer_height {height: 300px; float:left;}
.footer_section_width {width: 300px;}
.sub_footer_title {
	height: 18px;
	padding-top: 10px;
	padding-left: 10px;

}


/*JUITTER PLUGIN CSS*/

#juitterContainer{ font-size:10px;} /*Juitter container*/

#juitterContainer .twittList{margin:0;padding:0; width: 280px; height: 232px; margin-left: 10px; margin-top: 10px;} /* UL that will contain the list of tweets */

/* Bellow the list of tweets "<li>" */

#juitterContainer .twittLI{list-style:none;margin:0;padding:5px 0 0 0;border-bottom:dotted 1px #CAF8C9;padding:3px;clear:both; font-size:12px; line-height:normal; color: #FFF; letter-spacing:normal;} 
#juitterContainer .twittList SPAN.time{color:#777;font-size:12px;}
#juitterContainer .twittList A{color:#add7fe; font-size:12px; letter-spacing:normal;} /*Links inside the tweets list */

/* Bellow the CSS for the avatar image  */

#juitterContainer .juitterAvatar{float:left; display: none;}

#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/

#juitterContainer .extLink{} /*CSS for the external links*/

#juitterContainer .hashLink{} /*CSS for the hash links*/

/*end of Juitter CSS*/


/*pikachoose slideshow styles*/
.pikachoose{width:380px;}
/* This is the ul you have all your images in */
.pikachoose ul{padding-left:0;width:380px;height:20px;margin:0; margin-top: 5px; overflow:hidden; position: relative;}
.pikachoose ul li{float: left;background:#777; margin: 0 0 0 4px; position:relative;overflow:hidden; z-index:150; float: right;}
.pikachoose ul li div img{position:relative;cursor:pointer;}

/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main{width:380px;height:250px;display:block;position:relative;}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{position:absolute;top:0px;left:0px;}
.pika_back_img{position:relative;top:0px;}

.pika_subdiv img, .pika_subdiv a img{border:none;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:1px;width:1px;background:url('rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:1px;width:1px;background:url('fastf.png') top right no-repeat;}



/*clients page styles*/
#clients_skills_used_wrap {
	width: 210px;
	height: 275px;
	float:left;
	margin-right: 20px;
	margin-bottom: 20px;
}
#clients_skills_used_wrap ul {margin-left: 10px;}
#clients_skills_used_wrap ul li {letter-spacing: normal;}

#clients_gallery_wrapper {
	width: 380px;
	height: 275px;
	float:left;
	margin-bottom: 20px;
}
#clients_skills_used_title_txt {
	width: 210px;
	height: 20px;
	margin-left: 10px;
	float:left;
	margin-top: 10px;
	font-size:14px;
	letter-spacing:normal;
	color: #FFF;
}

/*client main slideshow thumbs styles - jquery integration*/

			a h4{ color:#C8DCE5; font-size: 8px; padding-top: 45px; color:#FFF; height: 75px; width: 140px; font:10pt Arial, sans-serif; letter-spacing:normal; text-align:center;  }
			
			.boxgrid{ 
				width: 136px; 
				height: 120px; 
				margin: 0 15px 15px 0px; 
				float:left; 
				background:#161613; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
				border: solid 2px #FFF; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute;
				top: 120px;
				background: #000; 
				height: 120px; 
				width: 136px; 
				opacity: .9; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					left: 0;
 				}
 				.caption .boxcaption {
 					left: 0;
 				}


/* about page */

#about_eric_image {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	height: 150px;
	width: 150px;
	border: solid 2px #FFF;
	float:left;
	margin-right: 10px;
	background-image:url(images/about/e_01_site.jpg);
}



/*footer icons styles*/
#twitter a, #linkedin a, #facebook a, #flickr a {display: block; height: 38px; width: 38px; float:left; margin: 6px 3px; background-image:url(images/universal/images/footer_sn_icons.png);}

#twitter a {background-position: 0 0;}
#twitter a:hover {background-position: 0 -38px;}
#linkedin a {background-position: -38px 0;}
#linkedin a:hover {background-position: -38px -38px;}
#facebook a {background-position: -76px 0;}
#facebook a:hover {background-position: -76px -38px;}
#flickr a {background-position: -114px 0;}
#flickr a:hover {background-position: -114px -38px;}

#footer_nav {
	height: 33px;
	padding-top: 17px;
}
#footer_nav a { text-decoration: none; color: #FFF; font-size: 10px;}
#footer_nav a:hover { text-decoration: underline; color: #add7fe;}

.footer_nav_and_copyright {
	width: 500px;
	float: right;
	font-size: 10px;
	text-align:right;
	margin-right: 10px;
.footer_nav_and_copyright a {font-size: 10px; color: #afafaf; }
}.footer_height {
	height: 50px;
	margin-top: 20px;
	margin-bottom: 20px;
}