/* -------------------------------------------------------------------------------

MAIN STYLE SHEET FOR HOPKINS COMMUNICATIONS

Updated: 24/03/07


Fixes: On IE style sheets

Main Colours: 
Blue: 168acb
Dark Blue: 0066cc
Orange: f6822a
Medium Grey: 666e70
Light Grey: 9aafb4



------------------------------------------------------------------------------ */ 


body
{
	font: 62.5%  "Frutiger", "Helvetica-Neue", "Univers",  arial, helvetica, sans-serif;	
}

/* GLOBAL: Set all divs to none just in case IE starts to misbehave */

*
{
	padding: 0;
	margin: 0;
	border: 0;
}

/* -------------------------------------------------------------------------------
=DEFAULT TEXT STYLE
------------------------------------------------------------------------------- */

h1 
{
	font-size: 0em;
        text-indent: -8000px;
}

h2
{
	font-size: 2.2em;
	font-weight: bolder;
	line-height: 1.5em;
	text-align: left;
	color: #168acb;
	margin-bottom: 15px;	
}

h2.home
{
	font-size: .8em;
	font-weight: bolder;
	text-align: left;
        text-indent: -5000px;
	color: #333;
	padding: 5px 0;
	margin-bottom: 5px;	
	background: url(imgs/homeTitleBG.jpg) no-repeat;		
}

h2.work
{
	font-size: .8em;
	font-weight: bolder;
	text-align: left;
        text-indent: -5000px;
	color: #333;
	padding: 5px 0;
	margin-bottom: 5px;	
	background: url(imgs/workTitleBG.jpg) no-repeat;		
}

h2.clients 
{
	font-size: .8em;
	font-weight: bolder;
	text-align: left;
        text-indent: -5000px;
	color: #333;
	padding: 5px 0;
	margin-bottom: 5px;	
	background: url(imgs/clientsTitleBG.jpg) no-repeat;	
	
}


h2.pr
{
	font-size: .8em;
	font-weight: bolder;
	text-align: left;
        text-indent: -5000px;
	color: #333;
	padding: 5px 0;
	margin-bottom: 5px;	
	background: url(imgs/publicityTitleBG.jpg) no-repeat;	
	
}

h2.events
{
	font-size: .8em;
	font-weight: bolder;
	text-align: left;
        text-indent: -5000px;
	color: #333;
	padding: 5px 0;
	margin-bottom: 5px;	
	background: url(imgs/eventsTitleBG.jpg) no-repeat;	
	
}

h3
{
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.5em;
	color: #333;	
	margin: 15px 0 10px 0;
}

h3.colour
{
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.2em;
	color: #f6822a;	
	margin: 15px 0 5px 0;
}

h4
{
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.6em;
	color: #1584c0;
	margin: 5px 0 0.8em 0;
}

h4 a:link
{	
	padding: 1px 0;
	line-height: 1.3em;
	font-weight: bold;
	display: block;
	color: #1584c0;
}

h4 a:visited
{
	padding: 1px 0;
	font-weight: bold;
	display: block;
	color: #1584c0;
}

h4 a:hover
{
        color: #fff;
        background: #1584c0;
        text-decoration: none;
}

h4.year
{	
	padding: 3px 0 1px 0;
	line-height: 1.3em;
	font-weight: bold;
	display: block;
        border-bottom: 1px solid #666;
        border-top: 1px solid #666;
	color: #1584c0;
}


h4.month
{	
	padding: 1px 0;
	line-height: 1.3em;
	font-weight: bold;
	display: block;
	color: #666;
}

h5 
{
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.2em;
	color: #fff;
	padding: 5px 5px 15px 5px;
}


p 
{
	font-size: 1.2em;
	line-height: 1.5em;
	color: #333;
	margin: 0 0 1.5em 0;
}

.bold
{
	font-size: 1.2em;
	line-height: 1.5em;
	font-weight: bold;
	color: #333;
	margin: 25px 0 12px 0;
}

.white 
{
	font-size: 1.1em;
	line-height: 1.5em;
	color: #fff;
}


.quote 
{
	font-size: 1.2em;
	line-height: 1.5em;
	color: #666;
	margin: 25px 0 12px 0;
}

.small
{
	font-size: .9em;
}


.caption
{
	font-size: 1.3em;
	line-height: 1.3em;
	font-weight: bold;
	color: #669900;
	margin: 0 0 5px 0;
}

.date
{
	font-size: 1.1em;
	color: #5E5E5E;
	font-weight: normal;
	margin: 5px 0 5px 0;
}

.instructions
{
	font-size: 1.2em;
	color: #f6822a;
	font-weight: bold;
	margin: 5px 0 5px 0;
}

a:link
{
	font-weight: normal;
	line-height: 1.5em;
	color: #E37A13;
	text-decoration: none;
}

a:visited
{
	font-weight: normal;
	line-height: 1.5em;
	color: #E37A13;
	text-decoration: none;
}

a:hover
{
	color: #FF952D;
	text-decoration: underline;
}

a.external:link
{
	background: url(imgs/external_icon.gif) no-repeat 100% 0;
	padding: 0 16px 0 0;
}

a.external span
{
	position: absolute;
	left: -5000px;
	width: 4000px;
}

#mainContent ul
{
	font-size: 1.2em;
	font-weight: medium;	
	line-height: 1.5em;
	color: #666;
	padding: 0 0 0 0;
	margin: 0 0 0 15px;
}

#mainContent li
{
	padding: 0 0 2px 4px;
} 

.vcard
{
	font-weight: normal;
	line-height: 1.4em;
	color: #333;
}

.vicon
{
}

/* -------------------------------------------------------------------------------
=WRAPPER
------------------------------------------------------------------------------- */

#wrapper 
{
	width: 100%;
	min-width: 930px; /* Stop Flash Intro from dropping since it is fixed width */
        margin: 0 auto;
}

/* -------------------------------------------------------------------------------
=GUTTERS to be getting on with
------------------------------------------------------------------------------- */

.wrapGutter
{
        width: 87%;
        max-width: 960px; /* Keep the Side Nav and Intro from expanding to much */
        margin: 0 auto;
}

.gutter
{
	width: 93%;
	margin: 10px 0 0 40px;
}

.gutterSide
{
    width: 87%;
    margin: 0 auto;
    padding-bottom: 100px;
}

/* -------------------------------------------------------------------------------
=LOGO AND BANNER
------------------------------------------------------------------------------- */

#header
{
	float: left;
        width: 100%;
	margin-bottom: 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid #133250;
        background: #235b93 url(imgs/headerBG.jpg) repeat-x bottom;
}

#logo
{	
        float: left;
        width: 100%;
        margin: -10px 0 0 0;
	padding: 0 0 20px 0;
	display: inline;
}

#intro
{	
	float: left;
	width: 30%;
	height: 190px;
	margin: 0 22px 0 0;
	background: #108acb url(imgs/introBg.jpg) repeat-x top right;
	display: inline;
}

#intro h3
{
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;
	padding: 20px 20px 15px 15px;	
}

#intro a:link
{
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.1em;
	margin-left: 10px;
	padding: 4px 20px 4px 5px;
	color: #E37A13;
	background: #fff url(imgs/moreBG.gif) no-repeat right center ;
	text-decoration: none;
}

#intro a:visited
{
	color: #E37A13;
	text-decoration: none;
}

#intro a:hover
{
	color: #FF952D;
	text-decoration: underline;
}

#flashHeader
{	
	float: left;
	width: 530px;
	display: inline;
}

/* -------------------------------------------------------------------------------
=SKIP DIV
------------------------------------------------------------------------------- */

#skip
{
    width: 88%;
    text-align: right;
    padding-bottom: 5px;
}

#skip a:link
{
	font-size: 1em;
	font-weight: normal;
	color: #ccc;
	text-decoration: none;
}

#skip a:visited
{
	font-size: 1em;
	font-weight: normal;
	color: #ccc;
	text-decoration: none;
}

#skip a:hover
{
	color: #9aafb4;
	text-decoration: underline;
}


/* -------------------------------------------------------------------------------
=MAIN CONTENT
------------------------------------------------------------------------------- */

#mainContent 
{
	float: left;
	width: 550px;
	margin: 10px 0 90px 0;
	background:  url(imgs/mainContentBG.jpg) no-repeat;  
}

#mainContentCol1 
{
	float: left;
	width: 235px;
	margin: 20px 0 40px 0;
	padding-right: 15px;
	border-right: 1px solid #ccc;
}

#mainContentCol2
{
	float: left;
	width: 230px;
	margin: 20px 0 100px 25px;
}

.accToggler
{
        float: left;
	margin: 7px auto;
	padding: 3px;
	width: 97%;
	background: #424242 url(imgs/togglerBG.gif) no-repeat right top;  
	color: #f4f4f4;
	border: 1px solid #fff;
	cursor: pointer;
}

.accContent
{
        float: left;
        margin: 5px auto;
	width: 98%;
}

.on
{
	width: 97%;
	padding: 4px 4px;
	background: #fff;
}

.off
{
	width: 97%;
	padding: 3px 4px;
	background: #efe9e9;
}


.bio
{       
        float: left;
        width: 68%;
}

.bioPic
{
        float: right;
        width: 26%;
        text-align: center;
        font-size: 1.2em;
         line-height: 1.5em;
	margin: 5px 0 10px 0;
        color: #168acb;
}

.galleryPic
{
	float: left;
        width: 43%;
        height: 250px;
	margin: 0 30px 40px 0;
}

.newspic
{
        clear: both;
	float: right;
        border: 1px solid #999;
	margin: 5px 0 10px 10px;
        background: #ccc;
}

.pic
{
        border: 1px solid #999;
	margin: 0 0 15px 0;
        background: #ccc;
}


/* -------------------------------------------------------------------------------
=SIDE CONTENT
------------------------------------------------------------------------------- */

#sideContentMain
{
	float: left;
	width: 30%;
	margin: 23px 10px 0 0;    
	background: #fff;
}

#sideContentMain h5.services 
{
	font-size: 1.4em;
	font-weight: bolder;
	line-height: 1.2em;
	text-indent: -3000px;
	color: #333;
	background: url(imgs/servicesTitleBG.jpg) no-repeat;	
}

#sideContentMain h5.about
{
	font-size: 1.4em;
	font-weight: bolder;
	line-height: 1.2em;
	color: #333;
	text-indent: -3000px;
	background: url(imgs/aboutTitleBG.jpg) no-repeat;	
}

#sideNav1
{
	float: left;
	width: 57%;
	margin: 0 10px 0 0;
}

#sideNav1 ul 
{
	width: 100%;
	list-style-type: none;
}

#sideNav1 ul a
{
	font-size: 1.1em;
	line-height: 1em;
	text-decoration: none;
	font-weight: bold;
	color: #1584c0;
	padding: 6px 0 6px 3px;
	display: block;
}

#sideNav1 a:hover, #sideNav1 .selected a
{
	font-weight: 800;
	color: #333;
	text-indent: 0px;
	text-decoration: none;
	background: #c9dfe5;
}

#advertising #sideNav1 .advertising a,
#design #sideNav1 .design a,
#public #sideNav1 .public a,
#events #sideNav1 .events a,
#sponsor #sideNav1 .sponsor a,
#promotions #sideNav1 .promotions a,
#web #sideNav1 .web a,
#sports #sideNav1 .sports a,
#conferences #sideNav1 .conferences a
{
	color: #fff;
	font-weight: 800;
	padding: 6px 0 6px 3px;
	background: #9aafb4;
}

#sideNav2
{
	float: left;
	width: 38%;
}


#sideNav2 ul 
{
	width: 100%;
	list-style-type: none;
}

#sideNav2 ul a
{
	font-size: 1.1em;
	line-height: 1em;
	text-decoration: none;
	font-weight: bold;
	color: #1584c0;
	padding: 6px 0 6px 3px;
	display: block;
}

#sideNav2 a:hover, #sideNav2 .selected a
{
	background-position: right bottom;
	font-weight: 800;
	color: #333;
	text-decoration: none;
	background: #c9dfe5;
}

#home #sideNav2 .home a,
#news #sideNav2 .news a,
#gallery #sideNav2 .gallery a,
#about #sideNav2 .about a,
#clients #sideNav2 .clients a,
#jobs #sideNav2 .jobs a
{
	color: #fff;
	font-weight: 800;
	padding: 6px 0 6px 5px;
	background: #9aafb4;
}

/* -------------------------------------------------------------------------------
=FOOTER AND COPYRIGHT
------------------------------------------------------------------------------- */
#footer
{
	clear: both;
}

#copyright
{
	clear: both;
	width: 100%;
	padding: 50px 0 0 3px;
	font-size: 1.1em;
        line-height: 1.5em;
	font-weight: normal;
	color: #666;
}

#copyright a:link
{
	font-size: 1.0em;
	line-height: 1.5em;
	color: #FF952D;
	text-decoration: underline;
}

#copyright a:visited 
{
	font-size: 1.0em;
	line-height: 1.5em;
	color: #FF952D;
	text-decoration: underline;
}

#copyright a:hover
{
	color: #FF952D;
	text-decoration: none;
}

/* -------------------------------------------------------------------------------
=LISTINGS 
------------------------------------------------------------------------------- */

.listings
{
	display: block;
	width: 95%;
	margin: 10px 0 5px 0;
	padding: 2px 5px 2px 5px;
	border: 1px solid #D4D0B6;
	background: #fff url() repeat-x bottom;
}

.details
{
	font-size: 1.2em;
	line-height: 1.3em;
	color: #5E5E5E;
	padding: 0 10px 5px 5px;	
}

/* -------------------------------------------------------------------------------
=SEARCH FORM
-------------------------------------------------------------------------------*/

#searchForm
{
      	float: left;
        width: 96%;
        margin-bottom: 10px;
	padding: 0 0 0 10px;
	background: #168acb;
}

#searchForm label 
{
	display: block;
	float: left;
        margin-bottom: 10px;
        font-size: 1.3em;
        color: #fff;
	text-align: left;
	padding-right: 10px;
}

#searchForm br 
{
	clear: left;
}

#searchForm input
{
        float: left;
        font-size: 1.2em; 
        padding: 3px 0;
        border-left: 1px solid #666;
        border-top: 1px solid #666;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
}

#searchForm select
{
        float: left;
	margin-right: 8px;
        font-size: 1.2em; 
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
}

#searchForm .submit
{
	float: left;
        color: #333;
        font-weight: bold;
        margin-left: 10px;
        background: #fff;
}


/* -------------------------------------------------------------------------------
=CONTACT FORM
------------------------------------------------------------------------------- */

form 
{
}


/* Form Sections ======================================================================== */
/* Fieldset  */

fieldset 
{
	margin: 10px 0;
	overflow: auto;
}

legend 
{
	padding: 2px 5px;
	color: #888;
	font-size: 1.4em;
}

/* Nested Fieldset  */
fieldset fieldset  
{
	background-color:#FFF;
}

fieldset fieldset legend 
{
	font-size: 1.4em;
}

/* Inline Section */
.inlineSection 
{
	overflow: auto;
	width: 100%;	
}


/* Combo Label + Input Field =========================================================== */
form .oneField 
{
	width: 100%;	
}

form .inlineSection .oneField 
{
	padding: 0;
	margin-right: 4px;
	white-space: nowrap;	
}

/* Ties together a label and its checkbox or radio */
form .oneChoice 
{
	white-space: nowrap; 	
}

/* Field Labels ======================================================================== */

/* Base */
label, 
form .label 
{	
	color: #333;
	font-size: 1.4em;
	margin: 0;
}

/* Text inputs / Select label */
label.preField 
{
	display: -moz-inline-box;
	display: inline-block;	
	margin: 0.6em 4px 0 0;
	padding: 0 2px;
	min-width: 9em;
	background-color: #EDEDDC;
}

/* Radio / Checkbox group label */
form .label  
{
	display: block; 
	margin: 0.6em 4px 0 0;
	padding: 2px;
}

/* Individual Checkbox / Radio label */
label.postField  
{
	margin: 0 4px 0 4px;
}

/* Label when inside an inline section */
form .inlineSection .oneField .inlineLabel 
{
	display: -moz-inline-box;
	display: inline-block;	
	margin: 0.6em 4px 0 0;
	padding: 0 2px;
	min-width: 9em;
	background-color: #EDEDDC;
	white-space: normal;
}

/* Inputs ======================================================================== */

textarea 
{
	padding: 0;
	vertical-align: top;
	margin: 2px 2px 1px 0;
	border-left: 1px solid #666;
        border-top: 1px solid #666;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
}

input 
{
        padding: 3px 0;
        border-left: 1px solid #666;
        border-top: 1px solid #666;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
}

input[type=text], 
input[type=password] 
{
}

select 
{
	margin: 2px 2px 1px 0;
	padding: 0;
}

.inlineSection .oneField select 
{
	margin: 0 2px 1px 0 !important;
}

.gridSection select  
{
	margin: 0 !important;
}

/* Buttons ======================================================================= */

form .actions 
{
	text-align: center;
	margin: 20px 0 10px 0;	
}

/* Submit button */
form .primaryAction 
{
	font-weight: bold;
	font-size: 1.8em;
	border-left: 2px solid #666;
        border-top: 2px solid #666;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
}

/* Cancel button */
form .secondaryAction 
{
	color: grey;
}

form .secondaryAction:hover 
{
	color: black;
}


/* Form Builder Related Rules ===================================================== */

/* Form or Fieldset instruction paragraph. */
form .instructions 
{
	margin: 8em 0;
	font-size: 1.4em;
        font-style: italic;
}

/* Asterisk on required fields */
form .reqMark 
{
	color: #F00;
	padding: 0 4px;
}

/* wForms Related Rules ========================================================== */

/* Field w/ a validation error */
form .errFld 
{
	padding: 1px;
	border: 1px solid #F00;
}

/* Styling for message associated with a validation error. */
form .errMsg 
{	
	color: #CC3333 !important;
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 5px;
	display: block;
}

/* Field-Hint with focus */
form .field-hint 
{
	float: right;
	clear: right;
	color: #000;
	background-color: #FFFFFF;
	border: 1px solid #bbb;
	margin: 2px 0 7px 0;
	padding: 2px;
	font-size: 85%;
	min-height: 2em;	

}

/* Field-Hint without focus */
form .field-hint-inactive 
{
	float: right;
	clear: right;
	color: #666;
	border: 1px solid #E4E3D3;
	background-color: #FFFFFF;
	margin: 2px 0 7px 0;
	padding: 2px;
	font-size: 85%;
	min-height: 2em;	

}

/* Repeat Behavior divs (when not set on a fieldset) */
div.repeat 
{
	margin: 3px 0;
	padding-right: 6px;
	border: 1px dotted #ccc;
	background-color: #FFFFFF;
}

div.removeable 
{
	margin: 3px 0;
	padding-right: 6px;	
	border: 1px dotted #ccc;
	background-color: #F3F3F3;	
}

/* Links generated by the Repeat Behavior */
form .duplicateLink 
{
	line-height: 260%;
	font-weight: bold;
}

form .removeLink 
{
	line-height: 260%;
}

form td .duplicateLink, form td .removeLink  
{
	margin: 0;
	line-height: 100%;
}

/* Switch Behavior Classes */
.onstate-a,  .onstate-b,  .onstate-c,  .onstate-d,
.onstate-e,  .onstate-f,  .onstate-g,  .onstate-h, 
.onstate-i,  .onstate-j,  .onstate-k,  .onstate-l, 
.onstate-m,  .onstate-n,  .onstate-o,  .onstate-p, 
.onstate-q,  .onstate-r,  .onstate-s,  .onstate-t,
.onstate-u,  .onstate-v,  .onstate-w,  .onstate-x,  
.onstate-y,  .onstate-z,  .onstate-aa, .onstate-ab,
.onstate-ac, .onstate-ad, .onstate-ae, .onstate-af,
.onstate-ag, .onstate-ah, .onstate-ai, .onstate-aj,
.onstate-ak, .onstate-al, .onstate-am, .onstate-an,
.onstate-ao, .onstate-ap, .onstate-aq, .onstate-ar,
.onstate-as, .onstate-at, .onstate-au, .onstate-av,
.onstate-aw, .onstate-ax, .onstate-ay, .onstate-az {
	display: block;
}

/* offstate classes for the Switch Behavior are in wforms-jsonly.css */

/* IE6 BUG FIXES ==================================================================== */
form 
{
	height:expression('1%'); /* IE Pick-a-boo bug fix */
}

form fieldset 
{
	position:expression('relative'); /* Fixes IE problem with fieldset+legend boundaries */
	margin-top:expression('1em');
	padding-top:expression('1.5em');
	overflow: expression('visible');
}


form fieldset legend 
{
	position: expression('absolute'); 
	top: expression('-.5em'); /* Fixes IE problem with fieldset+legend boundaries */
	left:expression('.5em');
}

form .inlineSection .oneField 
{
	display: expression('inline-block');		
}

label.preField, form .inlineSection .oneField .inlineLabel 
{
	width: expression('9em');
}


/* ------------------------------------------------------------------------------- 
=Good Night and Good Luck
-------------------------------------------------------------------------------*/