/*  

Description: Syle for the smart shopping montreal site
$Revision: 1.29 $
Author: Brandon Posner

*/

body, p, h1, h2, h3, h4, div{
  margin: 0;
  padding: 0;
}

p{
  margin-top: 1em;
}

body {
  background-color:#FFFFFF;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
}

a {
  font-size:12px;
  color:#EF8721;
  text-decoration:none;
}
	
a:hover {
  font-size:12px;
  color:#D6681E;
  text-decoration:underline;
}


#main { 
  width:850px;
  border-left:1px solid #000000;
  border-right:1px solid #000000;
  margin-left:auto;
  margin-right:auto;
  background: url("../img/SSMbannerTop.jpg") no-repeat;

  overflow:hidden;
}

.maincolumn {
	float:left;
}

#rightcolumn {
	width:695px;
}

#leftsidebar {
	width: 150px;
	padding-top: 65px;
}

#leftsidebar .item {
  margin-top: 5px;
  margin-bottom: 5px;
}

#leftsidebar form{
  text-align:center;
  margin:5px;
}

#departments {
    text-align:right;
    margin-bottom:80px;
}

.dept {
    position:relative;
    padding:4px;
}

.dept a {
    font-weight:bold;
    font-size:13px;
    color: black;
}

.dept a:hover {
    color:#EF8721;
}

#d1 { left:70px; }
#d2 { left:55px; }
#d3 { left:40px; }
#d4 { left:25px; }
#d5 { left:15px; }
#d6 { left:10px; }
#d7 { left:5px; }
#d8 { left:0px; }
#d9 { left:0px; }

#sidemenu h2 {
  background:url("../img/navbar_header.jpg") no-repeat;
  width:150px;
  height:22px;
  font-family:Arial, Helvetica, sans-serif;
  color:#000000;
  text-align: center;
  font-size:12px;
  font-weight: bold;
  padding: 2px 0 0 0;
  margin:20px 0 0 0;
}

#sidemenu {
  list-style:none;
  padding:0;
  margin:0;
}

#sidemenu ul{
  margin-bottom: 10px;
}

.sideimage {
    text-align:center;
    margin: 5px;
}

#feature {
    border:solid black;
    border-width:1px 1px 1px 0;
    text-align:center;
    margin-bottom: 10px;
}

#feature span {
    color:#EF8721;
    font-size:20px;
    font-weight:bolder;
}

#feature span.fr {
    font-size:16px;
}

#content {
	padding-left:30px;
	padding-right:20px;

}

#footer {
	clear:both;
	background: url("../img/SSMfooter.jpg") bottom no-repeat;
    margin-top:1em;
    padding-top:10px;
    padding-bottom: 55px;
}

#topstuff {
  padding-top: 148px;
  padding-right: 5px;
  text-align: right;
  font-size: 10px;
}

#topmenu {
  margin-top: 10px;
  font-size:12px;
  color:#CCCCCC;
  font-weight:bold;
}

#topmenu a{
  font-size:12px;
  color:#000000;
  font-weight:normal;
}

#topmenu a:hover{
  font-size: 12px;
  color: #EF8721;
  font-weight: normal;
  text-decoration: none;
}

#maintitle h1 {
    display:inline;
    font-size:16px;
    color:#EF8721;
    font-weight:bold;
}

#maintitle {
  border-bottom:1px solid #cccccc;
  padding-top: 30px;
  font-size:16px;
  font-weight:bold;
}

#maintitle a{
  color:#EF8721;
  font-size:18px;
}

#maintitle a:hover{
  color: #FFA500;
  font-size:18px;
  text-decoration:none;
}

#maintitle span {
  padding-left: 1em;
  font-size:10px;
  color: gray;
}


#lang {
  text-align:right;
  padding: 5px;
}

#lang a {
  color:black;
  font-weight:bold;
  font-size: 14px
}

#siteindex{
  clear:both;
  text-align: center;
  margin: 20px auto 0 auto;
  padding:3px;
  width: 75%;
  border: 1px solid #999999;
  border-width:1px 0;
}

#siteindex a {
  color: black;
  font-size:10px;
}

#siteindex a:hover{
    color:#EF8721;
}

#message {
    position:absolute;
    left:50%;
    margin-left:-150px;
    top:50%;
    margin-top:-200px;
    border: 2px solid black;
    background: white;
    width:300px;
}

#message .title {
    text-align:center;
    background:yellow;
    font-size:16px;
    font-weight:bold;
    padding:3px;
}

#message .body {
    padding: 15px;
}

#message .button {
    text-align:center;
    margin-bottom:10px;
}

/************* Index **************/

.index {
    width: 70%;
}

.index h2 {
    font-size:14px;
    font-weight:bold;
    color:#EF8721;
    border-bottom:1px solid #cccccc;
    margin:0;
    padding-top:1em;
}

.index ul {
    list-style-image: url("../img/arrow.jpg");
    padding-left:25px;
    margin:0;
}

.index li {
    font-size:13px;
}

.index li a{
    color:#000000;
}

.index li a:hover{
    color:#EF8721;
    text-decoration:none;
}

.department{
    font-size:20px;
    color:#999999;
    border-bottom: 2px solid #cccccc;
    margin:50px 0 0 0;
    width:85%;
}

h3 {
    font-size:14px;
    color:#999999;
}

a img {
    border:0;
}

.indexintro {
	border: 2px solid #AAA;
	background: #fee085;
	padding: 3px;
	width:80%;
	margin: 1em auto;
}

/************* Store **************/

#address {
    font-size:10px;
}

#store {
    margin-top: 30px;
}

#photoarea {
    float:right;
    margin-left:10px;
    margin-bottom: 20px;
}

#photoarea p {
    margin-top:3px;
    text-align:center;
    font-size:10px;
}

#photobox {
    width:250px;
    height:300px;
    border:1px solid black;
}

#store table {
    clear:both;
    background:#F2F2F2;
    padding:0;
    border:1px solid #CCCCCC;
    border-collapse:collapse;
    width:100%;
    margin: 20px 0;
}

#store table td, #store table th {
    border:1px solid #ccc;

}

#map {
    width:100%;
    height:500px;
    border: 1px solid black;
}

.photo {
    position:absolute;
}

#customHTML {
    clear:both;
    margin-top:20px;
}

/************* Q&A **************/
#qahead {
    font-size:16px;
    font-weight:bold;
    margin-bottom:40px;
}

h2.qadep a {
    color: #EF8721;
    font-size: 18px;
    font-weight:bold;
}

h2.qadep a {
    text-decoration:none;
    color:#EF8721;
}

.question span {
    font-weight:bold;
}

.qdata {
    font-size:10px;
    color:#666;
    margin:0;
}

.answer {
    margin-bottom:30px;
}
.answer span {
    font-style:italic;
    color:#A43804;
}


/************* PAGES **************/

#buythebook {
	padding-top: 20px;
}

#buythebook p {
	margin: 0 0 1em 0;
}

#buythebook hr {
	margin: 20px 0;
}


/************* Hire **************/

#hireForm {
    width: 270px;
    margin: 20px auto;
    border:1px solid black;
    background:#ffe956;
}

#hireForm .formrow {
    margin: 10px 0;
}

#hireForm .formrow div{
    width:100px;
    float:left;
    text-align:right;
    margin-right:10px;
}

#hireForm .formrow input {
    width:150px;
}

#hireForm .centerrow {
    text-align:center;
    margin: 10px 0;
}

/* Search */

#searchresults {
    margin-top: 5px;
}

#searchresults .gs-result .gs-title, .gs-result .gs-title * {
    color:#EF8721;
}

#searchresults .gs-result .gs-visibleUrl-short {
    display:none;
}

#searchresults .gs-result .gs-visibleUrl-long {
    color:#777777;
    display:block;
}

#searchresults .gsc-branding {
    display:none;
}

#searchresults .gsc-tabsArea {
    display:none;
}

/* LIGHTBOX */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../img/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../img/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }