*{
  font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
}
root{ 
  display: block;
}

body{
  background: url('../images/header-bg.png');
  margin: 0px;
  text-align: center;
  background-repeat: repeat-x;
  font-size: 12pt;
  min-width: 960px;
}

.clearFix{
  display: block;
  clear: both;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  width: 50%;
}

a{
  text-decoration: none;
  color: black;
}
#mainContent a{
  color: #84b323;
}
#mainContent a:hover, #footer a:hover{
  text-decoration: underline;
}

h1{
  color: #98ba2f;
  font-size: 2.25em;
  margin-top: 47px;
}

h1.bigger{
  font-size: 2.7em;
  margin-bottom: 41px;
}

h2{
  font-size: 1.2em;
  letter-spacing: -0.05em;
}

h3{
  color: #698f17;
  font-size: 1.85em;
}

h4{
  color: #383838;
  margin: 2px 0px 0px 0px;
}

button{
  border: 0px;
  cursor: pointer;
}

.clear{
  clear: both;
}

.fLeft{
  float: left;
}

.fRight{
  float: right;
}


.tRight{
  text-align: right;
}

.tLeft{
  text-align: left;
}

.tCenter{
  text-align: center;
}

.strong{
  font-weight: bold;
}

.grey{
  color: #6c6c6c;
}

ul{
  padding-left: 0px;
}

ul li{
  list-style: none;
}

ul.inlineList li{
  display: inline;
  margin: 0;
  padding: 0;
}

ul.standartList{
  padding-left: 35px;
}

ul.standartList li{
  margin: 1em 0px;
}

ul.greenBullets{
  padding-left: 30px;
}

ul.greenBullets li{
  list-style-image: url('../images/greenBullet.png');
  padding-left: 5px;
  margin-bottom: 1.2em;
  line-height: 2em;
}

#topHeader{
  background: url('../images/header-container.jpg');
  height: 378px;
  background-repeat: no-repeat;
  background-position: center;
}

#topHeader .inner{
  width: 926px;
  margin: 0px auto 0px auto;
  text-align: left;
  color: white;
  position: relative;
}

#topHeader .socialNetwork{
  display: block;
  float: left;
  margin-top: 24px;
  margin-left: 5px;
  margin-right: 5px;    
  font-size: 0.7em;
}

#topHeader .langSel{
  float: right;
  margin-top: 24px;
  margin-right: 5px;
}

#topHeader .langSel a{
  float: left;
  color: #bed48f;
  margin-left: 10px;
  font-size: 0.7em;
}

#topHeader .langSel a.selected{
  color: white;
}

#topHeader .buttonGroup{
  position: absolute;
  top: 293px;
  left: 7px;
  list-style-type: none;
  margin: 0;
}
#topHeader .buttonGroup li{
  float: left;
}

#topHeader .socialNetworkIco{
  float: left;
  display: block;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  margin-top: 20px;
}

#topHeader .fb-ico{
  background: url('../images/fb-ico.png');
}

#topHeader .tweet-ico{
  background: url('../images/tweet-ico.png');
}

#logo{
  clear: both;
  float: left;
  margin-top: 35px;
  border: 0;
}

#headPhoto, #headPhoto span{
  display: block;
  width: 548px;
  height: 293px;
}
#headPhoto{
  float: right;
  position: relative;
  margin-top: 17px;
}
#headPhoto span{
  position: absolute;
  left: 0;
  top: 0;
  background: url('../images/headPhoto_mask.png') left top no-repeat;
  z-index: 10;
}
#headPhoto img{
  position: absolute;
  z-index: 1;
  left: 26px;
  top: 8px;
}

/* Main Content */
#mainContent{
  background: url('../images/mainContent-bg.png') repeat-x;
  overflow: hidden;
  margin-bottom: 55px;
}

#mainContent .inner{
  width: 911px;
  margin: 0px auto 0px auto;
  text-align: left;
  padding-left: 16px;
}

#mainContent span.laPilou{
  color: #51680b;
  font-size: 1.2em;
}

#mainContent .inner p{
  line-height: 2.2em;
  color: #383838;
}

#mainContent .inner .illustrationRight{
  margin-left: 20px;
  margin-right: 48px;
  position: relative;
  bottom: 15px;
}

#mainContent .inner .illustrationLeft{
  margin-right: 54px;
  position: relative;
}

ul.greenBullets li{
  color: #383838;
}

#mainContent h2.bigger{
  font-size: 1.6em;
  letter-spacing: -0.025em;
}

#mainContent h2.spaced{
  margin-top: 76px;
}

#mainContent .boxWithPadding{
  margin-top: 63px;
  margin-bottom: 70px;
  padding-left: 21px;
}
#mainContent .boxWithPadding p{
  margin-top: 0px;
  line-height: 1.9em;
  padding-right: 20px;
}

#mainContent img.authorPhoto,
#mainContent span.authorPhoto{
  float: left;
  margin-right: 20px;
  margin-top: 3px;
  position: relative;
}
#mainContent span.authorPhoto img.authorPhoto{
  margin: 0;
  z-index: 1;
}
#mainContent span.authorPhoto, #mainContent span.authorPhoto span.mask{
  width: 135px;
  height: 116px;
}
#mainContent span.authorPhoto{
  overflow: hidden;
}
#mainContent span.authorPhoto span.mask{
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: url('../images/photoMask.png') left top no-repeat;
}

ul.possibilities{
  margin-top: 40px;
  margin-bottom: 35px;
}

ul.possibilities li{
  margin-bottom: 15px;
  padding: 10px 150px 20px 158px;
  position: relative;
  right: 6px;
}

ul.possibilities li h4{
  margin-top: 18px;
}    

ul.possibilities li p{
  margin: 5px 0px;
  line-height: 1.75em !important;    
}

ul.possibilities .breakfast{
  background: url('../images/breakfast-illustration.png') no-repeat left center; 
}

ul.possibilities .reading{
  background: url('../images/reading-illustration.png')  no-repeat left center; 
}

ul.possibilities .laptop{
  background: url('../images/laptop-illustration.png')  no-repeat left center; 
}

/* Btn */
.redButton, .greenButton, .greenSmallButton{
  outline: none;
  text-decoration: none !important;
}
.redButton span, .greenButton span, .greenSmallButton span{
  color: #FFFFFF;
}
.redButton{
  background: transparent url('../images/redButtonRight.png') no-repeat scroll top right; 
  display: block;
  float: left;
  height: 67px; 
  padding-right: 11px;
  font-weight:bold;
  font-size: 24px;
  color: white;
}
#config .redButton{
  float: right;
  margin-left: 1em;
}

.redButton span{
  background: transparent url('../images/redButtonLeft.png') no-repeat; 
  display: block;
  line-height: 60px; 
  padding: 0 30px 7px 40px;
}

.greenButton{
  background: transparent url('../images/greenButtonRight.png') no-repeat scroll top right; 
  display: block;
  float: left;
  height: 51px; 
  margin-right: 15px;
  padding-right: 10px;
  font-weight:bold;
  font-size: 1.2em;
  color: white;
  text-shadow: 2px 2px 3px #000;
}

.greenButton span{
  background: transparent url('../images/greenButtonLeft.png') no-repeat; 
  display: block;
  line-height: 45px; 
  padding: 0 10px 6px 20px;
} 


.redButton.active, .redButton:hover,
.greenButton.active{
  background-position: bottom right !important; 
}
.greenButton:hover{
  background-position: right -51px;
}

.redButton.active span, .redButton:hover span,
.greenButton.active span{
  background-position: bottom left !important; 
}
.greenButton:hover span{
  background-position: left -51px;
}

.greenSmallButton{
  background: transparent url('../images/greenSmallButtonRight.png') no-repeat scroll top right;
  display: block;
  float: left;
  height: 37px;
  margin-right: 15px;
  padding-right: 7px;
  font-weight:bold;
  font-size: 1.2em;
  color: white;
}

.greenSmallButton span{
  background: url('../images/greenSmallButtonLeft.png') no-repeat scroll 0 0 transparent;
  display: block;
  line-height: 32px;
  padding: 0 7px 5px 17px;
}


.greenSmallButton:hover{
  background-position: bottom right;
}

.greenSmallButton:hover span{
  background-position: bottom left;
}

.greenText{
  color: #a6c34b !important;
  font-size: 1.1em;
}

.greenText .greenPrice{
  color: #5b7114;
  font-size: 1.95em;
  position: relative;
  top: 0.1em;
}

.imgWrapper{
  border: 1px dashed #e6e6e6;
  padding: 5px;
  display: table;
  font-size: 0px;
}

.imgWrapper img{
  margin: 0px;
}

.parameters{
  margin-left: 30px;
  color: #525252;
}
.parameters table{
  border-collapse: collapse;
}
.parameters td{
  padding-bottom: 0.45em;
}

.parameters td img{
  position: relative;
  top: 2px;
}

.parameters .grey{
  padding-right: 1em;
}

/* Stripe */
.longGradient{
  background: transparent url('../images/stripe2-bg.png') repeat-x; 
  height: 602px;
}

.longGradient .inner, .mediumGradient .inner{
  width: 926px;
  margin: 0 auto 0 auto;
  padding-left: 25px;
}

.mediumGradient{
  background: transparent url('../images/stripe1-bg.gif') repeat-x;
  height: 439px;
}

.stripe{
  color: white;
  overflow: hidden;
}

.stripe p{
  margin-top: 0px;
  font-size: 0.9em;
}

.stripe h2{
  font-size: 3.0em;
  margin-top: 26px;
  margin-bottom: 12px;
}

.orderGroup{
  clear: both;
  margin-left: 41px;
  margin-top: 40px;
}

.orderGroup span.price{
  font-size: 2.05em;
  margin-left: 40px;
}

.orderGroup span.amount{
  font-size: 3.4em;
  letter-spacing: 0.025em;
  font-weight: bold;
  margin-left: 5px;
}

.orderGroup span.amount small{
  font-size: 0.85em;
  margin-left: 10px;
}

.chronologicalOrder{
  margin-top: 50px;
  margin-bottom: 56px;
}

.chronologicalOrder .first{
  background: transparent url('../images/chronological-first-bg.png') no-repeat top left !important;    
}

.chronologicalOrder .first p{
  padding-left: 0px !important;
}

.chronologicalOrder .last{
  background: transparent url('../images/chronological-last-bg.png') no-repeat top right !important;    
}

.chronologicalOrder .last p{
  padding-right: 0px !important;
  padding-left: 5px !important;
}

.chronologicalOrder .columnQuarter{
  background: transparent url('../images/chronological-bg.png') no-repeat top center; 
  padding-top: 20px;
}

.chronologicalOrder .columnQuarter p{
  color: #7d7d7d !important;
  font-size: 0.8em;
  line-height: 1.4em !important;
  padding: 0px 20px;
}

.galleryFrames .galleryFrame{
  width: 131px;
  height: 110px;
  float: left;
  background: transparent url('../images/frame-bg.png') no-repeat;
  margin-right: 25px;
  position: relative;
  margin-bottom: 18px;
}

.galleryFrames .last{
  margin-right: 0px;
}

.galleryFrames .galleryFrame a{
  border: 0px;
  position: relative;
  top: 5px;
  left: 5px;
  overflow: hidden;
}


.galleryFrames .galleryFrame a img{
  border: 0px;
}

.coulouredFan{
  padding-left: 234px;
  background: transparent url('../images/colouredFan-bg.png') left 21px no-repeat;
}

.orderComplete{
  padding-left: 300px;
  background: url('../images/complete-illustration.png') left center no-repeat;
  min-height: 194px;
  margin-top: 4em;
}
.orderComplete h1{
  margin-top: 0;
}
.orderComplete p, .orderComplete p *{
  font-size: 19px;
}

#galleriffic{
  height: 318px;
}

#galleriffic .slideshow-container{
  background: transparent url('../images/galleryBackground.png') no-repeat;
  width: 550px;
  height: 345px;
  display: block;
  margin-top: -2px;
}

#galleriffic .slideshow-container img{
  border: 0 none;
  left: 2px;
  position: relative;
  top: 7px;
}

#galleriffic .thumbs{
  width: 330px;
  margin: 0px 9px 0px 0px;
}

#galleriffic a.more{
  display: block;
  width: 92px !important;
  height: 92px !important;
  background: url('../images/emptyField.png') left top no-repeat;
  outline: none;
}

#galleriffic .thumbs li{
  width: 92px;
  height: 92px;
  display: inline-block;
  margin: 0px 21px 20px 0px;
  font-size: 0px;
  position: relative;
  float: left;
}
#galleriffic .thumbs li.last{
  margin-right: 0;
}

#galleriffic .thumbs li span{
  position: absolute;
  width: 82px;
  height: 82px;
  border: 5px solid white;
  visibility: hidden;
}


#galleriffic .thumbs li.selected span{
  visibility: visible;
}

#galleriffic .thumbs li a{
  display: block;
  width: 84px;
  height: 84px;
}

#galleriffic .thumbs li a img{
  border: 0px;
}

#galleriffic #controls{
  display: block;
  height: 30px;
  text-align: center;
  position: relative;
  bottom: 26px;
}

#galleriffic #controls a{
  color: white;
  margin-left: 14px;
  font-size: 1.3em;
  outline: none;
}

/* Order */
.styledInput{
  background: url('../images/styledInput-bg.png') no-repeat scroll 0 0 transparent;
  border: 0 none;
  height: 19px;
  padding: 8px 10px;
  width: 172px;
}
.styledInput_err{
  background-image: url('../images/styledInput-bg_err.png');
}

.styledTextarea{
  background: transparent url('../images/styledTextarea-bg.png') no-repeat;
  border: 0px;
  padding: 7px 10px;
  width: 471px;
  height: 148px;
  overflow: auto;
}

.orderTable{
  width: 537px;
  margin-top: 10px;
  border-collapse: collapse;
}

.orderTable td{
  padding-bottom: 2px;
  color: #383838;
}

.orderTable .label{
  text-align: right;
  padding-right: 20px;
  width: 80px;
}

.orderTable input, .orderTable textarea{
  font-size: 14px;
}

.orderTable .optional{
  color: #afafaf;
}

ul.radioButtonGroup{
  position: relative;
  right: 3px;
  margin-top: 23px;
  margin-bottom: 23px;
}

ul.radioButtonGroup li{
  margin-bottom: 8px;
}

ul.radioButtonGroup li input{
  margin-right: 14px;
}

ul.radioButtonGroup em{
  font-style: normal;
  color: #B3B3B3;
  padding-left: 0.5em;
}

.orderTable div.gradient{
  background: url('../images/formGradient.gif') left top repeat-x;
  padding: 1em;
  border: 1px solid #F0F0F0;
  margin: 1.5em 0;
}
.orderTable div.gradient label{
  font-size: 14px;
}

.orderBox{
  margin-top: 47px;
  margin-bottom: 27px;
}

.orderBox .orderText{
  color: #51680b;
  font-size: 2.2em;
  color: #98ba2f;
}


.orderBox .orderAmount{
  color: #51680b;
  font-size: 2.8em;
  color: #5b7114;
}

.orderBox .wideSubmitButton{
  height: 25px;
  background: url('../images/greenSubmitButtonWide.png') no-repeat;
  width: 166px;
  height: 51px;
  color: white;
  font-size: 1.6em;
  padding: 0px 0px 7px 0px;
  background-position: top;
}

.orderBox .wideSubmitButton:hover{
  background-position: bottom;
}

/*Custom Radio button*/
.radio{
	width: 19px;
	height: 25px;
	padding: 0 8px 0 2px;
	background: url('../images/radio.gif') no-repeat;
	display: block;
	clear: left;
	float: left;
  position: relative;
  bottom: 2px;
}

.checkbox{
	width: 28px;
	height: 26px;
	background: url('../images/checkBox.png') no-repeat;
	display: block;
	clear: left;
	float: left;
  position: relative;
  bottom: 3px;
  margin-right: 1em;
  overflow: hidden;
}

/*Footer*/
#footer form{
  margin-top: 15px;
}

#footer form .greenLbl{
  background: #7ca621;
  color: white;
  width: 60px;
  height: 28px;
  display: block;
  line-height: 28px;
  font-size: 0.8em;
  text-align: right;
  padding-right: 10px;
  margin-right: 3px;
  margin-bottom: 2px;
}

#footer form input, #footer form textarea{
  background: #ebebeb;
  border: 0px;
  width: 326px;
  height: 20px;
  padding: 4px 5px 4px 5px;
  margin-bottom: 3px;
  display: block;
  font-size: 0.8em;
}

#footer form .greenSubmitButton{
  background: url('../images/greenSubmitButton.png') no-repeat;
  width: 79px;
  height: 43px;
  padding: 0px 0px 5px 0px;
  color: white;
  font-size: 1.45em;
  background-position: top;
}

#footer form .greenSubmitButton:hover{
  background-position: bottom;
}


#footer form textarea{
  height: 95px;
  margin-bottom: 8px;
  overflow: auto;
  
}


#footer{
  width: 926px;
  margin: 0 auto 0 auto;
  text-align: left;
  overflow: hidden;
}


.columnHalf{
  float: left;
  width: 50%;
}

.columnQuarter{
  width: 25%;
  float: left;
}

.columnOneThird{
  width: 33%;
}

.columnTwoThirds{
  width: 66%;
}

.columnOneThird .inner
{
  width: 95% !important;
}

#footer .columnHalf p{
  font-size: 0.8em;
  line-height: 1.75em;
  padding-left: 28px;
  margin-bottom: 24px;
}

#footer .columnHalf .left{
  padding-right: 70px;
}

#footer .columnHalf .right{
  padding-left: 54px;
}

#footer .columnHalf .inner h3{
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 11px;
  margin-bottom: 10px;
  padding-top: 1em;
  margin-top: 0;
}

#footer .icoInfo{
  background: url('../images/ico-info.png') no-repeat;
}

#footer .icoPhone{
  background: url('../images/ico-phone.png') no-repeat; 
  background-position: 0px 2px;    
}

#footer .icoMail{
  background: url('../images/ico-mail.png') no-repeat; 
  background-position: 0px 2px;    
}

#footer .inlineList{
  margin-top: 65px;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  padding: 22px 0px 26px 0px ;
}

#footer .inlineList li{
  background: url('../images/listSeparator-bg.png') no-repeat right; 
  padding-right: 20px;
  padding-left: 10px;
  font-size: 0.80em;
}

#footer .inlineList li.last{
  background: none;
}

#footer .fontaiLogo{
  background: url('../images/fontai-logo.png') no-repeat right; 
  width: 143px;
  height: 15px;
  display: block;
  margin: 22px auto 80px auto;
  color: transparent;
}

#makeItYourself{
  height: auto;
}
#makeItYourself div.inner{
  width: 100%;
  padding-left: 0;
  background: url('../images/stripe1-bg_bottom.gif') left bottom repeat-x;
  height: auto;
}
#config{
  width: 926px;
  position: relative;
  top: 50px;
  margin: 0 auto;
  margin-bottom: 85px;
  border-collapse: collapse;
}
#config td, #config th{
  vertical-align: top;
}
#config th, #config .th{
  font-size: 18px;
  text-align: left;
  padding-left: 25px;
	padding-top: 20px;
}
#config td.prev div{
  width: 412px;
  height: 286px;
  padding: 24px;
  position: relative;
}
#config td.prev img{
  position: relative;
  z-index: 1;
}
#config td.prev span{
  display: block;
  position: absolute;
  z-index: 10;
}
#config td.prev span.frame{
  width: 460px;
  height: 336px;
  background: url('../images/frameShadow.png') left top no-repeat;
  left: 0;
  top: 0;
}
#config td.prev span.loading{
  width: 412px;
  height: 286px;
  left: 24px;
  top: 24px;
  background: #FFFFFF url('../images/theme_loading.gif') center center no-repeat;
  display: none;
}
#config a.selector, #config a.selector span{
  display: block;
  width: 56px;
  height: 55px;
  overflow: hidden;
}
#config a.selector{
  float: left;
  position: relative;
  margin: 5px;
  cursor: pointer;
  background: url('../images/selector_loading.gif') center center no-repeat;
}
#config a.selector img{
  position: relative;
  z-index: 0;
}
#config a.selector span.mask{
  position: absolute;
  left: 0;
  top: 0;
  background: url('../images/selectorMask.png') left top no-repeat;
  z-index: 10;
}
#config a.selector_active span.mask{
  background-position: left bottom;
}
#config a.customBtn, #config form{
  margin: 5px;
  margin-top: 7px;
}
#config a.customBtn{
  cursor: pointer;
  float: left;
  margin: 5px;
  margin-top: 7px;
}
#config form{
  float: left;
  width: 56px;
  height: 55px;
  overflow: hidden;
  margin-left: 7px;
}
#config form a.customBtn{
  margin: 0;
}
#config form div{
  position: relative;
}
#config form input{
  position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	border: 300px solid transparent;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
	filter: alpha(opacity=0);
	-o-transform: translate(-300px,-300px) scale(10);
	-moz-transform: translate(-800px,0) scale(10);
	cursor: pointer;
	z-index: 2;
}
#config div.custom{
  float: left;
}
#config .uploads{
  border-collapse: collapse;
  clear: both;
}

.file_upload_progress{
  vertical-align: middle !important;
	padding: 0 10px;
	min-width: 100px;
}
.file_upload_progress .ui-progressbar-value{
  background:#666666;
}
.file_upload_progress div{
  width: 100%;
	height: 5px;
	position: relative;
	top: 0;
}
.file_upload_progress div div{
  top: -12px;
}
.file_upload_cancel a{
  cursor:pointer;
}

.colorpicker{
  z-index: 500;
}

p.msg{
  color: #698F17 !important;
  font-size: 13px !important;
  padding: 0;
  line-height: 1.3em !important;
  margin-bottom: 1em !important;
}
#mainContent p.msg{
  font-size: 14px !important;
}
p.msg_err{
  color: #BE1E27 !important;;
}

div.error404{
  padding-left: 350px;
  position: relative;
	top: 2.5em;
  padding-bottom: 1em;
  background: url('../images/404.png') 60px 1.25em no-repeat;
  margin-bottom: 4em;
}
div.error404 h1, div.error404 p{
  color: #A5A5A5 !important;
}
div.error404 h1{
  font-size: 100px;
  margin-bottom: 0;
}
div.error404 p{
  font-size: 24px;
  margin-top: 0.15em;
  margin-bottom: 0.5em;
  margin-left: 0.15em;
}

#mainContent span.colorPrev, #mainContent span.colorPrev span{
  display: block;
  width: 23px;
  height: 22px;
}
#mainContent span.colorPrev{
  position: relative;
  overflow: hidden;
}
#mainContent span.colorPrev span{
  position: absolute;
  left: 0;
  top: 0;
  background: url('../images/colorPrev_mask.png') left top no-repeat;
  z-index: 10;
}

.lightboxNoticeContent {
  font-size: 24px;
  color: #7ca621;
  padding: 30px 0;
  text-align: center;
}