/*
Theme Name: ALISON RENWICK - ART CONSULTANCY
Version: 1.0
Description: Custom website for Alison Renwick
Author: Intervision Design (Ehren Fergusson)
Author URI: http://www.intervisiondesign.com
*/





/************************************/
/*** CSS CODED BY EHREN FERGUSSON ***/
/************************************/






/************************************/
/************ START CSS *************/

html {height:100%;}
body {margin:0px; padding:0; line-height:1.5em; height:100%; background:#fff;}
body,td,th {color:#333; font-family: 'Open Sans', serif; font-size: 12px; font-weight: 300;}

/**********************************/
/************* RESET **************/

h1, h2, h3, h4, h5, h6, div, a, li, ul, fieldset, form, p, span {padding:0; margin:0; text-decoration:none; font-weight:300; list-style:none; border:0; outline:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; margin: 0; padding: 0;}
img { margin: 0 0 -7px 0; padding:0; outline:none; border:0;}
h1, h2, h3, h4, h5, h6 {font-weight:300; color: 333; line-height: 1em;}

input[type="button"],input[type="submit"] {-webkit-appearance: none;}
a { color:#333; outline:none; text-decoration:none; cursor:pointer;}
a:hover { color:#f60;}
.clear {clear:both;}
.gap { height: 20px;}
.hidden { overflow: hidden;}
::selection {background: #f1f1f1; color:#333;}
::-moz-selection {background: #f1f1f1; color:#333;}


/************************************/
/*************** MAIN ***************/

#header {}
	.myhead { margin: 0 auto; width: 1020px; position: relative; display: block;}
	#logo {}
		#logo h1 {border-bottom: 1px solid #ccc; height: 159px; margin: 0 45px 0 0;}
		#logo h1 img { width: 100%; height: auto; margin: 100px 0 0 0;}
	#menu { border-bottom: 1px solid #ccc; height: 160px; position: relative; display: block;}
#content {}
#slideshow { margin: 30px 0; position: relative; display: block;}
#slideshow li { float: left; position: relative; display: block;}
.homepages .textpage, .smallpages .textpage { margin: 0 45px 20px 0; border-bottom: 1px solid #ccc;}
.largepages .feature { margin: 30px 45px 30px 0; display: block;}
.largepages .feature img { width: 100%; height: auto;}
.smallpages .feature { margin: 30px 0; display: block;}

#artist_grid { padding: 30px 0;}
.artistitem { margin: 7px;}
	.artistitem img { width: 100%; height: auto;}
	.artistitem h3 { padding: 10px 0 0 0; font-size: 12px;}
	.artistitem span { display: block;}
.artist_work { margin: 7px;}
	.artist_work img { width: 100%; height: auto;}
	.artist_work h3 { padding: 10px 0 0 0; font-size: 12px;}
.single_artwork {}
	.buythis { padding: 30px;}
	.text .limit { overflow: hidden; height: 72px;}
#related {}
	#related .item { margin: 5px;}
	#related span { background: #333; display: block;}
	#related img { width: 100%; height: auto;}
	#related h4 { display: none;}
#collection {}
	#collection .item { margin: 5px;}
	#collection span { background: #333; display: block;}
	#collection img { width: 100%; height: auto;}
	#collection h4 { text-align: center; font-size: 12px; padding: 5px 0;}
.copyright { border-top: 1px solid #ccc; text-align: right; font-size: 10px; color: #999; padding: 15px 0;}

#scrollto { padding: 15px 0; text-align: center; font-size: 14px; color: #fff; background: #333; cursor: pointer; margin: 0 0 10px 0;}

/************************************/
/*************** MENU ***************/

#menu ul {text-align: center; position: absolute; bottom:0; right: 0;}
#menu ul li { display: inline; float: left; position: relative; }
#menu ul li a {}
#menu ul li a h2 {font-size: 14px; color: #666; padding: 15px 10px; text-transform: uppercase;}
#menu ul li:hover a h2 { color: #000}
#menu ul li.current-menu-item a h2, #menu ul li.current-menu-parent a h2 { font-weight: 700;}

#menu ul ul { display: none;}

/************************************/
/*********** TEXT STYLING ***********/

h2.title { font-size: 14px; line-height: 1.5em; padding: 30px 0 5px 0; text-transform: uppercase;}
h2.title1 { font-size: 14px; line-height: 1.5em; padding: 30px 0 5px 0;}
h2.title2 { font-size: 14px; line-height: 1.5em; padding: 0 0 5px 0;}
.text { line-height:1.5em; display:block; padding: 5px 0 10px 0;}
.text p { padding:0 0 7px 0;}
.text ul { padding:0 0 7px 0;}
.text ul li { list-style:square; list-style-position:outside; margin:0 0 0 20px;}
.text a { font-weight: 400;}
.text h6 { font-size:12px;}
.text h5 { font-size:14px;}
.text h4 { font-size:18px;}
.text h3 { font-size:24px;}
.text h2 { font-size:32px;}
.text h1 { font-size:36px;}
.text input, .text textarea { margin:3px 5px 3px 0; padding:4px 10px; border:1px solid #666; background:#fff; color:#666; width: 90%; font-size:12px;}
.text textarea { height:100px;}
.text input:focus, .text textarea:focus { background:#444;}
input[type="button"],input[type="submit"] { width:auto; border:1px solid #000; background:#333; color:#fff; font-size:12px; cursor:pointer;}
input:hover[type="button"],input:hover[type="submit"] { background:#1a1a1a; border:1px solid #000;}

#gal_desc .text { padding: 0 0 20px 0; color: #999;}

#myroom {width: 300px; height: 300px; background: url(images/myroom.jpg) no-repeat; position: relative; display: block; border-top:1px solid #ccc;}
.mychair { position: absolute; bottom: 0; left: 0; z-index: 99; background: url(images/mychair2.png) no-repeat; width: 300px; height: 300px;}
.mypicture { background: #666; position: absolute; left: 65px; bottom: 120px; /*width: 35px; height:47px;*/ z-index: 9; overflow: hidden;}
.mypicture img { width: 100%; height: 100%; opacity: 0.5; display: none;}

/************************************/
/************* COMMENTS *************/

.commentboxes .text { padding:20px;}
#commentform { display:block; padding:15px;}
#commentform input[type="text"] { width:200px;}
#commentform textarea { height:65px; width:430px;}
#comments {display:block;}
#comments h2 { font-size:18px; padding:15px; font-weight:700;}
#comments ol { margin:0; padding:0 15px;}
#comments ol li { border-top:1px solid #ccc; padding:10px 20px;}
#comments ol li .quote {}
#comments ol li cite { font-size:10px; padding:10px 0; color:#999;}

/************************************/
/************ ALIGNMENTS ************/

.aligncenter { display: block; margin-left: auto; margin-right: auto; padding:10px 0;}
.wp-caption { border: 1px solid rgba(0,0,0,0.6); text-align: center; background-color:rgba(0,0,0,0.5); color:#fff; padding-top: 4px; margin-bottom: 10px; }
.wp-caption.alignleft { margin: 0px 10px 10px 0px; }
.wp-caption.alignright { margin: 0px 0px 10px 10px; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
.alignright { float: right; margin:0 0 10px 10px;}
.alignleft { float: left; margin:0 10px 10px 0;}
img.alignleft { display:inline; float:left; margin:2px 10px 0 0 !important;}
img.alignright { display:inline; float:right; margin:2px 0 0 10px !important;}

/************************************/
/************* PAGENAVI *************/

.wp-pagenavi { font-size:13px; margin:0 auto; background:#fff; padding:10px 0 0 10px; text-align:right;}
#pagenavs span.pages, #pagenavs span.extend { cursor:text;}

/************************************/
/********** CONTACT FORM 7 **********/

.wpcf7-form .wpcf7-validation-errors{ border:none;  background-color:#eacebd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form .wpcf7-mail-sent-ok{ border:none;  background-color:#daeabd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form .wpcf7-mail-sent-ng{ border:none;  background-color:#eacebd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form span.wpcf7-not-valid-tip{ border:none;  background-color:#eacebd;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}

/***************************/
/********** GRIDS **********/
/***************************/

.block 				{box-sizing:border-box;width:100%;}
.center 			{margin:0 auto;width:1020px; position: relative; display: block; overflow: auto;}
.grid .block 		{float:left;}
.grid .hundred 		{width:100%;}
.grid .ninety 		{width:90%;}
.grid .eighty 		{width:80%;}
.grid .seventyfive 	{width:75%;}
.grid .seventy 		{width:70%;}
.grid .sixtysix 	{width:66.666%;}
.grid .sixty 		{width:60%;}
.grid .fifty 		{width:50%;}
.grid .forty 		{width:40%;}
.grid .thirtythree 	{width:33.333%;}
.grid .thirty 		{width:30%;}
.grid .twentyfive 	{width:25%;}
.grid .twenty 		{width:20%;}
.grid .ten 			{width:10%;}
.not-desktop 		{display:none;}
.tablet 			{display:none;}
.phone 				{display:none;}

/***************************/
/********* DESKTOP *********/
/***************************/

@media (min-width: 1025px) {
.grid .desktop-to-hundred 		{width:100%;}
.grid .desktop-to-ninety 		{width:90%;}
.grid .desktop-to-eighty 		{width:80%;}
.grid .desktop-to-seventyfive 	{width:75%;}
.grid .desktop-to-seventy 		{width:70%;}
.grid .desktop-to-sixtysix 		{width:66.666%;}
.grid .desktop-to-sixty 		{width:60%;}
.grid .desktop-to-fifty 		{width:50%;}
.grid .desktop-to-forty 		{width:40%;}
.grid .desktop-to-thirtythree 	{width:33.333%;}
.grid .desktop-to-thirty 		{width:30%;}
.grid .desktop-to-twentyfive 	{width:25%;}
.grid .desktop-to-twenty 		{width:20%;}
.grid .desktop-to-ten 			{width:10%;}
}

/***************************/
/**** TABLET TO DESKTOP ****/
/***************************/

@media (min-width: 768px) and (max-width: 1024px) {
#mylogo { margin: 0 auto;}
.center, .myhead 				{margin:0;width:100%;}
.tablet 						{display:block;}
.not-desktop 					{display:none;}
.not-tablet 					{display:none;}
.grid .tablet-to-hundred 		{width:100%;}
.grid .tablet-to-ninety 		{width:90%;}
.grid .tablet-to-eighty 		{width:80%;}
.grid .tablet-to-seventyfive 	{width:75%;}
.grid .tablet-to-seventy 		{width:70%;}
.grid .tablet-to-sixtysix 		{width:66.666%;}
.grid .tablet-to-sixty 			{width:60%;}
.grid .tablet-to-fifty 			{width:50%;}
.grid .tablet-to-forty 			{width:40%;}
.grid .tablet-to-thirtythree 	{width:33.333%;}
.grid .tablet-to-thirty 		{width:30%;}
.grid .tablet-to-twentyfive 	{width:25%;}
.grid .tablet-to-twenty 		{width:20%;}
.grid .tablet-to-ten 			{width:10%;}

h2.title { padding: 30px 0 0 15px;}
h2.title2 { padding: 0 0 5px 15px;}
.text { padding: 15px 0 15px 15px;}
.largepages .text {padding: 15px 15px 15px 0;}
.copyright {padding: 15px;}
}

/***************************/
/***** TABLET TO PHONE *****/
/***************************/

@media (max-width: 767px) {
.center, .myhead 				{margin:0;width:100%;}
.desktop 						{display:none;}
.not-desktop 					{display:block;}
.tablet 						{display:block;}
.not-tablet 					{display:none;}
.phone 							{display:block;}
.not-phone 						{display:none;}
.grid .phone-to-hundred 		{width:100%;}
.grid .phone-to-ninety 			{width:90%;}
.grid .phone-to-eighty 			{width:80%;}
.grid .phone-to-seventyfive 	{width:75%;}
.grid .phone-to-seventy 		{width:70%;}
.grid .phone-to-sixtysix 		{width:66.666%;}
.grid .phone-to-sixty 			{width:60%;}
.grid .phone-to-fifty 			{width:50%;}
.grid .phone-to-forty 			{width:40%;}
.grid .phone-to-thirtythree 	{width:33.333%;}
.grid .phone-to-thirty 			{width:30%;}
.grid .phone-to-twentyfive 		{width:25%;}
.grid .phone-to-twenty 			{width:20%;}
.grid .phone-to-ten 			{width:10%;}

#logo h1 {border-bottom: none; height: 70px; margin: 20px;}
#logo h1 img { margin: 0;}
#menu { border-bottom: 1px solid #ccc; height: auto;}
#menu ul { float:left; position: relative;}
#menu ul li { display: inline-table; float:none;}
#menu ul li a h2 { font-size: 18px; padding: 5px 10px;}
.single_artwork img {  width: 100%; height: auto;}
.copyright { text-align: center;}
h2.title, h2.title1, h2.title2 { padding: 20px 20px 0 20px; font-weight: 700;}
.text { padding: 20px;}
.buythis { text-align: center; font-size: 18px;}
.buythis li { padding: 5px 0;}
.buythis a {font-weight: 400;}
.homepages .textpage, .smallpages .textpage { margin: 0 0 0 0; border-bottom: none;}
.largepages .feature, .smallpages .feature { margin: 30px 0 0 0;}
.smallpages .feature img { width: 100%; height: auto;}
}

/***************************/

/************************************/
/************* END CSS! *************/