/*///////////////////////*/
/* TITLES, LINKS & MORE  */
/*///////////////////////*/

/* Fixes vertical scrollbar for mozilla firefox */
html {
     overflow: -moz-scrollbars-vertical;
}

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px; 
	color:#333333;
	background: #DDDDDD url('img/bg.jpg') repeat;
}

input, form, textarea
h1, h2, h3, h4, h5, h6{
	margin:0; 
	padding:0;
}

img{
	margin:0px;
	padding:0px;
	border:0px;
	float:left;
	}

/* Valerie Lamontagne */
h1{
	text-transform:uppercase;
	font-size:22px;
	font-weight:lighter;
	margin-bottom:0px;
	margin-top:0px;
}
/* INDEX page's main nav links */
h2{
	font-size:14px;
	font-weight:bolder;
	border:none;
	margin-bottom:7px;
}

h2.trigger {height:43px; margin:0;}
h2.trigger a {display: block;}
h2.trigger a:hover {}
h2.active {}
.toggle_container {overflow: hidden; clear: both;}
.toggle_container .block {}
/* Used for titles within sections of INDEX */
h3{
	text-transform:uppercase;
	margin-bottom:3px;
	margin-top:13px;
	font-size:10px;
	font-weight:bold;
	color:#333;
	border:none;
}
/* used mainly for titles of the ART template */
h4{
	color:#333333;
	font-size:20px;
	font-weight:bolder;
	margin-bottom: 20px;
}

h5{
	color:#333333;
	margin-bottom:10px;
	font-size:10px;
	font-weight:normal;
}

ul{
	margin-left:0px;
	padding-left:0px;
}
/* Default link properties when undefined within divs */
a:link{
	text-decoration:none;
	color:#333333;
	border:none;
}

a:visited{
	text-decoration:none;
	color:#333333;
	border:none;
}

a:hover{
	text-decoration:none;
	color:#EBA184;
	border:none;
}

/*///////////////////////*/
/* MAIN INDEX STYLESHEET */
/*///////////////////////*/

/* Sets width, background and margin of main container */
#container{
	margin:0px auto;
	width:775px;
	background: #FFFFFF url('img/top2.jpg') no-repeat;
	padding: 20px 50px 50px 50px;
	height:auto;
}
#logo{
	padding-left:500px;
	height:200px;
	width:250px;
}
/* Sections */
div.section {
	background:#FFFFFF;
	font-size:10px;
	display:none;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:20px;
	float:left;
	width:530px; 
}
/* Inside of sections */
div.section span{
	margin:0px;
	padding:0px;
	border:0px;
	background:#FFFFFF;
	float:left;
}
div.section_title a{
	color:#EBA184;
}

div.section_title a:hover{
	color:#333333;
}

#about{
	font-size:10px;
}

#about a{
	color:#333333;
}

#about a:hover{
	color:#EBA184;
}

#about.position_contact{
	float:left;
	width:168px;
}
#about.profile{
	float:left;
	width:337px;
	margin-left:10px;
}
#about span{
	font-weight:bold;
}
#news span{
	font-weight:bold;
}
.date{

}

#news a{
	color:#333333;
}

#news a:hover{
	color:#EBA184;
}
/* Div property that makes little dotted lines separating the curatorial and art featured items */
.separation{
	width:100%;
	height:1px;
	border-bottom:1px dotted #333333;
	padding:0px;
}	
/* art main properties */
#art{
	margin-top: 20px;
	margin-bottom:10px;
	width:525px;
}
/* image class */
#art.img{
	width:168px;
	height:140px;
	float:left;
	border:none;
}
/* art text properties */
#art.text{
	margin-left:10px;
	float:left;
	width:345px;
	border:none;
	font-size:10px;
	margin-top:16px;
}
/* adding more space between the title and the text in the art section */
#art p{
	margin-top:20px;
}
/* art title */
#art.text span{
	font-size:10px;
	font-weight:bold;
}

#art a{
	color:#333333;
}

#art a:hover{
	color:#EBA184;
}

/* Link color */
#art_other a{
	color:#333333;
	
}
/* Link color when hover */
#art_other a:hover{
	color:#EBA184;
	
}
/* Curatorial section main properties */
#curatorial{
	margin-top: 10px;
	margin-bottom:10px;
	width:525px;
}
/* Curatorial image, height is smaller than with art */
#curatorial.img{
	width:168px;
	height:50px;
	float:left;
	border:none;
}
/* Curatorial text */
#curatorial.text{
	margin-left:10px;
	float:left;
	width:345px;
	border:none;
	font-size:10px;
	margin-top:6px;
	font-size:10px; 
	color:#333333;
	font-weight:normal;
}

#curatorial p{
	margin-top:20px;
}

#curatorial span{
	font-weight:bold;
}
/* Curatorial link */
#curatorial a{
	color:#333333;
}
/* Curatorial link hover */
#curatorial a:hover{
	color:#EBA184;	
}
/* This is for if there are other curatorial items added, note that the code needs to be uncommented in index.php to activate this code */
#curatorial_other a{
	color:#333333;
}
/* Curatorial more items link hover */
#curatorial_other a:hover{
	color:#EBA184;
}
/* This is for the images that are sliced on INDEX.php */
div.section_img{
	float:left; 
	width:525px;
	color:#FFFFFF; 
	font-size:13px; 
	display:block;
	padding: 0px;
	margin:0px;
	border:0px;
	background:#FFFFFF;
	}
/* This is for the titles who are moved on INDEX.php */
div.section_title{
	float:left; 
	width:235px;
	height:50px;
	padding-left:15px;
	display:block;
	padding-bottom: 0px;
	padding-top:0px;
	margin:0px;
	border:0px;
	background:#FFFFFF;
	line-height:1.2em;
}
/* Copyright */
#copy {
	margin:auto;
	width:875px;
	color:#FFFFFF;
	font-size:10px;
	padding:0px;
	height:20px;
}
/* Fixes height problem with container div */
div.clear{
	clear:both;
}


/* ART AND CURATORIAL STYLESHEET */

#main_header{
	height: auto;
	margin-left: 0px;
}

#side_column{
	float:right;
	width:235px;
	color:#333333;
	text-align:left;
	font-size:10px;
}

#side_column span{
	border-bottom:1px dotted;
	border-bottom-color:#666666;
	padding-bottom:1px;
	font-weight:bold;
}

#side_column li{
	list-style:none;
	background:#FFF;
	margin-top:2px;
	margin-left:0px;
	padding-left:0px;
}

#side_column p{
	padding-top:0px;
	padding-bottom:5px;
}

#side_column a:link{
	color:#333333;
}

#side_column a:hover{
	color:#EBA184;
}

#side_column a:current{
	color:#EBA184;
}

#main_column{
	float: left;
	width: 525px;
	padding-right:0px;
	margin-right:0px;
}

#main_image{
	width:525px;
	padding:0px;
	margin:0px;
}

#main_left_column{
	float:left;
	margin-left:0px;
	margin-top:20px;
	width: 255px;
}

#main_left_column.synopsis_pink{
	padding: 20px;
	background:#EBA184;
	width: 255px;
	font-size:10px;
}

#main_left_column.synopsis_turquoise{
	padding: 20px;
	background:#4BA2B9;
	width: 255px;
	font-size:10px;
}

#main_left_column.etc{
	padding: 20px;
	background:#FFF;
	width: 255px;
	border: none;
	margin-top:0px;
	font-size:10px;
}

#main_left_column span{
	font-weight:bold;
	line-height:2.2em;
	font-size:10px;
}


#main_right_column{
	float:left;
	margin-left:31px;
	margin-top:20px;
	width:201px;
	font-size:10px;
}

#main_right_column a {
	color:#ffffff;
}

#main_right_column a:hover {
	color:#EBA184;
}

#main_right_column li{
	list-style:none;
	margin-left:0px;
	margin-top:5px;
	padding-bottom:5px;
	border-bottom: #333333 dotted 1px;
	display: inline-block;
}

#main_right_column span{
	color: #DB9674;
}

#main_right_column.video{
	float:left;
	width:201px;
	height: auto;
	background: #666666;
	color:#FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:7px;
}

#main_right_column.photos{
	float:left;
	width:201px;
	height: auto;
	background: #666666;
	color:#FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:7px;
	margin-top:10px;
}

#main_right_column.other{
	float:left;
	width:201px;
	height: auto;
	background: #666666;
	color:#FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:7px;
	margin-top:10px;

}

#main_right_column.other_sub{
	float:left;
	width:201px;
	height: auto;
	background: #FFFFFF;
	color:#333333;
	padding-top: 7px;
	padding-bottom: 10px;
	padding-left:7px;
	margin-top:0px;
	font-size:10px;
}

#main_right_column.other_sub a{
	color:#EBA184;
}

#main_right_column.other_sub a:hover{
	color:#333333;
}

#main_right_column.hirez{
	float:left;
	width:201px;
	height: auto;
	background: #666666;
	color:#FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:7px;
	margin-top:10px;
}

#main_right_column.catalogue{
	float:left;
	width:201px;
	height: auto;
	background: #666666;
	color:#FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:7px;
	margin-top:10px;
}

/* CAROUSEL -- IN THE BEST OF WORLDS, THIS SHOULD BE LEFT AS IS */

#container_bd{
	float:left;
	width:201px;
	height: auto;
	padding:0px;
	margin-top:10px;
	margin-left:-5px;
	margin-bottom:0px;
}

#examples a {
	color:#888888;
	text-decoration:none;
}
#examples a:hover {
	color:#009900;
}
#examples h3 {
	margin:0px 0pt 0px 0px;
}

#example_3 {
	background:#FFFFFF none repeat scroll 0%;
	height:80px;
	margin:0pt 0px 0px 0px;
	overflow:hidden;
	position:relative;
	width:200px;
}
#example_3_frame {
	position:relative;
}
#example_3_previous {
	float:left;
}
#example_3_next {
	float:right;
}
#example_3_content {
	margin-left:-19px;
	position:absolute;
	top:0pt;
}
#example_3_content #example_3_content li {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0pt;
	padding:0pt;
}
#example_3_content {
	width:5418px;
}
#container_bd #example_3 ul li {
	background-color:#DDDDDD;
	border:1px solid #BBBBBB;
	display:block;
	float:left;
	margin:0 3px 0px 3px;
	padding:0px;
}
#container_bd #example_3 ul li img {
	display:block;
}

/* ----------------IMAGE SLIDER------------- */
#SlideItMoo_outer {  
	width:200px; 
	margin:20px 0px 20px 31px;
	height:97px; 
	background:#FFFFFF; 
	display:block; 
	position:relative;
	padding:0px 0px 0px;
	border:1px #DDDDDD solid;
}
/* create custom forward-backward buttons for this container */
#SlideItMoo_outer .SlideItMoo_forward,
#SlideItMoo_outer .SlideItMoo_back{ 
	display:block; 
	position:absolute; 
	cursor:pointer; 
	width:10px; 
	height:97px; 
	bottom:0px; 
	right:3px; 
	background:url(img/slideitmoo_forward.png) no-repeat center;  
}
#SlideItMoo_outer .SlideItMoo_back { 
	left:3px; 
	background:url(img/slideitmoo_back.png) no-repeat center;  
}

/* the width is set to show the number of thumbnails that will be visible */
#SlideItMoo_inner{ 
	position:relative; 
	overflow:hidden; 
	width:200px ; /* set a display width to make the slider look good in case js is disabled */
	margin:7px 0px 0px 5px;
	padding:5px 10px 5px 10px;
}
/* the thumbnails container; set a width on it so everything will be fine */
#SlideItMoo_items { 
	display:block; 
	position:relative; 
}
/* single element design */
#SlideItMoo_items div.SlideItMoo_element { 
	display:block; 
	position:relative; 
	float:left; 
	margin:0px 3px 0px; 
	font-size:11px; 
	width:65px; 
	height:65px;
	text-align:center; 
	color:#FFFFFF;
}
#SlideItMoo_items a { padding:0px; margin:3px 0px 3px; clear:both; display:block; background:#FFFFFF; padding:2px; }
#SlideItMoo_items a img{ border:none; }