/* SABRECREATIVE.COM STYLESHEET */

/* MENU:
1. Layout styles.
2. Text styles.
3. Page styles.
*/

/*=====================
1.	LAYOUT STYLES
=====================*/

html,body {
	margin:0;
	padding:0;
	height:100%; /* for container min-height */
}

body {
	background-color:#51a4da;
	background-image:url(../images/bg_bokeh.jpg);
	background-position: top;
	background-repeat:no-repeat;
	font-family: Helvetica, Calibri, Arial, sans-serif;
}


#container {
	position:relative; /*  for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:940px;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	background:#fff;

}

#header {
	margin: 0 auto;
	width: 940px;

}

#content {
	padding: 10px 40px 230px 40px; /* bottom padding for footer */
	background-color: #fff;
	width: 860px;
	margin: 0 auto;
}


a img {
	border: 0;
}


/* ------------- menu styles */
#menu_container {
	background-image:url(../images/bg_menu.jpg);
	background-repeat: no-repeat;
	width: 940px;
	margin: 0 auto;
	background-color: #57a7dc;
	border-bottom: 1px solid #3196d8;
}

#menu {
	width: 610px;
	margin: 0 auto;
}

/* ------------- main content styles */

#content_bg {
	background-image:url(../images/bg_content.jpg);
	background-position:bottom;
	background-repeat:repeat-x;
	height:41px;
	width: 940px;
	margin: 0 auto;
	margin-top: -275px;
}

.clear {
	clear: both;
}
/* ------------- footer styles */

#footer {
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	background-image:url(../images/bg_footer.jpg);
	background-repeat:repeat-x;
	background-color: #081525;
	height:220px;
}

#footer_bg {
	background-image:url(../images/bg_footer.jpg);
	background-repeat:repeat-x;
	width: 100%;
	height: 250px;
	margin-top:-220px;
	background-color: #081525;
}

#footer_container {
	width: 860px;
	margin: 0 auto;
}

#footer_logo {
	padding: 10px 0 10px 0;
	height: 22px;
}

.footer_column {
	width: 205px;
	padding-left:10px;
	float:left;
}


.footer_column p {
	color: #F48459;
}

#footer_bottom {
	clear:both;
	height: 30px;
	border-top: 1px solid #51A4DA;
	color: #51A4DA;
	padding-top: 10px;
}

#footer_bottom_right { 
	float:right;
	height:30px;
	margin-top:-30px;
	margin-right: 40px;

}

#footer_bottom p, #footer_bottom_right p {
	color: #51A4DA;
}

#footer_bottom_mark {
	float:right;
	height:30px;
	margin-top:-35px;
}

a:link, p a:link {
	color: #51A4DA;
	text-decoration: underline;
}


a {
	text-decoration: underline;
}

a:hover, p a:hover {
	color: #2863AE;
	text-decoration: underline;
} 

a:active, p a:active {
	color: #2863AE;
	text-decoration: underline;
	position: relative;
	top: 1px;
} 

a:visited, p a:visited {
	color: #51A4DA;
	text-decoration: none;
}

.social_icons {
	margin-right: 10px;
}

#twitter_div {
	padding: 0;
	height: 140px;
}

#twitter_update_list {
	list-style:none;
	padding: 0 10px 0 0px;
	margin: 0px;
	color: #F48459;
}

#twitter_update_list li {
	margin-bottom: 5px;
}

#twitter_link {
	padding: 10px 0 0 0px;
}

/*=====================
2.	TEXT STYLES
=====================*/

/* ------------- General styles*/
h1 {
	padding: 0 0 5px 0;
	margin: 0 0;
	color: #2863AE;
	font-size: 1.5em;
	text-decoration: none;
	text-align: left;
	font-weight: 100;
}

h2 {
	padding: 5px 0 5px 0;
	margin: 0 0;
	color: #51A4DA;
	font-size: 1.2em;
	font-weight: 100;
	}

h3 {
	padding: 0 0 3px 0;
	margin: 0 0;
	color: #51A4DA;
	font-size: 1em;
	font-weight: lighter;
	}
	
p {
	padding: 0 0 0.7em 0px;
	margin: 0 0;
	color: #505050;
	font-size: 15px;
}

ul {
	margin: 0 0;
}

ul li {
	color: #505050;
}

.title {
	text-align: center;
}
	
.highlight {
	color:#F48459;	
	font-size: 1.1em;
}

.light_blue {
	color: #51A4DA;
}

.dark_blue {
	color: #2863AE;
}

.orange {
	color: #F48459;
}

.bigtext {
	font-size: 1.4em;
}

/*=====================
3.	PAGE STYLES
=====================*/

/* ------------- index.htm styles*/


/* ------------- ourwork.htm styles*/

.ourwork_container {
	height: 750px;
	width: 860px;
}

.ourwork_gallery{
	height: 460px;
	width: 540px;
	float: right;
	border: 1px solid #3196d8;
}

.ourwork_desc {
	height: 400px;
	width: 305px;
	float:left;
	margin:0px 0 10px 0px;
}

.ourwork_testimonial {
	height: 244px;
	width: 305px;
	float: left;
	margin:0px;
	border: 1px solid #3196d8;

}

.ourwork_overview_container {
	width: 845px;
	height: 280px;
	margin: 0 auto 10px;
}

.ourwork_overview_site {
	width: 268px;
	height: 270px;
	margin: 5px 5px;
	padding-top: 5px;
	float: left;
	border: 1px #3196d8 solid;
	text-align: center;
}

.ourwork_overview_thumb {
	height: 210px; 
	margin-top:8px;
}

/* ------------- services.htm styles*/

.packages_showcase {
	height: 180px;
}

.packages_showcase h2 a {
	text-decoration: none;
}

.packages_showcase h2 img {
	margin-left: 10px;
	margin-bottom:-2px;
}

.showcase_p {
	border-top: 1px solid #51A4DA;
	margin: 0 10px 0 0px;
	padding: 10px 0 0 0;
}

.quarter_column {
	width: 205px;
	padding-left:10px;
	float:left;
}

.quarter_column:hover {
	background: #DAECF8;
	height: 160px;
} 

.packages_panel {
	margin: 0;
	padding: 0;
}
.packages_panel li {
	cursor: pointer;
	display: inline;
}
.packages_panel  li:hover {
	background: #DAECF8;
}

.packages_left {
	width: 400px;
	float: left;
	text-align: justify;
	padding-right: 30px;
}

.packages_right {
	width: 420px;
	float: left;
	padding-right: 10px;
}

.packages_right ul li {
	margin-left: -23px;
}

/* Product comparison*/

#gradient-style
{
	margin: 20px 45px;
	width: 700px;
	text-align: left;
	border-collapse: collapse;
}
#gradient-style th
{
	font-weight: normal;
	padding: 8px;
	background: #daecf8;
	border-top: 2px solid #d3ddff;
	border-bottom: 1px solid #fff;
	color: #039;
}

#gradient-style td
{
	padding: 8px; 
	color: #669;
	background: #fff;
	border-right: 1px #fff solid;
	border-left: 1px #fff solid;

}
#gradient-style tfoot tr td
{
	background: #fff;
	color: #99c;
}
#gradient-style tbody tr:hover td
{
	background: #daecf8;
	color: #339;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;

}

.img_price {
	height:110px;
	width: 110px;
	float: left;
	margin-left: 730px;
	margin-top: -30px;
	margin-bottom: -50px;
}


/* Banner  */

#banner {
	width: 860px;
	height: 120px;
	float: left;
	padding-bottom: 20px;
}

#banner_title {
	width: 860px;
	height: 60px;
	background-image:url(../images/image_banner_bg.png);
	background-repeat: repeat-x;
	float: left;
	margin-top: -80px;
}

#banner_title h1 {
	padding-left: 10px;
	padding-top: 17px;
}