/*
/	iMapFlickr.com
/
/	Frame Digital (c)2009
/	http://www.framecreatesdigital.com
/
/	- General Styles
/	- Homepage header boxes
/	- Homepage three-stage panels
/	- Headers
/	- boxes
/	- forms
/	- faqs
/	- set list (step 1)
/
*/

/*------------------
/	- General Styles
/------------------*/

a
{
	cursor: pointer;
    color: #036564;
    text-decoration: underline;
    outline: none;
}

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

h1
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;  
	 margin:0 0 15px 0;  
	 	 color:#2B271F;
}

h2
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
	 margin:0 0 15px 0;  
	 	 color:#2B271F;
}

.box-lrg h2
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
	 margin:0 0 15px 0;  
	 	 color:#2B271F;
		 font-weight:bold;
}

h3
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
	 	 color:#2B271F;
}

p
{
    margin: 5px 0 20px 0;
}


p.small
{
    font-size:12px;
	 margin: 5px 0 15px 0;
}

.small{
	font-size:12px;
}

.nowrap{
	white-space:nowrap;
}

a.help { font-size: 11px; font-weight: normal; background-image: url(/images/icons/help.png); padding: 13px; background-repeat: no-repeat; text-decoration: none; top:5px; position: relative; }


ul{
	margin: 10px;
	padding:10px;
	
}
li{
	list-style-image: url(../images/framework/bk_li.png);
	margin:0 0 15px 0;
}


#content p.illustration{
	font-size:1px;
	line-height:1px;
	text-align:right;
	margin:0;
}

#content p.illustration img{
	float:right;
	margin:-10px 0 0 25px;
}


.image-caption-left{
	float:left;
	text-align:center;
	margin:0 10px 10px 0;
	border:3px solid #F4F4F5;
	padding:5px;
	background-color:#fff;
}

.image-caption-right{
	float:right;
	text-align:center;
	margin:0 0 10px 10px;
	border:3px solid #F4F4F5;
	padding:5px;
	background-color:#fff;
}

.image-caption-left .caption,
.image-caption-right .caption{
	text-align:center;
	font-size:10px;
	border-top:1px solid #F4F4F5;
	margin-top:5px;
}


.alert{
	color:#dd0000;
}

/*------------------
/	- recent maps homepage
/------------------*/
h1.recent-maps 
{
    width: 228px; height: 28px;
	background: url(../images/headers/recent-maps.png);
	text-indent: -9999px;
    
}

ul#recent-maps * { line-height: normal; }

ul#recent-maps { padding: 0px; margin: 0px; }
ul#recent-maps li
{
    list-style: none;
    list-style-image: none;
    width: 238px;
    padding: 0px;    
    margin: 0px;
    margin-bottom: 10px;
    border-bottom: solid 2px #f6f4f1;
}

ul#recent-maps .map-image
{
    width: 81px;
    margin-right: 10px;
    height: 70px;
    float: left;
}


ul#recent-maps li,
ul#recent-maps img,
ul#recent-maps h3
{ float: left; }

ul#recent-maps li p,
ul#recent-maps li a 
{ 
    color: #979797;  
    font-size: 10px; 
    float: left;     
}

ul#recent-maps li a {
    background-image: url(/images/view-recent.gif); 
    background-repeat: no-repeat; 
    background-position: left; 
    padding-left: 15px;
    text-decoration: underline;
}
ul#recent-maps li a:hover { text-decoration: none; }

ul#recent-maps h3 a { color: #333333; text-decoration: none; font-size: 13px; background: none; padding: 0px; }

ul#recent-maps p,
ul#recent-maps h3 { width: 135px; margin: 0px; padding: 0px; }

ul#recent-maps .map-image a { background: none; padding: 0px; text-decoration: none; }
ul#recent-maps .map-image a:hover { text-decoration: none; }

ul#recent-maps .map-image a img
{
    border: solid 2px #fff;    
}

ul#recent-maps .map-image a:hover img
{
    border: solid 2px #036564;    
}

/*------------------
/	- Homepage header boxes
/------------------*/
#box-getstarted{
	background-color:#e0f7f1;
	margin:25px 0 0 0;
}

#box-getstarted.columns{
	margin:0px 0 0 0;
}

#box-youraccount{
	background-color:#fcf6eb;
	margin:15px 0 0 0;
}

#box-youraccountlinks{
	background-color:#fcf6eb;
	margin:15px 0 0 0;
	height:170px;
}

.box{
	width:230px;
	height:85px;
	border:2px solid #fff;
}

.box .image{
	float:left;
	margin:12px 0 0 15px;
	display: inline;
}

.box .text{
	width:135px;
	float:right;
	margin:12px 10px 0 0;
	display: inline;
}

.box .text h3{
	color:#036564;
	font-size:18px;
	font-family: Arial, Helvetica, sans-serif;
}

.box .text p{
font-weight:bold;
	color:#2b271f;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
}

.box .text .arrow{
	float:right;
}

#box-youraccountlinks ul{
	margin:0 10px;
	/*padding:0 10px;*/
}
#box-youraccountlinks li{
	margin:0 0 5px 0;
	list-style-image:url(../images/framework/bk_li-box.png);
}

#box-youraccountlinks li a{
	font-size:12px;
}



/*------------------
/	- Homepage three-stage panels
/------------------*/

.stage1, .stage2, .stage3 {
	width: 200px;
	height: 310px;
	float: left;	
	margin-right: 16px;
	border-right: solid 4px #f6f4f1;
}

.stage3 { margin-right: 0px; border-right: none; }

.stage-divider {
	background: url(../images/framework/bk_stage-divider.png) no-repeat;
	float: left;
	width: 10px;
	height: 400px;
	margin: 30px 30px 0 22px;
}


h2.stage-head {
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: #333333;	
	margin: 0px;
}

p.stage-copy {
    width: 185px;
	font-size: 13px;
	color: #666666;
	font-family: Helvetica, sans-serif;
	font-weight: normal;	
	margin: 0px;
	line-height: normal;
}

p.stage-copy img{
	vertical-align: middle;
}

/*------------------
/	- Homepage demo panel
/------------------*/

.demo {
    width: 625px;
    height: 138px;
}

.demo{
	background-color:#fcf6eb;
	border-top:5px solid #f4ede1;
	padding: 5px 10px 10px 10px;
	margin-top: 10px;
}
.demo h2 { margin: 0px; }
.demo p
{	
    margin: 15px 25px 0 0;
	font-size: 13px;
	width: 400px;
	padding: 0px;
	line-height: normal;	
	float: left;
}

.demo .buttons{
	float:left;
	background-color: #e0f7f1;
	border:2px solid #fff;
	padding: 8px 8px 0px 8px;
	width:169px;
	margin: 15px 0 0 0;	
}

.demo .buttons .link-demo{
	background-image: url(../images/framework/bk_link-demo.png);
}

.demo .buttons .link-video{
	background-image: url(../images/framework/bk_link-video.png);
}

.demo .buttons .link-demo,
.demo .buttons .link-video{
	background-repeat: no-repeat;
	background-position: 0 3px;
	height:30px;
	padding:4px 0 0 30px;
}

.demo .buttons a{
	color:#036564;
	font-family:Arial,Helvetica,sans-serif;
	font-size:16px;
	font-weight:bold;
	background-image: url(../images/icons/arrow.png);
	background-repeat:no-repeat;
	background-position: right;
	padding:0 20px 0 0;
	width:110px;
	text-decoration: underline;
	display: block;	
}

.demo .buttons a:hover{
	text-decoration: none;
} 
	 

/*------------------
/	- Headers
/------------------*/

h1.step-one {
	width: 422px; height: 50px;
	background: url(../images/headers/step-one.png);
	text-indent: -9999px;
}

h2.step1-flickr {
	width: 312px; height: 25px;
	background: url(../images/headers/step-one-flickr-photoset.png);
	text-indent: -9999px;
}

h2.step1-photosets {
	width: 179px; height: 25px;
	background: url(../images/headers/step-one-your-photosets.png);
	text-indent: -9999px;
}
h1.what-a-mess
{
	width: 200px; height: 30px;
	background: url(../images/headers/what-a-mess.png);
	text-indent: -9999px;
}

h1.logout-cleanup
{
	width: 315px; height: 35px;
	background: url(../images/headers/logout-clean-up.png);
	text-indent: -9999px;
}

h1.acc-login{
	width: 84px; height: 30px;
	background: url(../images/headers/acc-login.png);
	text-indent: -9999px;
}

h1.acc-register{
	width: 305px; height: 30px;
	background: url(../images/headers/acc-register.png);
	text-indent: -9999px;
}


h1.acc-your-account{
		width: 192px; height: 30px;
	background: url(../images/headers/acc-your-account.png);
	text-indent: -9999px;
}

h1.acc-your-maps{
		width: 156px; height: 30px;
	background: url(../images/headers/acc-your-maps.png);
	text-indent: -9999px;
}

h1.acc-map-settings{
		width: 263px; height: 30px;
	background: url(../images/headers/acc-settings.png);
	text-indent: -9999px;
}

h1.acc-map-colors{
		width: 297px; height: 30px;
	background: url(../images/headers/acc-schemes.png);
	text-indent: -9999px;
	
}

h1.acc-facebook{
		width: 146px; height: 30px;
	background: url(../images/headers/acc-facebook.png);
	text-indent: -9999px;
	background-repeat: no-repeat;
}

h1.acc-twitter{
		width: 110px; height: 30px;
	background: url(../images/headers/acc-twitter.png);
	text-indent: -9999px;
	background-repeat: no-repeat;
}

h1.acc-password{
		width: 281px; height: 30px;
	background: url(../images/headers/acc-password.png);
	text-indent: -9999px;
}

h1.home-step-one{
	width: 200px; height: 44px;
	background: url(../images/headers/home-step-one.gif);
	text-indent: -9999px;
	margin-bottom: 5px;
}

h1.home-step-two{
		width: 200px; height: 44px;
	background: url(../images/headers/home-step-two.gif);
	text-indent: -9999px;
	margin-bottom: 5px;
}

h1.home-step-three{
		width: 200px; height: 44px;
	background: url(../images/headers/home-step-three.gif);
	text-indent: -9999px;
	margin-bottom: 5px;
}

h1.step-two {
	width: 377px; height: 50px;
	background: url(../images/headers/step-two.png);
	text-indent: -9999px;
}

h1.step-three {
	width: 447px; height: 55px;
	background: url(../images/headers/step-three.png);
	text-indent: -9999px;
}

h1.about{
	width: 150px; height: 30px;
	background: url(../images/headers/about-us.png);
	text-indent: -9999px;
}

h1.faq {
	width: 458px; height: 30px;
	background: url(../images/headers/faq.png);
	text-indent: -9999px;
}

h1.privacy {
	width: 112px; height: 30px;
	background: url(../images/headers/privacy.png);
	text-indent: -9999px;
}

h1.error-not-found {
	width: 429px; height: 30px;
	background: url(../images/headers/error-404.png);
	text-indent: -9999px;
}

h1.error-broken {
	width: 362px; height: 30px;
	background: url(../images/headers/error-500.png);
	text-indent: -9999px;
}

h1.learn-demo {
	width: 391px; height: 30px;
	background: url(../images/headers/learn-demo.png);
	text-indent: -9999px;
}

h1.learn-video {
	width: 359px; height: 30px;
	background: url(../images/headers/learn-video.png);
	text-indent: -9999px;
}

h2.learn-more {
	width: 133px; height: 30px;
	background: url(../images/headers/learn-more.png);
	text-indent: -9999px;
}

/*------------------
/	- boxes
/------------------*/

.box-sml{
	width:432px;
}

.box-sml .top
{
    background-image: url(../images/panels/box-sml-top.png);
    background-repeat: no-repeat;
    width: 432px;
    height: 6px;
}

.box-sml .mid
{
    background-image: url(../images/panels/box-sml-mid.gif);
    background-repeat: repeat-y;
	 background-position:right;
    width: 402px;
    min-height: 305px;
    height: auto !important;
    height: 305px;
    padding: 10px 15px 0 15px;
}

.box-sml .mid .help{
	width:30px;
	height:30px;
	float:right;
	margin:-5px 0 0 0;
}

.box-sml .grad
{
    background-image: url(../images/panels/box-grad.png);
    background-repeat: repeat-x;
    background-position: bottom;
	background-color: #fff;
    width: 432px;        
}

.box-sml .bot
{
    background-image: url(../images/panels/box-sml-bot.png);
    background-repeat: no-repeat;
    width: 432px;
    height: 8px;
}



.box-sml .nosets{
	margin:60px 0 0 35px;
}



.box-lrg{
	width:905px;
	clear:both;
}

.box-lrg .top-rounded,
.box-lrg .top
{
    background-image: url(../images/panels/box-lrg-top.png);
    background-repeat: no-repeat;
    width: 905px;
    height: 6px;
}

.box-lrg .top-rounded { background-image: url(../images/panels/box-lrg-top-rounded.png); }

.box-lrg .mid
{
    background-image: url(../images/panels/box-lrg-mid.gif);
    background-repeat: repeat-y;
	 background-position:right;
    width: 875px;
    min-height: 300px;
    height: auto !important;
    height: 300px;
    padding: 10px 15px 0 15px;
}

.box-lrg .grad
{
    background-image: url(../images/panels/box-grad.png);
    background-repeat: repeat-x;
    background-position: bottom;
	background-color: #fff;
     width: 905px;
}

.box-lrg .bot
{
    background-image: url(../images/panels/box-lrg-bot.png);
    background-repeat: no-repeat;
    width: 905px;
    height: 8px;
}


/*------------------
/	- forms
/------------------*/

table.form
{
    border-collapse: collapse;
}

table.form td
{
    padding: 3px 2px 3px 0;
	 height:34px;
	 vertical-align: middle;
}

/*sigh... the usual IE7/IE8/FF hack-o-rama*/
table.form td.break {
	 padding: 10px 0;
	 height:5px;
}

table.form td.break .bar{

border-top:1px solid #BCBCBC;
height:1px;
margin:0 auto;
text-align:center;
width:80%;
}

table.form td.or{
	color:#b2b2b2;
	font-weight:bold;
	font-size: 18px;
}



.error { border: solid 2px #ff9a67 !important; }


.error-box{
	border:5px solid #ffae85;
	padding:10px;
	color: #ff854a;
	width:300px;
	margin:20px auto 0 auto;
	background-color:#fff;
}

.error-box img{
	float:left;
	margin:0 10px 0 0;
}

.error-box p {
	margin:0 0 10px 0;
}

.error-box a{
color: #d35613;
	
}

.focus { border: 2px solid #9d9d9d !important;}   
.confirm{
	color:#7bac7e;
	font-weight: bold;
}
	
.validation-summary{ 
   display: none; 
   border: solid 5px #FFAE85;
	padding:5px 10px;
	margin:0 0 15px 0;
	width:372px;
   }
	
.validation-summary p{
		font-size:12px;
		margin:0px 0 10px 0;
		color: #ee4e00;
}

.validation-summary ul{
	margin:0px 0 0 10px;
	padding:0px 0 0 10px;
}

.validation-summary li{
	margin:0 0 5px 0;
	font-size:12px;
	color: #ee4e00;
	list-style-image: url(../images/framework/bk_li-error.png);
}
	
label{
	text-align: right;
	font-weight: bold;
}


.button{
	outline:none;
	cursor:pointer;
	background-image: url(../images/framework/bk_button.png);
	background-repeat: no-repeat;
	background-position: right;
	padding:5px 35px 5px 5px;
	color: #036564;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	border-top: 1px solid #cecece;
	border-right: solid 2px #bcbcbc;
	border-bottom: solid 2px #bcbcbc;
	border-left: 1px solid #cecece;
}

.button-small{
	outline:none;
	cursor:pointer;
	background-image: url(../images/framework/bk_button-small.png);
	background-repeat: repeat-x;
	padding:2px;
	color: #036564;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	border-top: 1px solid #cecece;
	border-right: solid 2px #bcbcbc;
	border-bottom: solid 2px #bcbcbc;
	border-left: 1px solid #cecece;
}


.button:hover,
.button-small:hover{
	cursor:pointer;
	border-top: solid 2px #9d9d9d;
	border-right: solid 1px #cecece;
	border-bottom: solid 1px #cecece;
	border-left: solid 2px #9d9d9d;
}

.button-tick
{
    background-image: url(../images/framework/bk_button_tick.png);
}

.button-disk
{
    background-image: url(../images/framework/bk_button_disk.png);
}

.button-cross
{
    background-image: url(../images/framework/bk_button_cross.png);
}

input.field
{
    border: solid 1px #bcbcbc;
    padding: 4px 2px;
    font-size: 13px;
	color:#666666;
    font-family: Verdana, Geneva, sans-serif;
	background-image: url(../images/framework/bk_field.gif);
	 background-repeat: repeat-x;
}

input.field-small
{
    border: solid 1px #bcbcbc;
    padding: 2px 2px;
    font-size: 11px;
	color:#666666;
    font-family: Verdana, Geneva, sans-serif;
	background-image: url(../images/framework/bk_field.gif);
	 background-repeat: repeat-x;
}


select.dropdown
{
    border: solid 1px #cdcdcd;
    width: 100px;
    padding: 2px;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;    
}

/*(.bk-container { background-image: url(/images/framework/select-bk.gif); background-repeat: no-repeat; background-position: top right; height: 20px;width: 152px;}
.bk-dropdown { background-image: url(/images/framework/input-bk.gif); background-repeat: no-repeat; background-position: top left; height: 20px; margin-right: 2px;width: 150px;  }
.bk-dropdown select
{
    border: 0px;
    background-color: Transparent;
    margin-top: 2px;
    outline: none;
    height: 16px;
    padding: 0px;
    width: 150px;
}

.bk-dropdown select option
{ outline: 0px; }

*/

table.controls{
	border-top:2px solid #e4e4e4;
	padding-top:10px;
}

/*------------------
/	- faqs
/------------------*/

.return-top {
	float: right;
	cursor: pointer;
	padding-left: 20px;
}


/*------------------
/	- set list (step 1)
/------------------*/
#searches,
#sets { height: 240px; overflow-y: scroll; display: none;  background: transparent; }
#searches { min-height: 100px; overflow-y: hidden; }
#searches .set,
#sets .set {
	 margin:0;
}
#searches .clear,
#sets .clear{
	clear:both;
	height:1px;
	font-size: 1px;
	line-height:1px;
	text-align: center;
	margin:5px 0;
}

#searches .clear .bar,
#sets .clear .bar{
	width:80%;
	border-top:1px solid #BCBCBC;
	height:1px;
	text-align: center;
	margin:0 0 0 35px;
}

#searches .set .image,
#sets .set .image{
	float:left;
	width:68px;
}

#sets .set .image img{
	border:4px solid #fff;
}

#sets .set .text{
	float:right;
	width:295px;
}


#sets .set .text p{
	padding: 0px;
	margin: 0; 
	font-size:11px;
}

#searches .set .text a,
#sets .set .text a{
	color:#036564;
}

/*photostream search*/

#searches .set .image{
	float:left;
	width:110px;
	margin-top:10px;
}

#searches .set .text{
	float:right;
	width:275px;
}

#searches .set .text p{
	padding: 0px;
	margin: 0; 
	font-size:12px;
}



.set-alt { background-color : #cdcdcd; }




/*------------------
/	- Your Maps
/------------------*/

#embedd{
	display:none;
	float:right;
	border: 2px solid #E4E4E4;
	width:280px;
	padding:5px;
}

#embedd .help{
	width:30px;
	height:30px;
	float:right;
}


input.share,
textarea.share
{
	    border: solid 1px #bcbcbc;
    padding: 4px 2px;
    font-size: 10px;
	color:#666666;
    font-family: Verdana, Geneva, sans-serif;
	background-image: none;
}

#embedd p{
	margin:15px 0 0 0;
	font-size:12px;
}

#embedd h2{
	margin:0;
	font-size:15px;
}

#embedd ul.nav-tools
{
    margin: 5px 0 0 0;
    padding: 0;
	 float:right;
}

/*------------------
/	- all sorts of madness - some of this might be redundant??
/   - very true!
/------------------*/


/*------------------
/	- the gallery
/------------------*/

ul#slider { padding: 0px; margin: 0px; }

#gallery-holder 
{ 
    margin: 0px; 
    padding: 0px;      
    float: left;
}

.gallery-viewer {
	position:relative;
	overflow: hidden;
	float: left;
	margin: 10px 0px 0px 0px;
	border: 0px;
	padding: 5px 0 5px 0;
}
.gallery-viewer ul {
	width: 200000px;
	position: relative;
	list-style: none inside;
	float: left;
}
.gallery-viewer li { 
	display: inline;
	float: left;
	text-align: center;
	float: left;
	border: solid 1px #cdcdcd;
    background: #666; 
    margin: 0 5px 0 5px;
}

.gallery-viewer li img { width: 50px; height: 50px; cursor: pointer; }

/*  - the gallery buttons - */
.move { background-position: center; margin-top: 10px; background-repeat: no-repeat; width: 15px; height: 74px; float: left;  border: solid 1px #ff0000; background-color: #ff0000; background-color: #ff0000; }
#move-left { background-image: url(/images/plain_button_left.png); padding: 5px 0 5px 0; }
#move-right { background-image: url(/images/plain_button_right.png); padding: 5px 0 5px 0; }

/* - the map */        

#gallery-holder 
{ 
    margin: 0px; 
    padding: 0px;      
    float: left;
}

#map-holder { border: solid 1px #ffffff; overflow:hidden; } /* added to hide the render issue with google maps copyright statement */
#map { border: solid 1px #fff; background: #cdcdcd; padding: 5px; margin: 5px; float: left; }


/* STAGES */


    /* STAGE TWO - the css for the settings panel */
    
    #settings-colours-left,
    #settings-colours-right
    {
        width: 8px;
        height: 101px;
        float: left;        
    }
    
    #settings-colours 
    { 
		 width:859px;
        float: left; margin-bottom: 20px;
        background-image: url(/images/panels/settings-body.png);
        background-repeat: repeat-x;
        overflow: hidden;
        height: 100px;
    }
            
    #settings-colours #buttons { width: 100px; float: left; height: 90px; }
    #settings-colours #buttons ul { padding: 0px; margin: 0px; list-style: none; margin-top: 4px; }
    #settings-colours #buttons ul li { line-height: 45px; padding: 0px; margin: 0px; height: 45px; width: 97px; list-style: none;  list-style-image: none;  }
    #settings-colours #buttons ul li a { line-height: 45px; height: 45px; width: 97px; display: block; }
    
    #settings-colours #buttons ul li#settings a { background-image: url(../images/icons/settings-off.png); background-repeat: no-repeat; background-position: left center;  }
    #settings-colours #buttons ul li#colours a { background-image: url(../images/icons/colours-off.png); background-repeat: no-repeat; background-position: left center;  }
    
    #settings-colours #buttons ul li#settings a.on { background-image: url(../images/icons/settings-on.png); background-repeat: no-repeat; background-position: left center;  }
    #settings-colours #buttons ul li#colours a.on { background-image: url(../images/icons/colours-on.png); background-repeat: no-repeat; background-position: left center;  }
    
    #settings-colours #buttons ul li a span { display: none; }
    
    
    #controls { padding: 5px 0px 5px 5px; width: 750px; float: left; overflow: hidden; height: 85px; color: #333333; }
    
	 /*reset buttons ones the map is displayed*/
	 #buttons-reset{
	 	float:right;
		width:480px;
	 }
	 
	 #buttons-reset .button-small{
	 	float:right;
		margin:0 0 0 15px;
	 }
	 
    /* stuff that is required by the slidetab thingymabob? */
    /* field stepper interface */
    .w_amount {
	    height:61px;
	    right:136px;
	    position:absolute;
	    border-left:1px solid #ccc;
    }
    .w_stepper_wrap {
	    height:27px;
	    width:60px;
	    position:relative;
	    margin:16px 14px 0 14px;
    }

    /* to get height same in FF tweak the padding! */
    .w_stepper_wrap input[type="text"] {
	    font-size:18px;
	    text-align:center;
	    margin:0 0 0 0;
	    height:21px;
	    width:40px;
	    position:absolute;
	    font-weight:bold;
	    	font-family: Arial, Helvetica, sans-serif;
	    color:#595959;
    }
    .w_stepper {
	    height:27px;
	    width:15px;
	    position:absolute;
	    right:0;
	    cursor:pointer;
    }
    .w_stepper_up {
	    width:15px;
	    height:14px;
	    background-image: url(images/stepper.gif);
	    background-repeat: repeat-y;
    }
    .w_stepper_up:hover {
	    background-position:-15px 0;
    }
    .w_stepper_up:active {
	    background-position:-30px 0;
    }
    .w_stepper_down {
	    width:15px;
	    height:13px;
	    background:url(images/stepper.gif) 0 -14px;
    }
    .w_stepper_down:hover {
	    background-position:-15px -14px;
    }
    .w_stepper_down:active {
	    background-position:-30px -14px;
    }
    
    .option { float: left; padding: 3px; font-size: 12px; }
    
    .option select,
    .option input { font-size: 12px; }
    
    .option .label,
    .option .value { float: left; width: auto; padding: 2px; vertical-align: middle; }
    
    .option .label { font-family: Arial; font-weight: bold; font-size: 11px; padding-top: 5px; }
    
    select { width: 150px; }
    
    #pin-style { width: 200px; }
    
    #colours-padding,
    #load-colours { width: 265px; }    
    
    #load-settings { width: 250px; }    
                #load-settings .label{
                    float:left;
                }

                #load-settings .value{
                    margin:3px 0 0 0;
                }
                
    #border-width { width: 175px; }    
	  #photo-count { width: 120px; }        
    #photo-height { width: 135px; }            
    #photo-width { width: 130px; }
    
    #map-height { width: 150px; }
    
    
        
    #photo-border-color,
    #button-color, 
    #map-border-color,
    #map-background-color,
    #gallery-background-color { 
        position: relative;
	    width: 28px;
	    height: 28px;
	    background: url(/images/colorpicker/select.gif);
    }
    
    
    label.pinpoint 
    { 
        cursor: pointer;
        float: left; 
        height: 32px; 
        width: 32px; 
        background-position: bottom;
        background-repeat: no-repeat;         
        display: block; 
    }
        
    label.over,
    label.selected { background-position: top; }
    
    .ui-spinner { background-image: url(/images/framework/input-bk.gif); background-repeat: no-repeat; height: 20px;}
    .ui-spinner input { border: 0px; margin: 2px; float: left; background: none; font-size: 12px; }
    .ui-spinner a { display: block; height: 10px; width: 24px; float: right; clear: right; }
    .ui-spinner a span { display: none; }
    .ui-spinner a.ui-spinner-up { background-image: url(/images/framework/spinner-up.gif); background-repeat: no-repeat; }
    .ui-spinner a.ui-spinner-down { background-image: url(/images/framework/spinner-down.gif); background-repeat: no-repeat; }
    
    /* END STAGE TWO */

/* END STAGES */

.hidden{display:none; }

/* MAP POP UP CSS  */

.description_landscape { width: 30%; float: left; margin-top: 15px; margin-left: 10px; overflow: hidden; }
.image_landscape { width: 63%; float: left; margin-top: 15px; overflow: hidden;  }

.description_portrait { width: 33%; float: left; margin-top: 15px; margin-left: 10px; overflow: hidden; }        
.image_portrait { width: 60%; float: left; margin-top: 15px; overflow: hidden; }        

.image_landscape img,
.image_portrait img { width: 100%;  }   

/* COUNTER CSS */
 .counter { text-align: right; color: #ff9a67; font-size: 11px; font-weight: bold; }