﻿
/*	===============================================================
	© Imagesound
	http://www.imagesound.com/	

	Type:				Structural Styles
	Build by:			TDG Integrated
	Document Author:	James Lester
	Author Email:		j.lester@tdgintegrated.com
	Creation Date:		10th March 2008
	---------------------------------------------------------------
	Version number: 	1.0
	Last edited:		NA - Still in developement
	============================================================ */


/*	===============================================================
	DOCUMENT CONTENTS
	
	1.	Global settings
	2.	Positioning & Structure rules
	3.	Primary navigation
	4.	Secondary Navigation
    5.	Sidebar
	6.	Footer
    7.	Hidden Elements (print only elements)
	------------------------------------------------------------ */
	
	
/*	---------------------------------------------------------------
	#1 GLOBAL SETTINGS
	---------------------------------------------------------------
	these are mostly font sizing and positional issues
	------------------------------------------------------------ */

body { margin: 0px 0px 0px 0px; background: #f2f2f2; }


#logoarea {  position: absolute; top: 43px; left: 34px; width: 386px; height: 47px; }
#logoarea h1 { border: none; margin: 0px; padding: 0px; }

#logoarea h1 a { 
    width: 383px;
    height: 47px;
    background: url('../images/global/imagesound-logo.gif') no-repeat;
    position: absolute;
    top: 43px;
    left: 34px;
	padding-top: 47px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}

#logo { border: none; margin: 0px; padding: 0px; }
#logo a {
    width: 383px;
    height: 47px;
    background: url('../images/global/imagesound-logo.gif') no-repeat;
    position: absolute;
    top: 43px;
    left: 34px;
	padding-top: 47px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}

#socialarea { position: relative; /*top: 48px;*/ left: 650px; width: 120px; margin-bottom: 5px; }
#socialarea a { padding: 0px 5px 0px 5px; border: none; outline: none; }
#socialarea a img { border: none; }


/*	---------------------------------------------------------------
	#2 POSITIONING & STRUCTURE RULES
	---------------------------------------------------------------
	Outlines the main structure of the website
	------------------------------------------------------------ */

#imagesound-shell {
    display: block; 
    margin: 0px auto 0px auto;
    width: 100%;
    min-height: 433px;
    height: auto !important;
    height: 433px;   
    background: #ffffff;
    padding-bottom: 19px;
}




/* The Topbar Elements */
#topbar-shell {
    display: block; 
    margin: 0px auto 0px auto;
    width: 768px;
    min-height: 33px;
    height: auto !important;
    height: 33px;
}

#topbar {
    display: block; 
    margin: 0px 0px 0px 0px;
    width: 748px;
    position: relative;
    min-height: 27px;
    height: auto !important;
    height: 27px; 
    background: #e7e7e8 url(../images/global/header-bar.gif) no-repeat bottom left;
    padding: 6px 0px 0px 20px;
    font-weight: bold;
}

#mediaplayer {
	vertical-align: top;
    width:			318px;
    min-height:		32px;
    height:			32px; 
    padding:		0px 0px 0px 0px;
    margin:			0px 0px 0px 0px;
    position:		absolute;
    top:			-33px;
    right:			15px;
    background:		#e7e7e8 url(../Images/Functionality/background/WebRadioPlayerLink.jpg) no-repeat bottom left;
}



/* The Logobar Elements */
#logobar {
    display: block; 
    position: relative;
    margin: 0px auto 0px auto;
    width: 800px;
    height: 135px; 
    background: #ffffff;
}



/* The Main HomePage Strap Image */
#strap-shell-home {
    display: block; 
    margin: 6px auto 0px auto;
    width: 760px;
    height: 283px;
    background: url('../images/straps/strap-home1.jpg') no-repeat;
}

#strap-home {
    width: 760px;
    height: 283px;
	margin: 0px 0px 0px 20px;
	padding: 283px 0px 0px 0px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden; 
	position: relative; 
	text-indent: -999999px; 
}

.strap-home {
    width: 760px;
    height: 283px;
	margin: 0px 0px 0px 20px;
}



/* The Page Content Area */

/* Old Upgrade Offer 
#upgrade-offer { border: none; margin: 0px 0px 0px 38px; padding: 0px; float: left; }
#upgrade-offer a {
    width: 287px;
    height: 71px;
    background: Transparent url(../images/global/upgrade-offer.gif) no-repeat;
	padding-top: 71px;
	height:0;
	height:0;
	overflow: hidden;
    display: block;
} 
*/

#upgrade-offer { border: none; margin: 0px 0px 0px 42px; padding: 0px; float: left; }
#upgrade-offer a {
    width: 312px;
    height: 110px;
    background: url('../images/global/Music_Ears_TrackOfWeek.pdn') no-repeat;
	padding-top: 110px;
	height: 0;
	height: 0;
	overflow: hidden;
    display: block;
}

#home-track-of-week { border: none; margin: 20px 20px 0px 0px; padding: 0px; float: right; }
#home-track-of-week a {
    width:		312px;
    height:		110px;
    background: url('../images/global/Music_Ears_TrackOfWeek.png') no-repeat;
	padding-top: 110px;
	height:		0;
	height:		0;
	overflow:	hidden;
    display:	block;
}

#home-dlp-website { border: none; margin: 15px 20px 0px 0px; padding: 0px; float: right; }
#home-dlp-website a {
    width:		312px;
    height:		110px;
    background: url('../images/global/HomeButton_DLP.png') no-repeat;
	padding-top: 110px;
	height:		0;
	height:		0;
	overflow:	hidden;
    display:	block;
}

#home-buy-online { border: none; margin: 35px 75px 0px 0px; padding: 0px; float: right; }
#home-buy-online a {
    width:		200px;
    height:		74px;
    background: url('../images/Functionality/buttons/plates/BuyOnlineRecord.png') no-repeat;
	padding-top: 74px;
	height:		0;
	height:		0;
	overflow:	hidden;
    display:	block;
}

#home-retail-trust{ border: none; margin: 10px 20px 0px 0px; padding: 0px; float: right; }
#home-retail-trust a {
    width:		312px;
    height:		110px;
    background: url('../images/Functionality/buttons/plates/HomeButton-RetailWeek.png') no-repeat;
	padding-top: 110px;
	height:		0;
	height:		0;
	overflow:	hidden;
    display:	block;
}

#home-Cornbury-2011{ border: none; margin: 10px 20px 0px 0px; padding: 0px; float: right; }
#home-Cornbury-2011 a {
    width:		312px;
    height:		110px;
    background: url('../images/Functionality/buttons/plates/HomeButton_CN_CornburyFestival2011.png') no-repeat;
	padding-top: 110px;
	height:		0;
	height:		0;
	overflow:	hidden;
    display:	block;
}

#home-christmas-ecard{ border: none; margin: 10px 20px 0px 0px; padding: 0px; float: right; }
#home-christmas-ecard a {
    width:		312px;
    height:		110px;
    background: url('../images/Functionality/buttons/plates/HomeButton_HappyChristmas.png') no-repeat;
	padding-top: 110px;
	height:		0;
	height:		0;
	overflow:	hidden;
    display:	block;
}

#content-shell {
    display: block; 
    margin: 0px auto 0px auto;
    width: 800px;
    min-height: 10px;
    height: auto !important;
    height: 10px;
}

#content-text {
    display: block; 
    float: left;
    margin: 30px 0px 0px 21px;
    width: 356px;
    min-height: 10px;
    height: auto !important;
    height: 10px;
}
.International #content-text { width: 608px !important; }
.Home #content-text { width: 525px !important; }
.extend { width: 525px !important; } 
.extendFull { width: 615px !important; } 
.extendFullIncLeftNav { width: 758px !important; } 

#content-shell-home {
    display: block; 
    margin: 30px auto 0px auto;
    width: 800px;
    min-height: 10px;
    height: auto !important;
    height: 10px;
}

#content-home-text {
    display: block; 
    float: left;
    margin: 0px 0px 0px 31px;
    width: 400px;
    min-height: 10px;
    height: auto !important;
    height: 10px;
}

#content-home-text a {}
*html #content-home-text { margin: 0px 0px 0px 15px; }




/* Page Images */

.page-image {
    display: block;
    width: 233px;
    height: 313px;
    margin-top: 6px; 
}

#img-services { background: url('../images/mainimage/mainimage-services.jpg') no-repeat; }




/* International Section Page Boxes */

.intbox { display: block; min-height: 95px; height: auto !important; height: 95px;
          padding:  5px 0px 5px 0px; border-bottom: 1px solid #d7d7d8; }

.intbox ul { margin: 0px 0px 0px 14px; padding: 0px 0px 0px 0px; }
.intbox li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
.intbox img { float: right; margin-left: 30px; margin-top: 13px;  }
.intbox img.largeParagraph { margin-top: 31px;  }

.internationalText { width: 460px; text-align: justify;  }

.pdf-link {
    display: block;
    min-height: 18px;
    height: auto !important;
    height: 18px;
    padding: 4px 0px 0px 26px;
    margin-top: 4px;
    background: url('../images/pdf.gif') no-repeat;
}

.pp-link {
    display: block;
    min-height: 18px;
    height: auto !important;
    height: 18px;
    padding: 4px 0px 0px 26px;
    margin-top: 4px;
    background: url('../images/powerpoint.gif') no-repeat;
}



/*	---------------------------------------------------------------
	#3 PRIMARY NAVIGATION
	---------------------------------------------------------------
	Outlines the primary navigational elements of the website
	------------------------------------------------------------ */

#navbar-shell {
    display: block; 
    margin: 0px auto 0px auto;
    width: 800px;
    min-height: 19px;
    height: auto !important;
    height: 19px;
}

#navbar {
    display: block; 
    margin-left: 20px;
    width: 758px;
    min-height: 19px;
    height: auto !important;
    height: 19px; 
    border: 1px solid #d7d7d8;
}

.navitem ul, .navitem li { margin: 0px; padding: 0px; list-style: none; }
.navitem li { float: left; }


.navitem a {
    float: left;
    min-height: 16px;
    height: auto !important;
    height: 16px;
    text-align: center;
    background: none;
    margin-right: 1px;
    padding-top: 3px;
}

.navitem a:hover, .navitem a.on { background: url('../images/navigation/NavigationBar.png') no-repeat; }

#nav-home a { width: 85px; } 
#nav-home a:hover { width: 85px; background-position: -97px 0px; } /* Was 75px and -76px */
#nav-home a.on { width: 85px; background-position: -97px -19px; }

#nav-about-us a { width: 95px; }
#nav-about-us a:hover { width: 95px; background-position: 0px 0px; }/* Was 75px and 0px */
#nav-about-us a.on { width: 95px; background-position: 0px -19px; }

/*
#nav-services a { width: 75px; }
#nav-services a:hover { width: 75px; background-position: -76px 0px; }
#nav-services a.on { width: 75px; background-position: -76px -19px; }
*/

#nav-services a { width: 98px; }
#nav-services a:hover { width: 98px; background-position: -183px 0px; }/* Was 98px and -152px */
#nav-services a.on { width: 98px; background-position: -183px -19px; }

#nav-news a { width: 84px; }
#nav-news a:hover { width: 84px; background-position: -282px 0px; }/* Was 99px and -251px */
#nav-news a.on { width: 84px; background-position: -282px -19px; }

#nav-investors a { width: 81px; }
#nav-investors a:hover { width: 81px; background-position: -351px 0px; }/* Was 81px and -351px */
#nav-investors a.on { width: 81px; background-position: -351px -19px; }

#nav-international a { width: 125px; }
#nav-international a:hover { width: 125px; background-position: -449px 0px; }/* Was 102px and -433px */
#nav-international a.on { width: 125px; background-position: -449px -19px; }

#nav-contact-us a { width: 111px; }
#nav-contact-us a:hover { width: 111px; background-position: -574px -0px; }/* Was 91px and -536px */
#nav-contact-us a.on { width: 111px; background-position: -574px -19px; }

#nav-register a { width: 154px; margin-right: 0px; }
#nav-register a:hover { width: 154px; background-position: -686px 0px; margin-right: 0px; }/* Was 130px and -628px */
#nav-register a.on { width: 154px; background-position: -686px -19px; margin-right: 0px; }


/*	---------------------------------------------------------------
	#4 SECONDARY NAVIGATION
	---------------------------------------------------------------
	Outlines the secondary navigational elements of the website
	------------------------------------------------------------ */

#subnav-bar {
    display:		block; 
    float:			left;
    margin:			33px 0px 0px 20px;
    margin-left:	20px;
    width:          118px;
    min-height:		175px;
    height:			auto !important;
    height:			175px; 
    padding-bottom: 100px;
    position:		relative;
}


.AboutUs #subnav-bar { background: url('../images/pageimages/headphones.gif') no-repeat left bottom;}
.Services #subnav-bar { background: url('../images/pageimages/microphone.gif') no-repeat 12px bottom ;}
.ContactUs #subnav-bar { background: url('../images/pageimages/headphones.gif') no-repeat left bottom;}
.International #subnav-bar { background: url('../images/pageimages/microphone.gif') no-repeat 12px bottom;}
.Investors #subnav-bar { background: url('../images/pageimages/headphones.gif') no-repeat left bottom;}
.NewsAndViews #subnav-bar { background: url('../images/pageimages/microphone.gif') no-repeat 12px bottom;}
.Register #subnav-bar { background: url('../images/pageimages/microphone.gif') no-repeat 12px bottom ;}
.Home #subnav-bar { background: url('../images/pageimages/headphones.gif') no-repeat left bottom;}
.MediaPreview #subnav-bar { background: url('../images/pageimages/headphones.gif') no-repeat left bottom;}


/*	---------------------------------------------------------------
	#5 SIDEBAR
	---------------------------------------------------------------
	Outlines the footer elements of the website
	------------------------------------------------------------ */


#content-rightbar {
    display: block; 
    float: left;
    margin: 18px 0px 0px 25px;
    width: 253px;
    min-height: 10px;
    height: auto !important;
    height: 10px;
}

#content-rightbar img { margin: 0px 0px 17px 7px; }


#upgrade-offer-sidebar { border: none; margin: 0px 0px 0px 0px; padding: 0px; }
#upgrade-offer-sidebar a {
    width: 244px;
    height: 77px;
    background: url('../images/global/upgrade-offer-sidebar.gif') no-repeat;
	padding-top: 77px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
    display: block;
}


#sidebar-quote {
    width: 244px;
    min-height: 10px;
    height: auto !important;
    height: 10px;
    display: block;
}

/* Right Text Block Box (With Gradient Background)  */

#sidebar-box-block {
    width: 202px;
    min-height: 254px;
    height: auto !important;
    height: 254px;
    display: block;
    background: #e7e7e8 url(../images/global/sidebar-textblock.gif) no-repeat top;
    position: relative;
    padding: 16px 19px 20px 19px;
}

#sidebar-box-block-footer {
    width: 240px;
    height: 20px;
    display: block;
    background: #e7e7e8 url(../images/global/sidebar-textblock-footer.gif) no-repeat top;
    position: absolute;
    bottom: 0pc;
    left: 0px;
}




/* Left Hand Sidebar Image Blocks (with optional text/links  */

#left-img-block-microphone {
    display: block;
    min-height: 10px;
    height: auto !important;
    height: 10px;
    padding-top: 186px;
    background: url('../images/pageimages/microphone.gif') no-repeat 27px 80px;
    text-align: left;  
    padding-left: 10px;
}

#left-img-block-headphones {
    display: block;
    min-height: 10px;
    height: auto !important;
    height: 10px;
    padding-top: 186px;
    background: url('../images/pageimages/headphones.gif') no-repeat 27px 80px;
    text-align: left;  
    padding-left: 10px;
}






#login-block {
    display: block;
    min-height: 71px;
    height: auto !important;
    height: 71px;
    padding: 0px 0px 10px 0px; 
    border-bottom: 1px solid #d7d7d8;   
}

#lostpassword-block {
    display: block;
    min-height: 71px;
    height: auto !important;
    height: 71px;
    padding: 10px 0px 10px 0px; 
}



/* Image Gallery  */

#gallery-outer-block {
    position: relative;  
    width: 232px;
    height: 50px;
    display: block; 
    margin: 0px 0px 0px 6px;
}

#gallery-block {
    position: relative;  
    width: 182px;
    height: 50px;
    display: block; 
    margin: 0px auto 0px auto;
    overflow: hidden;
}
#gallery-outer-block a.leftarrow {
    width: 16px; 
    height: 15px; 
    display: block; 
    background: url('../images/arrow-left.gif') no-repeat; 
    position: absolute;
    top: 19px;
    left: 0px;
    padding-top: 15px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}
#gallery-outer-block a:hover.leftarrow { background: url('../images/arrow-left-on.gif') no-repeat;
}



#gallery-outer-block a.rightarrow {
    width: 16px; 
    height: 15px; 
    display: block; 
    background: url('../images/arrow-right.gif') no-repeat; 
    position: absolute;
    top: 19px;
    right: 0px;
    padding-top: 15px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}
#gallery-outer-block a:hover.rightarrow { background: url('../images/arrow-right-on.gif') no-repeat;
}


#scroller 
{
  min-width: 100px;
  width: auto !important;
  width: 100px; /* = width + margin left + margin right + padding*2 + border*2  from the content rule */
}


#gallery-block img { float: left; margin-right: 20px; cursor: pointer; }



.content {
  width: 200px;
  height: 200px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #EFEFEF;
  font-size: .8em;
}

.scrollNav, .scrollNav a:link, .scrollNav a:visited  {
  font-size: .8em;
  color:#00009C;
  font-weight: bold;
}


#scroller{
  width: 882px; /* = width + margin left + margin right from the content rule + border*2 from the container rule*/
}


/*	---------------------------------------------------------------
	#6 FOOTER
	---------------------------------------------------------------
	Outlines the footer elements of the website
	------------------------------------------------------------ */


#footer-shell {
    display: block; 
    margin: 5px auto 0px auto;
    width: 800px;
    min-height: 21px;
    height: auto !important;
    height: 21px; 
}

#footer {
    display: block; 
    margin-left: 20px;
    width: 734px;
    min-height: 16px;
    height: auto !important;
    padding: 5px 12px 0px 12px;
    height: 16px; 
    border: 1px solid #d7d7d8; 
}

#footer-grad {
    height: 43px;
    background: url('../images/global/page-background.gif') repeat-x;  
    text-align:  center;
    padding:	 10px 0px 0px 0px;
    font-family: Frutiger, Arial, Helvetica, sans-serif;
    font-size:	 1.0em;
    color:		 #808080;
}

/*	---------------------------------------------------------------
	#7 HIDDEN ELEMENTS
	---------------------------------------------------------------
	Outlines the footer elements of the website
	------------------------------------------------------------ */
.clearboth { clear: both; }
hr { display: none; }
#noborder { border: none !important; }

.formtag { display: block; width: 80px; margin-right: 5px; float: left; padding-top: 2px; }
.formbreak { display: block; height: 19px; padding: 0px; line-height: 0px; clear: left; }
.LeadImage250 { float: left; width: 270px; padding-bottom: 25px; }
.LeadImage150 { float: left; width: 170px; padding-bottom: 25px; }

#contactform { margin-top: 14px; }
.BoxGroup input { margin: 3px 6px 0px 0px !important; }
.floatright { float: right !important; }

.BoxGroup { float: left; text-transform: uppercase; }
.SubmitButton { float: right; margin: 10px 0px 0px 0px; }


.spacer { height: 9px; display: block; clear: both; }
.spacerSmall { height: 4px; display: block; clear: both; }
.spacerBig { height: 14px; display: block; }
.spacerNewLine { height: 0px; display: block; clear: both; }
.spacerMenuItemDescription { height: 8px; display: block; clear: both; }

.NoBorder { border: none !important; }


#logoAreaSiteMap {
    position: absolute;
    top: 43px;
    left: 34px; 
    width: 386px;
    height: 47px;
}

#logoAreaSiteMap h1 { border: none; margin: 0px; padding: 0px; }

#logoAreaSiteMap h1 a { 
    width: 383px;
    height: 47px;
    background: url('../images/global/imagesound-logo.gif') no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
	padding-top: 47px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}

#RetailWeekConferenceLink { border: none; margin: 0px auto 0px auto !important; text-align:center; }
#RetailWeekConferenceLink a {
    width: 350px;
    height: 65px;
    background: url('../images/mainimage/casestudies-and-news/RetailWeek/ButtonSquare.gif') no-repeat;
	padding-top: 65px;
	height: 0;
	height: 0;
	overflow: hidden;
    display: block;
}

/* News Item 18 */
.agenda{border-top:1px solid silver; border-right:1px solid silver; margin-bottom:20px}
.agenda td{border-bottom:1px solid silver; border-left:1px solid silver}

/* ------------------------------------------------------
	Dynamic Web Pages
---------------------------------------------------------*/
.formTag110 { display: block; width: 110px; margin-right: 0px; float: left; font-weight: bold;}

.formDataStyle { display: block; min-height: 15px; height: auto !important; text-align: left; }
.formData110 { display: block; margin-left: 111px; min-height: 15px; height: auto !important; text-align: left; /*float: left;*/}

/* MTOTWTracks.ascx */
.LeftListen { float: left; padding-right: 5px; }
.LeftListenFollowText { float: left; padding-top: 3px; }

#LiveChatSupport { float: right !important; padding-top: 0px !important; padding-right: 40px !important;}

/* Vine House */
.vineHouseBoxtop { border-top: 1px solid #d7d7d8; margin-top: 10px; }
.vineHouseBox { display: block;  min-height: 76px; height: auto !important; height: 76px; padding: 10px 0px 10px 0px;  border-bottom: 1px solid #d7d7d8; }
.vineHouseBox img { float: left; margin-right: 10px; border: none !important; }
.vineHouseBox p {  font-weight: bold; margin-top: 3px !important; margin-bottom: 8px !important; }
.vineHouseBox a {  font-weight: bold; text-transform: none !important; font-size: 1.2em !important; }

.vineHouseBox a.vineAndGreen { color: #2f3f25 !important;}
.vineHouseBox a.vineAndBottle { color: #958671 !important;}
.vineHouseBox a.vineAndIce { color: #a60053 !important;}
.vineHouseBox a.vineAndMatch { color: #a14a02 !important;}
.vineHouseBox a.vineAndCarvery { color: #93072b !important;}
.vineHouseBox a.vineAndCoffee { color: #6c580c !important;}

#ClientImages a { padding: 10px; margin-top: 10px;  }
#ClientImages a img { margin-top: 15px;  }
