﻿
/*	===============================================================
	© 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: 0px;
    left: 34px; 
    width: 386px;
    height: 70px;
}

#logoarea h1 { border: none; margin: 0px; padding: 0px; }

#logoarea h1 a { 
    width:		413px;
    height:		100px;
    background: url('../images/global/ISArabiaLogoTrans.png') no-repeat;
    position:	absolute;
    top:		15px;
    left:		10px;
	padding-top: 100px;
	height:		0;
	height:		0;
	overflow:	hidden;
}



#logo { border: none; margin: 0px; padding: 0px; }
#logo a {
    width: 413px;
    height: 47px;
    background: url('../images/global/ISArabiaLogoTrans.jpg') no-repeat;
    position: absolute;
    top: 43px;
    left: 4px;
	padding-top: 47px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}

/*	---------------------------------------------------------------
	#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: 155px;
    height: 168px; 
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    position: absolute;
    top: -33px;
    right: 15px;
}



/* 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: 20px auto 0px auto;
    width: 760px;
    height: 250px;
    /*background: url('../images/straps/strap-home1.jpg') no-repeat;*/
}

#strap-home {
    width: 760px;
    height: 260px;
	margin: 0px 0px 0px 20px;
	padding: 283px 0px 0px 0px;
	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-strap { border: none; background: url('../images/straps/HomeStrap.gif') no-repeat; 
              width: 780px; height:	100px; padding-top: 100px; height: 0; height: 0;
	          overflow:	hidden; display: block; }

#more-clients { float: right; margin-right: 3px; font-family: Arial;}
#more-clients a { font-style: italic; text-decoration: none; color: #a35245;}

#home-track-of-week { border: none; margin: 0px 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: 0px 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;
}


#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: 485px !important; }
.Home #content-text { width: 525px !important; }
.extend { width: 525px !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: 780px;
    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: 71px;
    height: auto !important;
    height: 71px;
    padding: 10px 0px 10px 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; }






.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/navigation.gif') no-repeat; }

#nav-home a { width: 81px; }
#nav-home a:hover { width: 81px; background-position: -295px 0px; }
#nav-home a.on { width: 81px; background-position: -295px -19px; }

#nav-about-us a { width: 95px; }
#nav-about-us a:hover { width: 95px; background-position: 0px 0px; }
#nav-about-us a.on { width: 95px; background-position: 0px -19px; }

#nav-services a { width: 95px; }
#nav-services a:hover { width: 95px; background-position: -95px 0px; }
#nav-services a.on { width: 95px; background-position: -95px -19px; }

/*#nav-case-studies a { width: 98px; }
#nav-case-studies a:hover { width: 98px; background-position: -152px 0px; }
#nav-case-studies a.on { width: 98px; background-position: -152px -19px; }*/

#nav-news a { width: 105px; }
#nav-news a:hover { width: 105px; background-position: -190px 0px; }
#nav-news a.on { width: 105px; background-position: -190px -19px; }



#nav-international a { width: 125px; }
#nav-international a:hover { width: 125px; background-position: -377px 0px; }
#nav-international a.on { width: 125px; background-position: -377px -19px; }

#nav-contact-us a { width: 110px; }
#nav-contact-us a:hover { width: 110px; background-position: -502px -0px; }
#nav-contact-us a.on { width: 110px; background-position: -502px -19px; }

#nav-register a { width: 140px; margin-right: 0px; }
#nav-register a:hover { width: 140px; background-position: -612px 0px; margin-right: 0px; }
#nav-register a.on { width: 140px; background-position: -612px -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;
}

.Home #subnav-bar { background: url('../images/pageimages/headphones.gif') no-repeat left bottom;}
.AboutUs #subnav-bar { background: url('../images/pageimages/headphones.gif') no-repeat left bottom;}
.CaseStudies #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 ;}
.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 ;}
.Services #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: 25px 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: 8px;
    left: 44px; 
    width: 390px;
    height: 100px;
}

#logoAreaSiteMap h1 { border: none; margin: 0px; padding: 0px; }

#logoAreaSiteMap h1 a { 
    width: 390px;
    height: 100px;
    background: url('../images/global/ISArabiaLogoTrans.png') no-repeat;
    position: absolute;
    top: 7px;
    left: 0px;
	padding-top: 100px;
	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; }
