@charset "utf-8";
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
basic styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
* {
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

/*this forces firefox, safari and opera to have a right scrollbar which eliminates problem with 
dynamic page height i.e. shifting of page content by about 16px*/
html {
	overflow-y: scroll;
}

body {
	text-align: center;
/*	background: #c8e7ec;*/
	background: black;
}

html, body {
	height:100%;
}

div#container {
	width: 801px;
	margin: 0 auto;
	position: relative;
	text-align: left;
	min-height: 100%;
	background: #a1d5dc;
}

/*Internet Explorer (IE) 6 and below doesn't support min-height, so it needs to be hacked.*/
* html #container {
height:100%
}

.clear {
	clear: both;
	height: 0;
	font: 1px;
	line-height: 0px;
}

p {
	font-size: 12px;
/*	font-family: Arial, Helvetica, sans-serif; 12px arial looks ugly in my opinion and verdana seems more legible i.e. slightly bigger and more spaced out*/
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
}

/*p a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}*/

/*p  b {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}*/

a {
	font-size: 12px;
}

.red {
	color: #fe0202;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
banner styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#banner {
	width: 801px;
	height: 142px;
/*	background: url(../assets/banner/banner_the_107_club.jpg);*/
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
main_nav styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#main_nav {
	width: 801px;
	height: 22px;
/*	background: url(../assets/mainNav_bg.jpg);*/
	background: black;
	overflow: hidden;
	position: relative;
}

div#main_nav ul {
	list-style: none;
	padding-left: 516px;
}

div#main_nav ul li {
	float: left;
}

a#home_button {
	width: 54px;
	height: 22px;
	display: block;
	background: url(../assets/main_nav_buttons/home_button.gif);
	text-indent: -9999px;
	outline: none;
}

a#home_button:hover {
	background-position: 0 -22px;
}

a#home_button.selected {
	background-position: 0 -22px;
}

a#what_we_do_button {
	width: 96px;
	height: 22px;
	display: block;
	background: url(../assets/main_nav_buttons/what_we_do_button.gif);
	text-indent: -9999px;
	outline: none;
}

a#what_we_do_button:hover {
	background-position: 0 -22px;
}

a#what_we_do_button.selected {
	background-position: 0 -22px;
}

a#portfolio_button {
	width: 70px;
	height: 22px;
	display: block;
	background: url(../assets/main_nav_buttons/portfolio_button.gif);
	text-indent: -9999px;
	outline: none;
}

a#portfolio_button:hover {
	background-position: 0 -22px;
}

a#portfolio_button.selected {
	background-position: 0 -22px;
}

a#contact_button {
	width: 65px;
	height: 22px;
	display: block;
	background: url(../assets/main_nav_buttons/contact_button.gif);
	text-indent: -9999px;
	outline: none;
}

a#contact_button:hover {
	background-position: 0 -22px;
}

a#contact_button.selected {
	background-position: 0 -22px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
main_content styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#main_content {
	width: 801px;
	background: #fff url(../assets/graphic_loft_logo.jpg) no-repeat;
	position: relative;
	padding-top: 82px;
	padding-bottom: 15px;
	background-color: #fff;
	overflow: hidden;
}

div#main_content.home {
	padding-bottom: 0px;
}

h1#graphic_loft_logo {
	width: 197px;
	height: 38px;
	background: url(../assets/graphic_loft_logo.gif) no-repeat;
	position: absolute;
	text-indent: -9999px;
	left: 103px;
	top: 26px;
}

div#main_content_text {
	margin-left: 170px;
	padding-right: 170px;
	position: relative;
}

div#main_content_text p {
	line-height: 1.4;
	margin-bottom: 1em;
}

div#main_content_text h1 {
	font-size: 20px;
	margin-bottom: 1em;
}

div#main_content div.drop_down {
	border: 1px solid #21afbc;
	width: 539px;
}

div#main_content h1.drop_down_title {
	width: 531px;
	height: 24px;
	background: url(../assets/drop_down_title_bg.jpg) no-repeat;
	overflow: hidden;
	color: #fff;
	line-height: 24px;
	font-size: 14px;
	padding-left: 10px;
	margin-bottom: 0;
}

div#main_content p.slide a {
	color: #21afbc;
	background: url(../assets/link_arrow.gif) no-repeat right;
	padding-right: 10px;
	text-decoration: none;
}

div#main_content p.slide a:hover {
	text-decoration: underline;
}

div#main_content p.hidden a {
	color: #21afbc;
	text-decoration: none;
}

div#main_content p.hidden a:hover {
	text-decoration: underline;
}

div#brochures_image1 {
	background: url(../assets/brochures_1bg.jpg) no-repeat 10px 0px;
	width: 529px;
	height: 375px;
	overflow: hidden;
}

p#brochures_image1_text {
	background: url(../assets/websites/tcp.jpg) no-repeat top right;
}

div#brochures_image2 {
	background: url(../assets/brochures_2bg.jpg) no-repeat 10px 0px;
	width: 529px;
	height: 393px;
	overflow: hidden;
}

p#brochures_image2_text {
	background: url(../assets/websites/107.jpg) no-repeat top right;
}

div#brochures_image3 {
	background: url(../assets/brochures_3bg.jpg) no-repeat 4px 0px;
	width: 529px;
	height: 363px;
}

p#brochures_image3_text {
	background: url(../assets/websites/edison.jpg) no-repeat top right;
}
p#brochures_image4_text {
	background: url(../assets/websites/r-n-pop.jpg) no-repeat top right;
}p#brochures_image5_text {
	background: url(../assets/websites/r-n-exh.jpg) no-repeat top right;
}
p#brochures_image6_text {
	background: url(../assets/websites/edison-ad.jpg) no-repeat top right;
}
p#brochures_image7_text {
	background: url(../assets/websites/r-n-ad.jpg) no-repeat top right;
}p#brochures_image8_text {
	background: url(../assets/websites/chiro-lf.jpg) no-repeat top right;
}p#brochures_image9_text {
	background: url(../assets/websites/lavat-lf.jpg) no-repeat top right;
}p#brochures_image10_text {
	background: url(../assets/websites/tgb-lf.jpg) no-repeat top right;
}p#brochures_image11_text {
	background: url(../assets/websites/keytel-lf.jpg) no-repeat top right;
}p#brochures_image12_text {
	background: url(../assets/websites/edison-logo.jpg) no-repeat top right;
}p#brochures_image13_text {
	background: url(../assets/websites/amg-logo.jpg) no-repeat top right;
}p#brochures_image14_text {
	background: url(../assets/websites/tcp-logo.jpg) no-repeat top right;
}

p#brochures_image21_text {
	background: url(../assets/brochures_1bg_text.jpg) no-repeat top right;
}


p#brochures_image22_text {
	background: url(../assets/brochures_2bg_text.jpg) no-repeat top right;
}


p#brochures_image23_text {
	background: url(../assets/brochures_3bg_text.jpg) no-repeat top right;
}

div.drop_down p {
	padding-right: 200px;
	padding-left: 10px;
	padding-top: 10px;	
}

a#main_content_link {
	width: 135px;
	height: 174px;
	background: url(../assets/ease_the_frustration_bg.gif) no-repeat;
	position: absolute;
	text-indent: -9999px;
	top: 45px;
	right: 20px;
	outline: none;
}

div#main_content_pic {
	background: url(../assets/home_page_main_content_bg.jpg) no-repeat;
	width: 801px;
	height: 250px;
}

div#left_side_nav {
	position: absolute;
	left: 20px;
	top: 195px;
}

div#left_side_nav ul {
	list-style: none;
}

div#left_side_nav ul li {
	color: #00a3b2;
	font-size: 12px;
	line-height: 1.5;
}

div#left_side_nav ul li a {
	color: #00a3b2;
	font-size: 12px;
	line-height: 1.5;
	text-decoration: none;
}

div#left_side_nav ul li a:hover {
	color: #fe0202;
}

div#left_side_nav ul li a.selected {
	color: #fe0202;	
}

/*~~~~~~~~~~~~~~~~~~~~~~
corporate identity page specific styles
~~~~~~~~~~~~~~~~~~~~~~*/
div#corporate_identity_images {
	background: url(../assets/coporate_id_images.gif) no-repeat;
	width: 430px;
	height: 1203px;
	margin-left: 276px;
	text-indent: -9999px;
}

div#corporate_identity_image1 {
	width: 500px;
	height: 394px;
	background:url(../assets/corporate_identity_1bg.jpg) no-repeat 50px 0px;
}

div#corporate_identity_image2 {
	width: 500px;
	height: 394px;
	background:url(../assets/corporate_identity_2bg.jpg) no-repeat 50px 0px;
}

div#corporate_identity_image3 {
	width: 500px;
	height: 394px;
	background: url(../assets/corporate_identity_3bg.jpg) no-repeat 50px 0px;
}

div#brochures_images {
	background: url(../assets/brochures.jpg) no-repeat;
	width: 546px;
	height: 1178px;
	margin-left: 200px;
	text-indent: -9999px;
}

/*~~~~~~~~~~~~~~~~~~~~~~
leaflets page specific styles
~~~~~~~~~~~~~~~~~~~~~~*/
div#leaflets_images {
	background: url(../assets/leaflets.jpg) no-repeat;
	width: 541px;
	height: 1188px;
	text-indent:-9999px;
	margin-left: 218px;
}

div#leaflets_image1 {
	width: 500px;
	height: 189px;
	background: url(../assets/leaflets_1bg.jpg) no-repeat top center;
}

div#leaflets_image2 {
	width: 529px;
	height: 315px;
	background: url(../assets/leaflets_2bg.jpg) no-repeat top center;
}

div#leaflets_image3 {
	width: 500px;
	height: 321px;
	background: url(../assets/leaflets_3bg.jpg) no-repeat top center;
}

div#leaflets_image4 {
	width: 500px;
	height: 331px;
	background: url(../assets/leaflets_4bg.jpg) no-repeat top center;
}

/*~~~~~~~~~~~~~~~~~~~~~~
advertising page specific styles
~~~~~~~~~~~~~~~~~~~~~~*/
div#advertising_images {
	background: url(../assets/advertising.jpg) no-repeat;
	width: 444px;
	height: 1141px;
	text-indent: -9999px;
	margin-left: 262px;
}

div#advertising_image1 {
	height: 375px;
	height: 545px;
	background: url(../assets/advertising_1bg.jpg) no-repeat top center;
}

div#advertising_image2 {
	width: 444px;
	height: 534px;
	background: url(../assets/advertising_2bg.jpg) no-repeat 50px 0px;
}

/*~~~~~~~~~~~~~~~~~~~~~~
advertising page specific styles
~~~~~~~~~~~~~~~~~~~~~~*/
div#exhibition_images {
	background: url(../assets/exhibition.jpg) no-repeat;
	width: 543px;
	height: 883px;
	text-indent: -9999px;
	margin-left: 160px;
}

div#exhibition_image1 {
	width: 523px;
	height: 485px;
	background: url(../assets/exhibition_1bg.jpg) no-repeat top center;
}

div#exhibition_image2 {
	height: 271px;
	height: 360px;
	background: url(../assets/exhibition_2bg.jpg) no-repeat top center;
}

/*~~~~~~~~~~~~~~~~~~~~~~
Commercial Property page specific styles
~~~~~~~~~~~~~~~~~~~~~~*/
p#commercial_property_text_image1{
	background: url(../assets/commercial_property_text_1.jpg) no-repeat top right;
}

p#commercial_property_text_image2{
	background: url(../assets/commercial_property_text_2.jpg) no-repeat top right;
}

p#commercial_property_text_image3{
	background: url(../assets/commercial_property_text_3.jpg) no-repeat top right;
}

div#commercial_property_image1 {
	width: 550px;
	height: 340px;
	background: url(../assets/commercial_property_1.jpg) no-repeat 45px 0px;
}

div#commercial_property_image2 {
	width: 550px;
	height: 460px;
	background: url(../assets/commercial_property_2.jpg) no-repeat 45px 0px;
}

div#commercial_property_image3 {
	width: 550px;
	height: 330px;
	background: url(../assets/commercial_property_3.jpg) no-repeat 45px 0px;
}

/*~~~~~~~~~~~~~~~~~~~~~~
Web Production page specific styles
~~~~~~~~~~~~~~~~~~~~~~*/
div#web_production_container {
	padding-left: 318px;
	
}

div#web_production_container a, div#tpc_screen a, div#the_107_club_screen a, div#edison_hill_screen a {
	color: #079eb3;
}

div#web_production_container a:hover , div#tpc_screen a:hover, div#the_107_club_screen a:hover, div#edison_hill_screen a:hover {
	color: #fe0202;
}

div#tpc_screen {
	width: 275px;
	height: 282px;
	background: url(../assets/tcp_screen.jpg) no-repeat;
	/*position: relative;*/
	margin-left: 60px;
	padding-bottom: 10px;
}

div#tpc_screen p, div#the_107_club_screen p, div#edison_hill_screen p {
	width: 170px;
/*	position: absolute;
	left: 300px;
	top: 180px;*/
	line-height: 1.5;
	color: #079eb3;
	padding: 180px 0 0 300px;
}

div#the_107_club_screen {
	width: 275px;
	height: 282px;
	background: url(../assets/107_club_screen.jpg) no-repeat;
	/*position: relative;*/
	margin-left: 60px;
	padding-bottom: 10px;
}

div#edison_hill_screen {
	width: 275px;
	height: 282px;
	background: url(../assets/edison_hill_screen.jpg) no-repeat;
	/*position: relative;*/
	margin-left: 60px;
	padding-bottom: 10px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
footer styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#footer {
	width: 801px;
	/*height: 66px;*/
	padding-bottom: 26px;
	position: relative;
	/*background: #00a3b3 url(../assets/footer_logo.gif) right top no-repeat;*/
}

div#footer_text {
	padding: 10px;
	color: #fff;
	background: #009bad url(../assets/footer_logo.gif) right top no-repeat;
}

div#footer_text a {
	color: #fff;
	text-decoration: none;
}

div#footer_text a:hover {
	color: #c8e7ec;
}

a#client_log_in_button {
	width: 92px;
	height: 22px;
	display: block;
	background: url(../assets/footer_buttons/client_log_in_button.gif);
	text-indent: -9999px;
	outline: none;
	position: absolute;
	border-bottom: 0px;
	left: 17px;
}

a#client_log_in_button:hover {
	background-position: 0 -22px;
}

a#footer_contact_button {
	width: 61px;
	height: 22px;
	display: block;
	background: url(../assets/footer_buttons/contact_button.gif);
	text-indent: -9999px;
	outline: none;
	position: absolute;
	border-bottom: 0px;
	left: 17px;
}

a#footer_contact_button:hover {
	background-position: 0 -22px;
}