@charset "UTF-8";
/*=====================================================================================+
| bscott_base.css - CSS for all B:SCOTT pages. All                                     |
|                   elements in this css are NOT                                       |
|                   resolution-dependent.                                              |
| Site Design by Tom O Scott, November 2009                                            |
| Updated:			June 15, 2011                                                      |
|					Revised CSS completely to scale to                                 |
|					popular viewport sizes below.                                      |
|                                                                                      |
| Viewport resolutions of popular devices                                              |
| Device Name					Width		Height                                     |
| =======================		=========	========                                   |
|                                                                                      |
| iPhone [portrait mode]		320			480                                        |
| iPhone [landscape]			480			320                                        |
| iPad [landscape]              980			768                                        |
| Common older laptop screen   1024			768                                        |
| Dell Latitude E6400 Laptop   1280			800                                        |
| HP Probook 4520 laptop	   1366			768		                                   |
| Macbook Pro 15" native res.  1440			900		                                   |
| Asus flat screen             1680 		1050                                       |
| Tom's Hanspree Monitor       1770         1120                                       |
| Acer H213H flatscreen        1920         1080                                       |
| HP LP2475W flatscreen        1920         1200                                       |
| Apple Cinema 27"             2560         1440                                       |
|                                                                                      |
| Note on iPhone resolution - you can change the css by adding an orientation query:   |
|                                                                                      |
| <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   |
| <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> |
|                                                                                      |
+======================================================================================*/
html {
   margin:0;
   padding:0;
}
body {
   	font-family: "FuturaBT-Light;", verdana, lucida, arial, helvetica, sans-serif;
    font-size: 75%;
    margin: 0;
    padding: 0;
}
#mainWrapper {
	margin: 0 auto;
	padding:0;
	text-align: left;
    width:100%;
    height:100%;
}
.FuturaBT-Light { 
	font-family: FuturaBT-Light;
	font-weight: normal;
	font-style: normal;
}
.FuturaBT-LightItalic { 
	font-family: FuturaBT-LightItalic;
	font-weight: normal;
	font-style: normal;
}
#bodyIndexPage {
	background-color:black ;
	color:white;
}
#bodySubPage {
	background-color:white ;
	color:black;
}
#bodySubPage2 {
	background-color:white ;
	color:black;
}

	@media all and (min-width: 200px) and (max-width: 589px) {
		body {  font-size: 38%;  
		}}
	@media all and (min-width: 590px) and (max-width: 789px) {
		body {	font-size: 45%;
		}}
    @media all and (min-width: 790px) and (max-width: 1013px) {
		body {	font-size: 60%;
		}}
	@media all and (min-width: 1014px) and (max-width: 1269px) {
		body {	font-size: 65%;
		}}
	@media all and (min-width: 1270px) and (max-width: 1349px) {
		body {	font-size: 70%; }
        #mainWrapper { width:1200px; height:800px; }       
		}
	@media all and (min-width: 1350px) and (max-width: 1429px) {
		body {	font-size: 78%;
		}}
	@media all and (min-width: 1430px) and (max-width: 1679px) {
		body {	font-size: 86%;
		}}
	@media all and (min-width: 1680px) and (max-width: 2500px) {
		body {	font-size: 100%;
		}}

body noscript p {
	background-color:#FFFF66;
	color:#CC0000;
	border:0.4em solid #66CCFF;
	position:absolute;
	z-index:100;
	left:35%;
	top:25%;	
	width:30%;
	height:15%;
	padding:1em;
	font-size:1.6em;
}

#pageWrapper,
#subPageWrapper {
	margin:0 auto;
	width:98%;
}
#pageWrapper {
	background-color:black;
	background-repeat: no-repeat;	
}
	@media all and (min-width: 200px) and (max-width: 789px) {
		#pageWrapper  {
			height: 320px;
			}}
	@media all and (min-width: 790px) and (max-width: 1013px) {
		#pageWrapper  {
			height: 700px;
			}}
	@media all and (min-width: 1014px) and (max-width: 1269px) {
		#pageWrapper  {
			height: 740px;
			}}
	@media all and (min-width: 1270px) and (max-width: 1429px) {
		#pageWrapper  {
			height: 740px;
			}}
	@media all and (min-width: 1430px) and (max-width: 1679px) {
		#pageWrapper  {
			height: 1000px;
			}}
	@media all and (min-width: 1680px) and (max-width: 1749px) {
		#pageWrapper  {
			height: 1000px;
			}}

#pageWrapper div.imgContainer {
	height: 98%;
	width:  40%;
}
#pageWrapper div.imgContainer img{
	margin:0 auto;
    text-align:center;
	height:100%;
}
#siteHomePage {
	background-color:black ;
	color:white;
}
#storeHomePage {
	color:white;
}

.homePage td{
    vertical-align:top;
}

table.homePage {
    width:99%;
    height:100%;
    border:0;
    table-layout:fixed;
}
td.homeImage {
    width:60% !important;
    height:100%;
    overflow:hidden;
}
td.homeImage img{
    max-width:99% !important;
}
td.mainMenu {
    width:40% !important;
    height:100%;
    text-align: right;
}
.mainMenu p {
    font-size:1.9em;
    margin:0 1em 0.8em 0.5em; 
    background-color:black;  
}
p.first {
    margin-top:3em;
}
.mainMenu a {
   text-decoration: none;
   padding:0.2em 0.5em;
}
.mainMenu a.menuItem {
   color:white;
}

.mainMenu a:hover {
	color: #202020;
	background: #888888;
}
.mainMenu a.announcement {
   font-family: 'Quattrocento Sans', sans-serif;
   text-transform: uppercase !important;
   color:white;
}
.mainMenu a.announcement:hover {
   color:#F0F0F0;
   background:#383838;
}

#subPageWrapper img.logo {
	float:left;
	border:0;
	height:5%;
    margin-top: 1em;
}
#subPageWrapper h1.pageTitle {
	float:left;
	margin:0.5em 0 0 3em;
	font-size:2em;
}
#subPageWrapper a.catalogLink {
	float:right;
	background-color:black;
	color:white;
	text-decoration:none;
	font-size:2em;
	padding:0.3em 0.6em;
	margin: 0.3em 5em 0 0;

}
#subPageWrapper a.catalogLink:hover {
	background-color:#888888;
	color:black;	
}
div.verticalSpacer {
	width:100%;
	height:1.5em;
	clear:both;
}
#subPageWrapper table {
	width:98%;
	border:0;	
}
#subPageWrapper td.media,
#subPageWrapper td.collection {
	width:49%;
	border:1px dotted #404040;	
	vertical-align:top;
	padding:0.3em;
	font-size:1.1em;
}
#subPageWrapper td.media {
	height:10em;   
}
#subPageWrapper td.collection {
    height:35%;
}
#subPageWrapper td.media a.thumb,
#subPageWrapper td.collection a.thumb {
	float:left;
	margin-right:1.2em;
	margin-bottom:1em;
}
#subPageWrapper td.media img {
	height:70%;
	float:left;
}
#subPageWrapper td.imgContainer {
    width: 40%!important;
    vertical-align:top;
}
#subPageWrapper td.collectionText {
    width: 57%!important;
    vertical-align:top;
}

#subPageWrapper td.imgContainer img {
    width: 95%!important;
    border:2px solid black;
}

#subPageWrapper td.collection h3.collectionHeader {
	font-size:1.3em;
    font-weight:bold;
    text-align:center;
    margin-bottom:0;
    margin-top:0;
}
#subPageWrapper p {
	width: 40em;
	font-size: 1.2em;
    margin-left:5em;
}
#subPageWrapper li {
	width: 40em;
	font-size: 1.2em;
    margin-left:8em;
}
#subPageWrapper td a.btnLink {
    padding: 0.1em 0.5em;
    float:left;
    margin:0.8em .5em 0.2em 0.5em;
    background-color:#585858;
    color:#E8E8E8;
    font-weight:bold;
    font-size:1em;
    text-align:center;
    text-decoration:none;
    border:1px solid black;
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -khtml-border-radius: 0.4em;
    border-radius: 0.4em;
}

/**=======================DEBUG MESSAGE BOXES =================**/
#pageWrapper div.debug {
	background-image:url(../images/debug/1760.jpg) ;
	font-family:"Lucida Console", "Courier New", monospace;
	position:absolute;
	left:235px;
	top:65px;
	z-index:100;
	width: 500px;;
	height: 80px;
	background-color:#FFFFCC;
	color:#0099CC;
	border:4px solid #CC0000;
	font-size:0.9em;
	padding:0 4px;
}
#subPageWrapper div.debug {
	background-image:url(../images/debug/1760.jpg) ;
	font-family:"Lucida Console", "Courier New", monospace;
	position:absolute;
	left:80px;
	top:320px;
	z-index:100;
	width: 500px;;
	height: 80px;
	background-color:#FFFFCC;
	color:#0099CC;
	border:4px solid #CC0000;
	font-size:0.9em;
	padding:0 4px;
}
/**=================== END DEBUG MESSAGE BOXES ================**/

/**========================== GALLERY CSS =====================**/
#logo {
	border:0;
	float:left;
}
#logo a {
	text-decoration:none;
}
#collectionData {
	float:left;
}
#galleryContainer{
	width:100%;
}
#hoverContainer {
	width:98%;
	height:72%;
}
#thumbBox {
	border:0;
	padding-top:5px;
}

#thumbBox img {
	float:left;
	padding:1px;
}
#thumbBox img:hover {
	border: 1px solid #D90000;
}

#splashBox {
	height:100%;
	z-index:1;
}
#splashBox img {
	height:100%;
	border:0;
}


#hoverbox{
	position: relative;
	width:95%;
	height:70%;
	float:left;
	z-index:100;
	margin-top:2em;
}
#hoverbox img {
	float:left;
	border:1px solid black;
}
#hoverbox img.gallery {
    max-width:65%;
}

#hoverbox b {
	font-weight:bold;	
}

#hoverbox p {
	float:left;
	margin:0 0 2em 0;
}
/**====================== END GALLERY CSS =====================**/

/**==================== CSS FOR SUB PAGES =====================**/
#videoContainer,
#storeContainer {
	width:98%;
}
#storeContainer p.intro {
	width: 70%;
	font-size:1.2em;
    margin-left:0.2em;
}
#storeContainer .regionNav{
    margin: 0; 
    width:100%;  
}

#storeContainer a.region {
    padding:0.1em 0.3em;
    background: #606060 ;
    color:white;
    font-weight: bold;
    text-decoration:none;
    border:2px solid black;
    margin-right:1em;
    font-size:0.9em!important;
    float:left;
}
#storeContainer .storeName {
    font-size: 1em;
    font-weight:normal;
    text-transform: uppercase;
    margin-right:2em;
    text-decoration:none;
    color:black;
}
#storeContainer .storeAddress {
    font-size: 0.9em;
}
#storeContainer p.storeEntry {
    width: 100%;
    margin: 0.1em 0 0.1em 2em;

}
div.regionContainer,
div.pressContainer,
div.videoContainer,
div.textImageContainer {
	width:95%;
    margin-bottom:3em;
}
div.regionContainer table {
	width:98%;
	margin-bottom:2em;
}
div.regionContainer td.store {
	max-width:18%;	
	min-height:15%;
	border:1px dotted black;
	margin:1px;
	padding:0.5em;
	background-color:#E0E0E0;
	color:#282828;	
	vertical-align:top;	
}
div.regionContainer td.empty {
	width:15%;	
	min-height:15%;
	border:0;
	margin:1px;
	padding:0.5em;
}
div.regionContainer td img{
	max-height:6em;
	padding-top:0.1em;
}
div.regionContainer td img.smallLogo{
	max-width:85%;
}
.regionHeader {
	width:50%;
}
.regionHeader h2 {
	float:left;
	font-size:1.4em;
}
.regionHeader a.backToTop {
	float:left;
}
.regionHeader a.backToTop2 {
	float:left;
    margin-left: 3em;
    margin-top:1.8em;
    text-decoration: none;
    color:black;
    font-size:0.8em;
}

.regionHeader img {
	border:1px solid black;
	height:2em;
	width:2em;
	margin:1em 0 0 3em;
}
div.pressBox {
	width: 32%;
	border:1px solid #888ea4;
	float:left;
}
div.pressBox img {
	float:left;
	border:1px dotted #989898;
}
div.videoBox {
	width:80%;
    height:50%;
	border:1px solid #888ea4;
	float:left;
    margin: 0 0 1em 2em;
}
div.videoBox h2 {
    font-size:1.5em;
    text-align:center;
}
div.videoBox p {
    margin:0 2em 1em 1em !important;
    font-size:1em;
    width:90% !important;
}
div.flowPlayerBox {
	display:block;
    width: 96% !important;
    margin-left:1em;
    margin-bottom:1em;
}
div.flowPlayerBox img {
    width: 87% !important;
    height: 90% !important;
    margin-left:1em;
}
div.embeddedVideo {
	margin:0 auto;
    min-height: 50%;
}
div.textImageContainer p {
	float:left;
	width:50%;
    margin-top: 2em;
    font-size:1.4em;
}
div.textImageContainer img {
	float:left;
	width:20%;
	border:0;
	margin:2%;
}
/**==================== CSS FOR CONTACT FORM =====================**/
#contactImage {
    float: left;
   	max-width:20%;
	border:0;
	margin:2%;
}
#subPageWrapper p.contact {
    width:15em;
    float:left;
}
#contactForm {
    width:43%;  
    font-size:1.2em;
    float:left;
}
#contactForm fieldset {   
    border:2px solid #336699;
    background-color:#D8D8D8;
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -khtml-border-radius: 0.4em;
    border-radius: 0.4em;
}
#contactForm td.label{
    width:26%;
    font-size:1em;
    vertical-align:top;
}	
#contactForm input.em11{
    width:11em;
    font-size:1em;
}
#contactForm input.em15{
    width:15em;
    font-size:1em;
}

#contactForm input.em20{
    width:20em;
    font-size:1em;
}
#contactForm span.radioOption{
    margin-right: 2em;
    margin-left:0.5em;
}
#contactForm .instruction {
    font-size:0.8em;
    font-style:italic;   
}
#contactForm select{
    margin:0;
    padding:0;
    font-size:1em;
}
#contactForm textarea{
    font-family: sans-serif;
    margin:0;
    padding:0;
    font-size:1em;
    width:23em;
    height:6em;
    padding:0.2em 0.3em;
    border:0.1em solid black;
}
#contactForm legend{
    color:#E8E8E8;
    background-color:#404040 ;
    font-size:1.2em;
    padding:0.1em 0.3em;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    -khtml-border-radius: 0.2em;
    border-radius: 0.2em;
}	
#contactForm button{
    color:black;
    background-color:#A8A8A8 ;
    font-weight:bold;
    font-size:1em;
    padding:0.3em 0.6em;
    cursor:pointer;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    -khtml-border-radius: 0.2em;
    border-radius: 0.2em;
    text-shadow: 0 1px 1px #000000;
}	

/*========================= MISCELLANEOUS =============================*/
.inlineLink {
    padding:0 0.5em;
    background: #606060 ;
    color:white;
    font-weight: bold;
    text-decoration:none;
}


/*********************************************************
**             DROPDOWN MENU CSS                        **
*********************************************************/
.nav{
    text-align:center !important;
	list-style:none;
	font-weight:bold;
	width:100%;
    z-index:99 !important;
    margin-top:0;
    padding:0;
}
.nav li{
    width:16.6%;
    margin:0;
	float:left;
	margin-left:0;
    position:relative;
}
.nav a{
	display:block;
	padding:0.4em;
	color:white;
	background:black;
	text-decoration:none !important;
}
.nav a:hover{
    color:black;
	background:#D8D8D8 !important;
	text-decoration:none !important;
    border:1px solid black;
}
.nav li ul li {
    width:100%;
    margin:0 auto;
}
.nav li ul li a {
    font-size:0.8em !important;
    text-transform: uppercase !important;
}

/*--- DROPDOWN ---*/
.nav ul{
	background:black;                  /* make IE7 work properly  */
	background:rgba(255,255,255,0);    /* background transparent  */
	list-style:none;
	position:absolute;
	left:-9999px;                      /* Hide off-screen when not needed  */
    border-top:3px solid black;
    z-index: 99;
    padding-left:0;
    padding-right:0.4em;
}
.nav ul li{
	padding-top:0; 
	float:none;
}
.nav ul a{
	white-space:nowrap; 
}

.nav li:hover ul{ 
    left:0;
    width:100%;
}

.nav li:hover a{ 
	background:black;
	text-decoration:none;
}
.nav li:hover ul li a:hover{ 
	background:#333;
}
.nav input {
    margin-top: 0.3em;
    margin-bottom:0;
}
/******************************** END DROP DOWN MENU CSS *************************/