/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES GENERAL
------------------------------------------------------------------------------------ */
#main-content-page{
	position: absolute;
    z-index:2;
	color:#eaeaea;
    font-family:'Varela', Helvetica, Arial, FreeSans, sans-serif;
	margin-top: -124px;
}
#inner-page{
	width: 287px;
	height:420px;
	background: url(../images/stitches.jpg) no-repeat;
	position:relative;
}

/* ------------------------------------------------------------------------------------
-- HEADER, LOGO
------------------------------------------------------------------------------------ */
header{
	float:left;
	width:160px;
	margin:30px 20px;
}
#logo{
	float:left;
	background:rgba(0,0,0,0.6);
	border-top:1px solid rgba(238,225,198,0.3);
	border-bottom:1px solid rgba(238,225,198,0.3);
	width: 190px;
	padding:10px 20px;
	position:absolute;
	bottom:40px;
}
#logo a{
	font-family:'IM Fell DW Pica SC', sans-serif;
	color:#e9bb5e;
	font-size:1.2em;
	text-align:center;
	display:inline-block;
	letter-spacing:0.1em;
}
/* ------------------------------------------------------------------------------------
--  NAVIGATION
------------------------------------------------------------------------------------ */
nav#menu-pages{
	float:left;
	width: 170px;
}
nav#menu-pages a{
	display:inline-block;
	color:#e9bb5e;/*yellow*/
	font-size:0.7em;
	line-height:1.6em;
	text-transform:uppercase;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-khtml-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}
nav#menu-pages ul{
	float:left;
	list-style:none;
	margin:5px 0;
}
nav#menu-pages li{
	background:transparent;
	margin-bottom:5px;

}
nav#menu-pages a:hover{
	padding: 0 0 0 4px;
}
li.last{
	padding-bottom:0;
}
/*----FOR TOGGLING MENU-----*/
.toggle_container-menu{
	font-size:0.9em;
	background:#000;
	position:absolute;
	margin-top:-21px;
	top:0;
	left:0;
	width:155px;
}
.menu-inside{
	float:left;
	margin:30px 10px 10px 10px;
}
.arrow img{
	display:inline-block;
}
.toggle_container-menu a{
	
}
/* ------------------------------------------------------------------------------------
--  SCROLLER (VERTICAL) STYLES mcs2 for menu
------------------------------------------------------------------------------------ */
#mcs2_container{
	width: 175px; 
	height: 250px;  
	float:left;
	margin-top: 10px;
}
#mcs2_container .customScrollBox{
	position:relative; 
	height:100%; 
	overflow:hidden;
	width: 200px;
}
#mcs2_container .customScrollBox .container{
	position:relative; 
	width:124px; 
	top:0; 
	float:left;
}
#mcs2_container .customScrollBox .content{
	clear:both;
	float:left;
}
#mcs2_container .dragger_container{
	position:relative; 
	width:0px; 
	height:50%; 
	float:left; 
	margin: 0 0 20px 60px; 
	cursor:pointer;
}
#mcs2_container .dragger{
	position:absolute; 
	width:14px; 
	height:60px; 
	background:#e9bb5e url(../images/dragger-arrows.png);
	background-repeat:no-repeat;
	overflow:hidden; 
	cursor:pointer; 
}
#mcs2_container .dragger_pressed{
	position:absolute; 
	width:14px; 
	height:60px; 
	background: #e39e0f; 
	overflow:hidden; 
	cursor:pointer; 
}

/* ------------------------------------------------------------------------------------
--  MAIN BLOCK (BLACK WITH CONTENT)
------------------------------------------------------------------------------------ */
#external-wrapper{
	margin: 0;
	padding:0;
	color:#555;
	width:800px;
	height:420px;
	background:transparent;
	position:absolute;
	z-index:20;
	left: 230px;
	top:-0px;
	-moz-box-shadow:0 14px 40px rgba(0,0,0,0.8);
	-webkit-box-shadow:0 14px 40px rgba(0,0,0,0.8);
	-o-box-shadow:0 14px 40px rgba(0,0,0,0.8);
	-khtml-box-shadow:0 14px 40px rgba(0,0,0,0.8);
    -ms-box-shadow:0 14px 40px rgba(0,0,0,0.8);
	box-shadow: 0 14px 40px rgba(0,0,0,0.8);
}
a{
	text-decoration:none;
	color:#94530a;
	outline:none;
}
a:hover{
	color:#3b1209;
}
a.ext-link:after {
    padding:0 5px;
    margin: 10px 0 0 5px;
    content: "";
    background: url(../images/ext-link.png);
	background-repeat: no-repeat;
	display:inline;
	width:10px;
	height:10px;
}
p{
	margin-bottom:10px;
	line-height:1.5em;
}
p.last{
	margin-bottom:0;
}
p.tiny{
	padding:10px 0;
	border-top:1px solid rgba(255,255,255,0.8);
	diplay:block;
	font-size:0.8em;
	line-height:1.4em;
	float:left;
	width:100%;
	margin-bottom:0;
}
.white-line-top{
	float:left;
	width:100%;
	height:1px;
	background:#ddd;
	margin:20px 0 0 0;
}
#block{
	float:left;
	width:100%;
	margin:0;
	background:#000;
	clear:both;
}
#top-strip{
	height:40px;
	width:514px;
	-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-o-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-khtml-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -ms-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	box-shadow:0 1px 0 rgba(0,0,0,0.2);
    background: -moz-linear-gradient(19% 75% 90deg, #e9bb5e, #d7a53f);
    background: -webkit-gradient(linear, left top, left bottom, from(#e9bb5e), to(#d7a53f));
    background-image: -o-linear-gradient(top,rgb(233,187,94),rgb(215,165,63)); 
	position:relative;
}
#thin-line{
	float:left;
	width:100%;
	height:1px;
	background:rgba(255,255,255,0.3);
	margin-top:-6px;/*for yellow upper strip on top of block*/
}
#badge{
	float:left;
	width:90px;
	height:90px;
	background:url(../images/badge.png);
	background-repeat:no-repeat;
	margin:-30px 0 0 10px;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
figure.badge-icon{
	float:left;
	width:30px;
	height:30px;
	margin:30px 0 0 30px;
}
/*---HEADINGS-----*/
#block h1{
	display:inline-block;
	line-height:40px;
	font-size:1em;
	text-transform:uppercase;
	text-shadow: 0 1px 1px #fcdea0;
	color:#2c3e27;
	float:right;
	margin-right:20px;
}
#block h2{
	text-transform:capitalize;
	font-size:1.2em;
	padding:0 0 10px 0;
	border-bottom:1px solid #d7d6d6;
	color:#e39e0f;
}
#block h3{
	text-transform:capitalize;
	color:#d89304;	
}
#block h3.trigger{
	font-size:0.8em;
	display:block;
	margin-bottom:10px;
	text-transform:lowercase;
}
#block h4{
	text-transform:capitalize;
	color:#d89304;	
	font-size: 0.9em;
}
#block h5{
	text-transform:capitalize;
	color:#d89304;	
	font-size: 0.8em;
}
#block h6{
	text-transform:capitalize;
	color:#d89304;
	font-size: 0.75em;	
}
/*-----THIN BORDERS------*/
.white-line{
	float:left;
	width:100%;
	height:1px;
	background:rgba(255,255,255,0.8);
	margin: 0 0 20px 0;
}
.grey-line-bottom{
	float:left;
	width:100%;
	height:1px;
	background: #d7d6d6;
	margin: 0;
}
.white-line-bottom{
	float:left;
	width:100%;
	height:1px;
	background:rgba(255,255,255,0.8);
	margin: 0 0 20px 0;
}
.no-margin{
	margin-bottom:0;
}
/*----FOR TOGGLING CONTENT-----*/
.toggle_container p{
	font-size:0.8em;
}
/*----MAIN BLOCK STRUCTURE----*/
.left-side{
	width:230px;
	height:420px;
	float:left;
	background:url(../images/sidebar-bg.jpg);
	background-repeat:no-repeat;
}
.left-side figure, .left-side img{
	float:left;
	cursor:pointer;
	width:60px;
	height:60px;
}
figure#button-first{
	background:url(../images/side-button1.png);
	background-repeat:no-repeat;
	background-position:0 0;
}
figure#button-first:hover{
	background:url(../images/side-button1.png);
	background-repeat:no-repeat;
	background-position:0 -60px;
}
figure#button-second{
	background:url(../images/side-button2.png);
	background-repeat:no-repeat;
	background-position:0 0;
}
figure#button-second:hover{
	background:url(../images/side-button2.png);
	background-repeat:no-repeat;
	background-position:0 -60px;
}
figure#button-third{
	background:url(../images/side-button3.png);
	background-repeat:no-repeat;
	background-position:0 0;
}
figure#button-third:hover{
	background:url(../images/side-button3.png);
	background-repeat:no-repeat;
	background-position:0 -60px;
}
.left-side aside{
	margin:120px 85px;
}

.right-side{
	width:570px;
	float:right;
}
.right-side article, .right-side section{
	float:left;
	margin:20px 0 0 0;
	padding:20px;
	background:#eaeaea;
	border:1px solid #fff;
	width:472px;
	position:relative;
}
/* ------------------------------------------------------------------------------------
--  SCROLLER (VERTICAL) STYLES FOR MAIN BLOCK
------------------------------------------------------------------------------------ */
#mcs3_container{
	width:570px;
	margin:0; 
	height:380px;  
	float:left;
}
#mcs3_container .customScrollBox{
	position:relative; 
	height:100%; 
	overflow:hidden;
}
#mcs3_container .customScrollBox .container{
	position:relative; 
	width:514px; 
	top:0; 
	float:left;
}
#mcs3_container .customScrollBox .content{
	clear:both;
	float:left;
}
#mcs3_container .dragger_container{
	position:relative; 
	width:0px; 
	height:50%; 
	float:left; 
	margin:160px 20px 0 20px; 
	cursor:pointer;
}
#mcs3_container .dragger{
	position:absolute; 
	width:14px; 
	height:60px; 
	background:#e9bb5e url(../images/dragger-arrows.png);
	background-repeat:no-repeat;
	overflow:hidden; 
	cursor:pointer; 
}
#mcs3_container .dragger_pressed{
	position:absolute; 
	width:14px; 
	height:60px; 
	background:#e39e0f; 
	overflow:hidden; 
	cursor:pointer; 
}
/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES ABOUT
------------------------------------------------------------------------------------ */
ul.pics{
	float:left;
	width:100%;
	list-style:none;
	margin-bottom:20px;/*also used for item page*/
}
ul.pics li{
	float:left;
	width:109px;
	margin-right:12px;
	background:#fff;
	position:relative;
}
ul.pics li.last{
	margin-right:0;
}
ul.pics li:hover{
	-moz-box-shadow: 0 1px 4px #c6c5c5;
	-webkit-box-shadow: 0 1px 4px #c6c5c5;
	-o-box-shadow: 0 1px 4px #c6c5c5;
	-khtml-box-shadow: 0 1px 4px #c6c5c5;
	-ms-box-shadow: 0 1px 4px #c6c5c5;
	box-shadow: 0 1px 4px #c6c5c5;
}
ul.pics figure{
	float:left;
	padding:10px;
	width:89px;
}
ul.pics figure img{
	float:left;
}
/*---YOU MAY REPEAT CAPTIONS STYLES ELSEWHERE-----*/
.caption{
	float:left;
	width:89px;
	padding:0 10px 10px 10px;
	font-size:0.8em;
	text-align:center;
}
.bold{
	font-weight:bold;	
}
.role{
	font-weight:normal;
}

/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES NEWS
------------------------------------------------------------------------------------ */
/*---DATE---*/
.date, .icon{
	position:absolute;
	top:20px;
	right:20px;
	width:50px;
	height:40px;
	z-index:1;
	-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-o-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-khtml-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -ms-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	box-shadow:0 1px 0 rgba(0,0,0,0.2);
    background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);
    background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));
    background-image: -o-linear-gradient(top,rgb(250,250,250),rgb(224,224,224));
	border:1px solid rgba(255,255,255,0.4);
	line-height:40px;
	text-align:center;
	font-size:0.8em;
	text-transform:uppercase;
	text-shadow:0 1px 1px #fff;/*----class date styles will repeat on class icon on services page-----*/
}
.image-block{
	float:left;
	width:452px;
	position:relative;/*---repeats on item page----*/
}
figure.postpic{
	float:left;
	background:#fff;
	padding:10px;
	width:452px;
	margin-bottom:20px;
}
figure.postpic img, figure.postpic iframe{
	float:left;
	border:1px solid #fff;
	width:450px;
}
figure.postpic img{
	 opacity: 0.8;
	-moz-transition: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
	-o-transition: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
	transition: opacity;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}
figure.postpic img:hover{
 	 opacity: 1;
	-moz-transition: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
	-o-transition: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
	transition: opacity;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}
figure.postpic:hover{
	-moz-box-shadow: 0 1px 4px #c6c5c5;
	-webkit-box-shadow: 0 1px 4px #c6c5c5;
	-o-box-shadow: 0 1px 4px #c6c5c5;
	-khtml-box-shadow: 0 1px 4px #c6c5c5;
	-ms-box-shadow: 0 1px 4px #c6c5c5;
	box-shadow: 0 1px 4px #c6c5c5;
}
.zoom{
	position:absolute;
	width:40px;
	height:40px;
	top:60%;
	left:0;
	background: url(../images/zoom.png);
	background-repeat:no-repeat;;
	cursor:pointer;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	border-right:1px solid #fff;/*---repeats on item page and folio page----*/
}
/*----------SLIDER----------*/
#gallery{
	/* The main container div these styles will repeat on testimonials*/
	position:relative;
	float:left;
	width:472px;
	margin-bottom:20px;
}
ul#holder{
	/* The unordered list that is to be split into pages */
	width:472px;
	overflow:hidden;
	position:relative;
	list-style:none;
}
ul#holder li{
	float:left;
	width:100%;
}
.swControls{
	position:absolute;
	top:285px;
}
a.swShowPage{
/* The links that initiate the page slide */
	background-color:#555;
	float:left;
	width:12px;
	height:12px;
	margin:0 3px;
	text-indent:-9999px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	-o-border-radius:7px;
	-khtml-border-radius:7px;
	-ms-border-radius:7px;
	border-radius:7px;
	-moz-box-shadow: 0 1px 4px #c6c5c5;
	-webkit-box-shadow: 0 1px 4px #c6c5c5;
	-o-box-shadow: 0 1px 4px #c6c5c5;
	-khtml-box-shadow: 0 1px 4px #c6c5c5;
	-ms-box-shadow: 0 1px 4px #c6c5c5;
	box-shadow: 0 1px 4px #c6c5c5;
	border:1px solid #fff;
}
a.swShowPage:hover{
	background:#e9bb5e;
}
a.swShowPage.active{
	background-color:#e39e0f;
}
.clear{
	clear:both;
}
.tags{
	float:left;
	width:100%;
	height:20px;
	margin:0 0 20px 0;
	font-size:0.8em;
	text-transform:lowercase;
}
.tags img{
	float:left;
	margin-right:5px;
}
.tags strong{
	line-height:20px;
	vertical-align:middle;
	text-transform:capitalize;
	text-shadow: 0 1px 1px #fff;
}
/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES SERVICES
------------------------------------------------------------------------------------ */
.icon-holder{
	float:left;
	width:50px;
	height:40px;
    padding:0px 0px;
    display:block;
    position:relative;
	 -moz-transition: all 0.5s ease-in-out;
	 -webkit-transition: all 0.5s ease-in-out;
	 -o-transition: all 0.5s ease-in-out;
	 -khtml-transition: all 0.5s ease-in-out;
	 -ms-transition: all 0.5s ease-in-out;
}
.icon-holder:hover {
    z-index:4;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -khtml-transform: scale(1.1);
    -ms-transform: scale(1.1); 
}
/*----used also on news, clients and more pages----*/
.add-block{
	float:left;
	padding:10px;
	width: 452px;
	-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-o-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-khtml-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -ms-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	box-shadow:0 1px 0 rgba(0,0,0,0.2);
    background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);
    background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));
    background-image: -o-linear-gradient(top,rgb(250,250,250),rgb(224,224,224));
	border:1px solid rgba(255,255,255,0.4);
	line-height:40px;
	text-align:center;
	font-size:0.8em;
	text-transform:uppercase;
	letter-spacing:0.1em;
	text-shadow:0 1px 1px #fff;
}
/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES CLIENTS
------------------------------------------------------------------------------------ */
ul.lists h3{
	margin-bottom:14px;
}
ul.lists{
	float:left;
	width:472px;
	list-style:none;
}
ul.lists li{
	float:left;
	width:216px;
	margin-right:20px;
}
ul.lists li.last{
	margin-right:0;
}
ul.sublists{
	float:left;/*also used for item page*/
	font-size:0.9em;
}
ul.sublists li{
	list-style:url(../images/list.png);
    color:#fff;
    margin-left: 14px;
    padding:0;
	float:none;
}
ul.sublists li p.last{
	color:#000;
	text-shadow:0 1px 1px #fff;
}
ul.sublists li img{
	margin:0 0 -4px 10px;
	background:#f5d087;
	padding:5px;
	verticall-align:middle;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-border-radius:3px;
	-khtml-border-radius:3px;
	-ms-border-radius:3px;
	border-radius:3px;
}
ul.sublists li img:hover{
	background:#6f866a;
}
.triangle-down {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 14px solid #ddd;
	float:left;
	margin:0 0 16px 380px;
}
.testimonial{
	text-align:left;
	text-transform:none;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	-khtml-border-radius:4px;
	-ms-border-radius:4px;
	border-radius:4px;
}
/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES PERSONAL NOTEBOOK
------------------------------------------------------------------------------------ */
.clock-holder{
	float:left;
	width:472px;
	clear:both;
	margin-bottom:20px;
	background:transparent;
	border:none;
}
.clock-left{
	float:left;
	width:292px;
	margin-right:20px;
	font-size:0.8em;
}
.clock-right{
	float:right;
	width:160px;
}

/*-------clock----------*/
#clock{
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    background: url(../images/clock.png);
    list-style: none;
	float:left;
}
#sec, #min, #hour{
     position: absolute;
     width: 8px;
     height: 160px;
     top: 0px;
     left: 80px;
}
#sec{
     background: url(../images/sechand.png);
   background-repeat:no-repeat;
     z-index: 3;
}
#min{
    background: url(../images/minhand.png);
   background-repeat:no-repeat;
    z-index: 2;
}
#hour{
   background: url(../images/hourhand.png);
   background-repeat:no-repeat;
   z-index: 1;
}
           	
/*--------content edit-------*/
#edit{
	float:left;
	width:432px;
	padding:20px 20px 0 20px;
	margin:0 0 20px 0;
	-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-o-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-khtml-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -ms-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	box-shadow:0 1px 0 rgba(0,0,0,0.2);
    background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);
    background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));
    background-image: -o-linear-gradient(top,rgb(250,250,250),rgb(224,224,224));
	border:1px solid rgba(255,255,255,0.4);
	letter-spacing:0.1em;
	text-shadow:0 1px 1px #fff;
}
/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES LOCATION
------------------------------------------------------------------------------------ */	
#map_canvas{
	width:472px;
	height:240px;
	border:1px solid #fff;
	float:left;
}
/*-----these styles will repeat on contact page-------*/
ul.marks{
	float:left;
	width:472px;
	list-style:none;
}
ul.marks li{
	float:left;
	width:216px;
	margin-right:20px;
}
ul.marks li.last{
	margin-right:0;
}
ul.submarks{
	float:left;
	margin-bottom:20px;
}
ul.submarks li{
	list-style:none;
    padding:0;
	float:none;
	margin-bottom:20px;
}
ul.submarks li.last{
	margin-bottom:0;
}
ul.submarks li p.last{
	color:#000;
	text-shadow:0 1px 1px #fff;
	font-size:0.8em;
	overflow:hidden;
}	
ul.submarks img{
	float:left;
	vertical-align:middle;
	margin-right:5px;
}
p.small-text{
	font-size:0.9em;
}
/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES CONTACT
------------------------------------------------------------------------------------ */	
#forma, form, fieldset, label{
	float:left;
	width:100%;
}
label{
	font-size:0.7em;
	margin:0 0 5px 0;
	text-transform:uppercase;
}
input, textarea{
	float:left;
	border:1px solid #ddd;
	padding:10px 5px;
	width:460px;
	margin-bottom:10px;
}
.optional{
	float:right;
	color:#e39e0f;
}
#buttonsubmit, #buttonsubmit2{
	-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-o-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	-khtml-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -ms-box-shadow:0 1px 0 rgba(0,0,0,0.2);
	box-shadow:0 1px 0 rgba(0,0,0,0.2);
    background: -moz-linear-gradient(19% 75% 90deg, #e9bb5e, #d7a53f);
    background: -webkit-gradient(linear, left top, left bottom, from(#e9bb5e), to(#d7a53f));
    background-image: -o-linear-gradient(top,rgb(233,187,94),rgb(215,165,63)); /*yellow gradient*/
	border:1px solid rgba(255,255,255,0.4);
	padding:5px 10px;
    letter-spacing:0.1em;
	text-transform:uppercase;
    text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4);
    color:#555;
	cursor:pointer;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-o-border-radius:6px;
	-khtml-border-radius:6px;
	-ms-border-radius:6px;
	border-radius:6px;
}
#buttonsubmit{
	margin-bottom:20px;
}
#buttonsubmit:hover{
	color:#000;
}

/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES FOLIO
------------------------------------------------------------------------------------ */	
#folio{
	float:left;
	width:472px;
	margin-bottom:10px;
}
/*-------Flip styles-------*/
.item{
	width:148px;
	height:148px;
	border:1px solid #fff;
	float:left;
	margin:0 10px 10px 0;
	position:relative;
	cursor:pointer;
}
.last{
	margin-right:0;
}
.itemFlip{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(../images/background.jpg) no-repeat center center #f9f9f9;
}
.itemFlip:hover{
	-moz-box-shadow:0 0 30px #ddd inset;
	-webkit-box-shadow:0 0 30px #ddd inset;
	-o-box-shadow:0 0 30px #ddd inset;
	-khtml-box-shadow:0 0 30px #ddd inset;
	-ms-box-shadow:0 0 30px #ddd inset;
	 box-shadow:0 0 30px #ddd inset;
}
.itemFlip img{
	position:absolute;
	top:0;
	left:0;
	margin:20px 0 0 20px;
}
.itemData{
	display:none;
}
.itemDescription{
	font-size:0.9em;
	padding:10px;
	font-style:italic;
}
.itemURL{
	font-size:10px;
	font-weight:bold;
	padding:10px;
}
.itemURL a{
	/*if you will use anchor instead of zoom icon decalre here some anchor styles---*/
}
.itemURL a:hover{
	/*if you will use anchor instead of zoom icon decalre here some hover styles for anchor---*/
}
.clear{
	/* This class clears the floats */
}
/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES SPECIMENS
------------------------------------------------------------------------------------ */	
/*----SELECTABLE GALLERY STYLES-----------*/

.selecter{
	float:left;
	width:472px;
	margin:0;
	clear:both;
}
.selecterBtns{
    float:left;
    width:148px;
}
.selecterBtns ul{
	float:left;
	list-style:none;
	width:472px;
	margin:0 0 20px 0;
}
.selecterBtns li{
	margin:0 10px 0 0;
	float:left;
}
.selecterBtns a{
     text-decoration:none;
	 letter-spacing:0.1em;
	 font-size:0.9em;
	 text-transform:uppercase;
	 padding:0.5em 0.5em;
	 display:block;
	 background:#fafafa;
     color:#1a242c;
	 border:1px solid #fff;
}
.selecterBtns .active,
.selecterBtns a:hover {
    background:#1a242c;
    color:#f0f0f0;
	border:1px solid #fff;
}
.selecterContent{
    float:left;
    width:472px;
}
.selecterContent ul{
	float:left;
	width:472px;
	list-style:none;
	margin:0;
}
.selecterContent li{
    width:148px;
    height:148px;
	float:left;
	border:1px solid #fff;
	margin:0 10px 10px 0;
	background:#fafafa;
	-moz-box-shadow:0 1px 12px #ddd;
	-webkit-box-shadow:0 1px 12px #ddd;
	-o-box-shadow:0 1px 12px #ddd;
	-khtml-box-shadow:0 1px 12px #ddd;
	-ms-box-shadow:0 1px 12px #ddd;
	box-shadow: 0 1px 12px #ddd;
}
.selecterContent li.last-pic{
	margin-right:0;
}
.selecterContent img{
	float:left;
	margin:20px;
	 opacity: 1;
	-moz-transition: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
	-o-transition: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
	transition: opacity;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}
.selecterContent img:hover{
	 opacity: 0.3;
	-moz-transition: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
	-o-transition: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
	transition: opacity;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}
/*-----buttons-----*/
.buttons-holder{
	float:left;
	width:100%;
	margin-top:20px;
}
.button-act{
	float:left;
    -webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	-o-border-radius: 4px; 
	-khtml-border-radius: 4px; 
	-ms-border-radius: 4px; 
	border-radius:4px;
	margin-bottom:20px;
}
.button-act a{
	margin-right:5px;
}
/*----pulsing buttons for webkit only-----*/
a.pulse {
	display:inline-block;
	/*remove margin-right if you do not need more that 1 button in the row*/
	padding:6px 12px;
	text-transform:uppercase;
	line-height:1.2em;
	letter-spacing:0.1em;
	text-align:center;
	color:#fafafa;
    -webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	border-radius:4px;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
	-moz-box-shadow:0 1px 1px rgba(0,0,0,.4); 
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4); 
	box-shadow:0 1px 1px rgba(0,0,0,.4); 
}
a.green{
	background:#9da95b;	
    -webkit-animation-name: thePulse;
}
a.green:hover{
	background:#838f42;
}
@-webkit-keyframes thePulse {
from { background-color: #838f42; -webkit-box-shadow:: 0 0 9px #6a813d; }
50% { background-color: #9da95b; -webkit-box-shadow:: 0 0 18px #b4c162; }
to { background-color: #838f42; -webkit-box-shadow:: 0 0 9px #6a813d; }
}
a.orange{
	background:#ee5c14;	
    -webkit-animation-name: thePulse-orange;
}
a.orange:hover{
	background:#cc3816;	
}
@-webkit-keyframes thePulse-orange {
from { background-color: #cc3816; -webkit-box-shadow:: 0 0 9px #e16122; }
50% { background-color: #ee5c14; -webkit-box-shadow:: 0 0 18px #ee5c14; }
to { background-color: #cc3816; -webkit-box-shadow:: 0 0 9px #e16122; }
}

a.blue{
	background:#0fbdbf;	
    -webkit-animation-name: thePulse-blue;
}
a.blue:hover{
	background:#08b2b4;
}
@-webkit-keyframes thePulse-blue {
from { background-color: #08b2b4; -webkit-box-shadow:: 0 0 9px #e16122; }
50% { background-color: #129a9c; -webkit-box-shadow:: 0 0 18px #4debed; }
to { background-color: #08b2b4; -webkit-box-shadow:: 0 0 9px #e16122; }
}

a.yellow{
	background:#fbb438;	
    -webkit-animation-name: thePulse-yellow;
}
a.yellow:hover{
	background:#eba52b;
}
@-webkit-keyframes thePulse-yellow {
from { background-color: #fbb438; -webkit-box-shadow:: 0 0 9px #be8b33; }
50% { background-color: #eba52b; -webkit-box-shadow:: 0 0 18px #efb755; }
to { background-color: #fbb438; -webkit-box-shadow:: 0 0 9px #be8b33; }
}

/*----regular buttons for rest of browsers-----*/
a.regular {
	display:inline-block;
	/*remove margin-right from button-act a styles if you do not need more that 1 button in the row*/
	padding:6px 12px;
	text-transform:uppercase;
	line-height:1.2em;
	letter-spacing:0.1em;
	text-align:center;
	color:#fafafa;
    -webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	border-radius:4px;
	box-shadow:0 1px 1px rgba(0,0,0,.4); 
}
/*-----sortable price table------*/
table#resultTable{
     background-color: #f0f0f0;
     width: 472px;
	 border:1px solid rgba(255,255,255,0.7);
	 margin:20px 0 0 0;
     color: #555;
}
thead{
    text-align: left;
}
th.sortable{
	text-transform:uppercase;
	letter-spacing:0.2em;
	font-size:0.9em;
    cursor: pointer;
	padding:10px;
	background:#fafafa;
}
th.sortable:hover{ 
	color:#000;
}
th.sorted-asc, th.sorted-desc { 
    color: #666;
}
td{
    background: #ececec;
    vertical-align: middle;
	padding:10px;
	text-transform:capitalize;
	font-size:0.8em;
}
td.title, th#title{
	width:175px;
}
td.time, th#time, th#type{
	width:120px;
}
td.sort, th#sort{
	width:60px;
}
td.price, th#price{
	width:60px;
}
td a:hover{
    color: #040404;
}
td.odd {
   background-color: #ddd;
   color: #555;
}
td.hovered {
   background-color: #e9bb5e;
   color: #555;
}
tr{
	border-top:1px solid rgba(255,255,255,0.7);
}
/* ------------------------------------------------------------------------------------
--  EXTERNAL PAGE STYLES ITEM
------------------------------------------------------------------------------------ */
.two-columns{
	float:left;
	width:100%;/*472px*/
	clear:both;
	margin:20px 0;
}
.two-columns-left{
	float:left;
	width:279px;
	font-size:0.9em;
	padding-right:10px;
}
.two-columns-right{
	float:right;
	width:171px;
	font-size:0.8em;
	padding-left:10px;
}
.capital{
	text-transform:capitalize;
}
.share{
	float:right;
	margin-top:20px;
}
.similar{
	float:left;
	width:100%;/*472px*/
	margin-top:20px;	
}
.similar h4{
	margin-bottom:20px;
}