/* 
---------------------------------------
CAROLINE PROMOTIONS INC WEBSITE
Design and CSS Coding by Tekila Studios
http://tekila.co.uk/
Revision: 1.0b

COLOR TABLE:

PANTONE314: #00769C

	Light Tone: #D7E5EB
	Medium Tone: #B5CFDB
	Strong Tone: #00475E
	
PANTONE 410: #625042 (For Body Copy)

=======================================
GENERAL STYLING
=======================================
*/


body {	
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;	
font-size: 62.5%;	
line-height: 160%;	
color: #625042;
margin: 0;
padding: 0;
}

a {	
color: #00475E;	
text-decoration: none;
font-weight: bold;
}

a:hover {	
text-decoration: underline;
}

	a.homelink { /* Home Button-Style Links */
	color: #00475e;
	padding: 2px 4px;
	font-size: 85%;
	background-color: #D7E5EB;
	}
	
	a.homelink:hover {
	text-decoration: none;
	color: #fff;
	background-color: #00475E;
	}

h2, h3, h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #00475E;
}

h2 {
font-size: 160%;
font-weight: normal;
letter-spacing: -1px;
}

h3 {
margin: 10px 0 0px 0;
font-size: 100%;
text-transform: uppercase;
}

hr {
border: none;
border-bottom: 1px solid #B5CFDB;
margin: 20px 0;
}

img { 
border: none;
}

/* ---------------
UTILITY CLASSES 
To be used globally */

.hidden { display: none; }
.introparagraph { font-size: 125%; margin: 20px 0; }
.noborder { border: none; }
.thumbset { margin-top: 20px; }
.centered { text-align: center; }

/*
-------------
MASTER HEADER
Stretches the Header background to fit the full width */

#mastheader {
width: 100%;
background: url('../images/masthead_bg.jpg');
height: 300px;
min-height: 300px;
text-align: center;
}

#mastheader-container {
text-align: left;
width: 780px;
height: 300px;
position: relative;
top: 0;
left: 0;
margin: 0 auto;
background-image: url(../images/mainbanner.jpg);
background-position: 0 60px;
}


/*
-----------------
GLOBAL NAVIGATION
*/

#globalnav {
background: url('../images/globalnav_bg.jpg');
height: 60px;
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 100%;
text-transform: lowercase;
}

#globalnav ul { 
list-style-type: none;
padding: 0;
margin: 0; 
margin-left: 0px;
overflow: auto;
position: absolute;
bottom: 18px;
}

#globalnav ul li { 
float: left;
margin: 0 4px;
}

#globalnav ul li a {
display: block;
padding: 5px 0px;
font-weight: bold;
text-decoration: none;
color: #f9f9ff;
background-position: top left;
background-repeat: no-repeat;
}

#globalnav ul li a:hover {
text-decoration: none;
background-color: #eef;
color: #1C4B4B;
}

#globalnav ul#nav a { text-indent: -99999px; }

#globalnav #nav-home a {
width: 49px;
background: url('../images/nav-home.gif');
}

#globalnav #nav-about a {
width: 67px;
background: url('../images/nav-about.gif');
}

#globalnav #nav-clients a {
width: 56px;
background: url('../images/nav-clients.gif');
}

#globalnav #nav-services a {
width: 63px;
background: url('../images/nav-services.gif');
}

#globalnav #nav-casestudies a {
width: 86px;
background: url('../images/nav-casestudies.gif');
}

#globalnav #nav-photogallery a {
width: 96px;
background: url('../images/nav-photogallery.gif');
}

#globalnav #nav-contact a {
width: 62px;
background: url('../images/nav-contact.gif');
}

#globalnav #nav-home a:hover, 
#globalnav #nav-about a:hover,
#globalnav #nav-clients a:hover,
#globalnav #nav-services a:hover,
#globalnav #nav-casestudies a:hover, 
#globalnav #nav-photogallery a:hover,
#globalnav #nav-contact a:hover { background-position: 0 -22px; }

/*
-----------
MAIN BANNER
Styles for the banner intro paragraph */


#mainbanner {
clear: both;
background-color: #009933;
width: 400px;
color: #fff;
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 120px;
padding: 10px;
position: absolute;
right: 0px;
top: 75px;
display: none;
}

#mainbanner p {
margin: 30px; 
}

	#logobig {
	background: url(../images/mainbanner_logo.jpg);
	position: absolute;
	left: 23px;
	top: 110px;
	width: 240px;
	height: 100px;
	text-indent: -10000px;
	overflow: hidden;
	}
	
	#learnmorelink {
	width: 100px;
	height: 22px;
	position: absolute;
	top: 220px;
	left: 630px;
	display: block;
	text-indent: -9999px;
	}
	

/*
--------------
MASTER CONTENT
*/

#mastcontent {
width: 100%;
background: url(../images/content_bg.jpg);
background-repeat: repeat-x;
position: relative;
float: left;
padding-bottom: 20px;
text-align: center;
font-size: 125%;
line-height: 180%;
}

#mastcontent-container,
#mastcontent-container-clean,
#mastcontent-container-home {
clear: both;
width: 780px;
margin: 0 auto;
padding-bottom: 30px;
position: relative;
top: 30px;
left: 0px;
text-align: left;
}

#mastcontent-container {
background: url('../images/dragonfly-art.gif') no-repeat;
min-height: 500px;
}

#mastcontent img.logo {
border: 2px solid #D7E5EB;
margin-right: 3px;
}

#mastcontent img.logo:hover {
border: 2px solid #00769C;
} 

#tripcol {
width: 780px;
float: left;
padding-bottom: 20px;
}

.col img, div.homeimage { /* Home Flash Images */
margin-top: 10px;
border: 3px solid #B5CFDB;
}

.column {
width: 480px;
margin-left: 0px;
padding-left: 240px;
}

.columnfull { /* Full-Width Layout */
width: 780px;
margin-left: 70px;
margin-top: 25px;
}

.photoset { /* Styles Case Studies Thumbnails DIV */
margin-left: -200px;
margin-top: -35px;
width: 160px;
float: left;
display: inline;
text-align: center;
}

.photoset a {
min-width: 120px;
width: 120px;
display: block;
margin-bottom: 15px;
background-color: #d7e5eb;
}

img.casestudieth { /* Case Studies Thumbnails */
border: 3px solid #D7e5eb;
}

#xmlgallery {
margin-top: 55px;
}

.column a, .column a:visited { font-weight: normal; }



.col { /* Homepage 3-Column Layout Columns */
float: left;
width: 240px;
margin-right: 30px;
margin-bottom: 30px;
font-size: 90%;
line-height: 160%; 
}

.collast { /* Last Column for Margin */
margin-right: 0; 
}

.col ul {
padding: 0;
margin: 0;
margin-left: 15px;
list-style-position: outside;
}

.col ul li {
margin: 5px 0;
}

.col p { 
font-size: 100%;
line-height: 170%;
}

.col h3 { 
text-transform: uppercase;
}

.col a { white-space: nowrap;
}


/* 
CLIENT LIST
Thumbnails for the Clients Section */

ul.clients {
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
float: left;
font-size: 87.5%;
line-height: 125%; }

ul.clients li {
border-top: 1px solid #D7E5EB;
font-weight: bold; 
margin: 0px 0 5px 0;
float: left; 
width: 45%; }

ul.clients li img {
float: left;
margin: 5px 10px 5px 0;
border: 3px solid #D7E5EB; }

ul.clients li em {
font-style: normal;
font-weight: normal;
display: block;
margin-top: 14px;
margin-right: 10px; }


/*
FOOTER
Styles the Footer Section */

#footer { 
clear: both;
width: 100%;
height: 90px;
background-image: url('../images/footer_bg.jpg');
font-size: 90%;
line-height: 140%;
color: #555;
}

#footer-container {
width: 780px;
margin: 0 auto;
border-top: 1px solid #B5CFDB;
position: relative;
top: 20px;
left: 0;
text-align: left;
}

#footer ul { 
position: absolute;
top: 15px;
left: 0;
margin: 0;
padding: 0;
list-style-type: none; }

#footer ul li { 
display: inline;
margin: 0; }

#footer p#copyright {
width: 280px;
margin: 0;
padding: 0;
position: absolute;
top: 15px;
right: 0px;
text-align: right;
}

/* LINK LIST
Homepage Link List */

* html ul li a { width: 1%; } /* IE Hack to respect it's block behavior */

#links {
margin: 0;
padding: 0;
}

#links ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
border-bottom: 1px solid #D7E5EB;
} 

#links ul li {
border-top: 1px solid #D7E5EB;
margin: 0px 0;
text-indent: 5px;
}

#links li a { 
color: #00475E;
display: block;
font-weight: normal;
padding: 5px 0px;
text-decoration: none;
}

* html #links li a {  /* make hover effect work in IE */
width: 100%;
}

#links li a:hover {
background: #EFF5F7;
}

#links a em { 
color: #00769C;
display: none;
font-style: normal;
line-height: 125%; 
}

#links a span {
color: #125F15;
font-weight: normal;
line-height: 150%;
}