/*----------------------------------------------------
	
	SCREEN.CSS
	
----------------------------------------------------*/

@import url("reset.css");

@font-face 					{font-family:'DeliciousBold'; src:url('../fonts/delicious-bold-webfont.eot'); src:url('../fonts/delicious-bold-webfontd41d.eot?#iefix') format('embedded-opentype'), url('../fonts/delicious-bold-webfont.woff') format('woff'), url('../fonts/delicious-bold-webfont.ttf') format('truetype'), url('../fonts/delicious-bold-webfont.svg#DeliciousBold') format('svg'); font-weight:normal; font-style:normal;}


/*--- 1-0. Common Elements ---------------------------------------------------------------------------*/

body						{background:url(../img/_bkg.jpg) center top #F9F5F2; color:#404041; font-family:Arial, Helvetica, sans-serif; font-size:62.5%; padding:0 10%;}

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


/*--- 1-2. Main Layout ---------------------------------------------------------------------------*/

#mc							{margin:0px auto; min-width:240px; max-width:1600px; position:relative;}


/*--- 1-3. Response Elements ---------------------------------------------------------------------------*/

.wpcf7-display-none			{display:none;}
.wpcf7-response-output		{color:#FFFFFF; cursor:pointer; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:1.55em; margin:10px 0; padding:5px 11px 6px 29px; position:relative; text-shadow:0 1px 0 rgba(0,0,0,0.3); width:100%; zoom:1; -moz-border-radius:4px; border-radius:4px; -moz-box-sizing: padding-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.no-boxsizing .wpcf7-response-output	{width:80%}
.wpcf7-validation-errors	{background:url(../img/icon_warning_white.png) 7px 7px no-repeat #A84040; background:url(../img/icon_warning_white.png) 7px 7px no-repeat, -moz-linear-gradient(top, #BD6060, #A84040); background:url(../img/icon_warning_white.png) 7px 7px no-repeat, -ms-linear-gradient(top, #BD6060, #A84040); background:url(../img/icon_warning_white.png) 7px 7px no-repeat, -o-linear-gradient(top, #BD6060, #A84040); background:url(../img/icon_warning_white.png) 7px 7px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#BD6060), to(#A84040)); background:url(../img/icon_warning_white.png) 7px 7px no-repeat, -webkit-linear-gradient(top, #BD6060, #A84040); background:url(../img/icon_warning_white.png) 7px 7px no-repeat, linear-gradient(top, #BD6060, #A84040);}
.wpcf7-mail-sent-ok			{background:url(../img/icon_success_white.png) 7px 7px no-repeat #6C9C55; background:url(../img/icon_success_white.png) 7px 7px no-repeat, -moz-linear-gradient(top, #88B272, #6C9C55); background:url(../img/icon_success_white.png) 7px 7px no-repeat, -ms-linear-gradient(top, #88B272, #6C9C55); background:url(../img/icon_success_white.png) 7px 7px no-repeat, -o-linear-gradient(top, #88B272, #6C9C55); background:url(../img/icon_success_white.png) 7px 7px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#88B272), to(#6C9C55)); background:url(../img/icon_success_white.png) 7px 7px no-repeat, -webkit-linear-gradient(top, #88B272, #6C9C55); background:url(../img/icon_success_white.png) 7px 7px no-repeat, linear-gradient(top, #88B272, #6C9C55);}
.wpcf7-response-output ul		{list-style:none!important; margin:0!important;}
.wpcf7-response-output li		{padding:0!important;}
.wpcf7-response-output a		{color:#FFFFFF;}
.wpcf7-response-output a:hover	{text-decoration:none;}
.wpcf7-response-output span		{background:url(../img/_hintsvalidation.png) 0 -24px no-repeat; height:8px; position:absolute; right:4px; top:4px; width:8px;}



/*--- 2. SITEWIDE ELEMENTS ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--- 2-1. Header ---------------------------------------------------------------------------*/

header						{background:url(../img/_divide.png) center bottom repeat-x; background:url(../img/_divide.png) center 62px repeat-x, url(../img/_divide.png) center bottom repeat-x; padding:25px 0 4px 0;}
#logo						{display:block; margin:0 auto; width:255px;}


/*--- 2-2. Navigation ---------------------------------------------------------------------------*/

#nav						{font-family:'DeliciousBold', Arial, Helvetica, sans-serif; font-size:1.6em; margin:20px 0; text-align:center; text-transform:uppercase;}
#nav li						{margin:5px 0;}
#nav a						{background:#EFEDE9; background:#EFEDE9; background:rgba(84,82,75,0.05); color:#C3C3C0; display:block; padding:5px; text-decoration:none; -moz-border-radius:5px; border-radius:5px; -moz-transition:0.4s; -ms-transition:0.4s; -o-transition:0.4s; -webkit-transition:0.4s; transition:0.4s;}
#nav a:hover				{background:#404041; background:rgba(84,82,75,1); color:#F9F5F2;}


/*--- 2-3. Search ---------------------------------------------------------------------------*/

header form					{background:#EFEDE9; background:rgba(84,82,75,0.05); height:100%; margin:0 0 20px 0; overflow:hidden; -moz-border-radius:15px; border-radius:15px;}
header input[type='text']	{background:0; border:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:8px; width:75%; -webkit-appearance:none;}
header input[type='text']:focus	{border:0;}
header input[type='submit']	{background:url(../img/_spyglass.png) no-repeat; border:0; cursor:pointer; float:right; height:32px; padding:0 0 0 32px; text-indent:-9999px; width:32px;}
header input[type='submit']:hover	{background-position:right top;}


/*--- 2-4. Footer ---------------------------------------------------------------------------*/

footer						{background:url(../img/_divide.png) center top repeat-x; clear:both; color:#999999; margin:53px 0 0 0; padding:44px 0; text-align:center;}
footer a					{background:url(../img/_fin.png) no-repeat; display:inline-block; height:47px; text-indent:-9999px; width:66px;}
footer a:hover				{background-position:0 -47px;}

/*--- 2-5. Gallery ---------------------------------------------------------------------------*/

#gallery					{margin:28px 0 0 0; text-align:center;}
#gallery li					{background-color:#EAE9E6;list-style-type:none; border:1px solid #D1D1CE; border-color:rgba(0,0,0,0.1); margin:20px auto; padding:9px; width:220px; -moz-border-radius:5px; border-radius:5px;}
#gallery h2					{color:#54524B; font-family:Tekton Pro; font-size:1.4em; text-align:center;  margin:8px 0 2px 0;}
#gallery .readmore			{float:right; margin:-20px 0 0 0;}
#contact-item				{display:block; padding-top:24px;}


/*--- 2-6. Paging ---------------------------------------------------------------------------*/

#paging						{color:#D1D0CD; font-size:1.2em; font-weight:bold; margin:37px 0 0 0; text-align:center; text-transform:uppercase;}
#paging li					{display:inline-block; margin:0 0 7px 0;}
#paging li:first-child		{display:block;}
#paging .page				{background:#CFCECB; background:rgba(63,63,64,0.2); display:block; height:20px; margin:0 5px; text-indent:-9999px; width:20px; -moz-border-radius:50%; border-radius:10px;}
#paging .page:hover			{background:#9A9998; background:rgba(63,63,64,0.5);}
#paging .page.current		{background:#3F3F40; background:rgba(63,63,64,1);}
#paging .next, #paging .prev,
.readmore					{background:url(../img/_arrows.png) 0 4px no-repeat; display:block; height:20px; margin:0 5px 0 0; text-indent:-9999px; width:39px;}
#paging .next,
.readmore					{background-position:-47px 4px; margin:0 0 0 5px;}
#paging .prev:hover			{background-position:0 -18px;}
#paging .next:hover,
.readmore:hover				{background-position:-47px -18px;}
#paging .prev.inactive		{background-position:0 -40px;}
#paging .next.inactive		{background-position:-47px -40px;}


/*--- 2-7. Hire us ---------------------------------------------------------------------------*/

.hire-us					{display:none;}



/*--- 3. PAGE SPECIFIC ELEMENTS ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--- 3-1. Index ---------------------------------------------------------------------------*/

#archive h1,
#strapline					{font-family:'DeliciousBold', Arial, Helvetica, sans-serif; font-size:3em; margin:47px 0 0 0; text-align:center; text-transform:uppercase;}
#strapline strong			{font-size:1.6em; vertical-align:-5px; }

#content					{background:url(../img/_divide.png) center top repeat-x; font-family:'Droid Serif', Arial, Helvetica, sans-serif; font-size:1.4em; margin:53px 0 -53px 0; padding:20px 0 17px 0;}
#content p					{line-height:1.7em; padding:13px 0 12px 0;}


/*--- 3-2. Single ---------------------------------------------------------------------------*/

section	h1					{font-family:'DeliciousBold', Arial, Helvetica, sans-serif; font-size:3.6em; margin:47px 0 10px 0; text-transform:uppercase;}
section	h2					{font-family:'DeliciousBold', Arial, Helvetica, sans-serif; font-size:2.8em; margin:30px 0 10px 0; text-transform:uppercase;}
h2.h2-notopmargin			{margin-top:0;}
section p					{font-family:'Droid Serif', Arial, Helvetica, sans-serif; font-size:1.4em; line-height:1.7em; padding:13px 0 12px 0;}
section img					{background:#EAE9E6; background:rgba(0,0,0,0.05); border:1px solid #D1D1CE; border-color:rgba(0,0,0,0.1); margin:10px 0 0 0; max-width:100%; padding:9px; -moz-box-sizing:padding-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-border-radius:5px; border-radius:5px;}


/*--- 3-3. Contact ---------------------------------------------------------------------------*/

form p						{height:100%; overflow:hidden; padding:5px 0 15px 0;}
section label				{display:block;}
section input[type='text'],
section textarea			{/*background:#EFEDE9; background:rgba(84,82,75,0.05); border:1px solid #DAD7D1; border-color:rgba(84,82,75,0.1);*/ font-family:Arial, Helvetica, sans-serif; font-size:12px; height:32px; max-width:100%; padding:5px 6px; width:250px; /*-moz-border-radius:5px; border-radius:5px;*/ -moz-box-sizing:padding-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
input[type='text']:focus,
textarea:focus				{border:1px solid #CECEC9; border-color:rgba(84,82,75,0.2); outline:none;}
section textarea			{height:150px; width:350px;}
section select				{font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:6px;}
section option				{padding:1px 10px 1px 2px;}
section input[type='submit']{background:#54524B; background:rgba(84,82,75,1); border:0; color:#F9F5F2; cursor:pointer; font-family:'DeliciousBold', Arial, Helvetica, sans-serif; font-size:16px; height:32px; text-transform:uppercase; width:100%; -moz-border-radius:5px; border-radius:5px;}
section input[type='submit']:hover	{background:#B5B4AF; background:rgba(84,82,75,0.4);}

.required, .optional		{background:url(../img/_hintsvalidation.png) -7px -36px no-repeat; display:block; height:5px; margin:4px 0 0 0; text-indent:-9999px; width:42px;}
.required					{background-position:-7px -42px; height:6px;}
.wpcf7-not-valid-tip-no-ajax{background:url(../img/_hintsvalidation.png) -11px 0 no-repeat; display:block; height:15px; margin:2px 0; text-indent:-9999px; width:14px;}

/*.borderradius label, .borderradius .wpcf7-not-valid-tip-no-ajax,
.borderradius .required		{margin-left:3px;}*/


/*--- 3-4. Pages ---------------------------------------------------------------------------*/

#page #content				{font-size:1.2em;}

#about-h2					{color:#757575; font-family:Georgia, "Times New Roman", Times, serif; font-size:3em; padding:30px 0 0 0;}



/*--- 4. MEDIA QUERIES ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--- 4-1. Form Modification ---------------------------------------------------------------------------*/

@media screen and (min-width:32.5em) {
	section input[type='text'], section textarea, section select, .required,
	.wpcf7-not-valid-tip-no-ajax	{float:left}
	.required						{margin:13px 0 0 10px;}
	.wpcf7-not-valid-tip-no-ajax	{margin:9px 0 0 10px;}
	section input[type='submit']	{width:150px;}
}


/*--- 4-2. 2 Column ---------------------------------------------------------------------------*/

@media screen and (min-width:45em) {
	body					{padding:0 5%;}
	#gallery 				{height:100%; margin-left:auto; margin-right:auto; overflow:hidden; width:580px;}
	#gallery li				{display:inline-block; margin:20px 2em;}
	#paging .next			{margin-left:15px;}
	#paging .prev			{margin-right:15px;}
	section img				{float:right; margin:0 0 20px 20px;}
}


/*--- 4-3. 3 Column ---------------------------------------------------------------------------*/

@media screen and (min-width:62em) {
	body					{padding:0 20px;}
	#logo					{margin-bottom:17px;}	
	#nav					{float:left; margin-top:-96px; width:320px}
	#nav li					{float:left; margin-right:15px;}
	#nav a					{background:0;}	
	header form				{float:right; margin-top:-77px; width:220px;}	
	#gallery 				{width:910px;}
	#gallery li				{margin:20px 30px;}	
	#content 				{padding-left:100px; padding-right:100px;}
	
	#about-h2				{background:url(../img/_cathedral.png) right center no-repeat; color:#757575; padding:130px 540px 130px 0;}
	#contact-content		{float:right; width:35%;}
	.wpcf7					{float:left; margin-bottom:30px; margin-top:-33px; width:55%;}
	section input[type='text']	{width:65%;}
	section textarea		{width:90%}
	section select			{min-width:75%;}

	.listening				{background:url(../img/_listening.png) no-repeat; display:block; height:311px; margin:20px auto 20px auto; text-indent:-9999px; width:743px;}
	.question				{display:block; font-size:1.4em; line-height:1.4em; text-align:center;}

	.cost-blocks			{height:100%; margin:0 auto; overflow:hidden; width:969px;}
	.beautiful, .quality, .tailored	{background:url(../img/_costheadings.png) 0 20px no-repeat; float:left; margin:0 10px; padding:160px 0 0 0; text-align:center; width:303px;}
	.quality				{background-position:0 -404px;}
	.tailored				{background-position:0 -794px;}

}


/*--- 4-4. 4 Column ---------------------------------------------------------------------------*/

@media screen and (min-width:78em) {
	#nav					{padding-left:5%;}
	header form				{margin-right:5%}
	#gallery 				{width:1210px;}
	section					{padding:0 5%;}
	#about-h2				{font-size:4.2em; padding-bottom:90px; padding-top:90px;}
	
	.hire-us				{background:url(../img/_hireus.png) no-repeat; display:block; height:175px; position:fixed; right:0; text-indent:-9999px; top:45px; width:42px;}
	.hire-us:hover			{opacity:0.7;}
}