/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, h10, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
	
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
	
body {line-height: 1;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}
	
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
	
table {	border-collapse: collapse;
		border-spacing: 0;	}
            


/* my css starts here */


p 				{ 	font-family:Arial, Verdana, sans-serif;
 					font-size:11pt;
 					color:black; 
 					text-align:left;
 					line-height:125%;}
 					
h1				{	font-family:Arial, Verdana, sans-serif;
 					font-size:14pt;
 					color:black; 
 					text-align:center;
 					font-weight:normal; }
 					
h2				{	font-family:Arial, Verdana, sans-serif;
 					font-size:40pt;
 					color: rgba(0, 0, 0, 0.5); 
 					opacity:0.0; } 					

h3				{	font-family:Arial, Verdana, sans-serif;
 					font-size:14.5pt;
 					color:black; 
 					text-align:center;}

h4				{	font-family:Arial, Verdana, sans-serif;
 					font-size:10pt;
					line-height:135%;
 					color:grey; 
					text-align:right;}

h5				{	visibility:hidden;	font-size:1pt}

h6 /* Copyright text*/	{	font-family:Arial, Verdana, sans-serif;
 					font-size:7.5pt;
 					color:grey; 
 					text-align:center;
 					font-weight:normal; }
					
h7				{	font-family:Arial, Verdana, sans-serif;
 					font-size:11pt;
 					color:504f4f; 
 					text-align:center;
					line-height:135%;
					margin-left:27px;}
					
h8				{	font-family:Arial, Verdana, sans-serif;
 					font-size:10pt;
 					color:#616363; 
 					text-align:left;}
					
h9				{	font-family:Arial, Verdana, sans-serif;
 					font-size:12pt;
 					color:#565452; 
 					text-align:center;
					line-height:135%;}
					
h10				{	font-family:Verdana, sans-serif;
					font-style:italic;
 					font-size:8pt;
 					color:black; }
	
 		
li 				{ 	font-family:Arial, Verdana, sans-serif;
 					font-size:10pt;
 					color:black;}	
 		
 		
body 			{	background-color:#ffffff} /* background-image:url('../images/lace.jpg')  */

body2			{	background-color:#ffffff}



table,	td, th		{font-family:Arial, Verdana, sans-serif;	font-size:11pt;		text-align: center;}
th					{height: 20px; vertical-align: middle;}
td					{height: 20px; vertical-align: middle;}		

hr					{width: 90%; color:black; background-color:black; noshade;}

a					{color:#630302;}

 /* CLASSES */
 
.border 	{border-style: solid; border-width: 1px; color:#211d21;}
.borderwhite 	{border-style: solid; border-width: 4px; color:white;}
.box-shadow  {box-shadow: 10px 10px 8px #888888; z-index:1;}
	
.caption	{	font-family:Arial, Verdana, sans-serif;
 					font-size:10pt;
 					color:#616363; 
 					text-align:left;}

.ghost 		{opacity: 0.0;}

.textcenter		{text-align:center;  }
 		
.redemphasis	{color:#630302; 		font-size	:14.5pt;	}
.blackemphasis	{color:#000000; 		font-size	:14.5pt;	}
.largetext		{font-size:20pt;}
.mediumit		{font-size:13pt;	font-style:italic;}

.medtext		{font-size:13pt;	letter-spacing:-1px;}
 					 
.float			{float:left;}

.alignleft		{text-align:left;}
 
.italic			{font-style:italic;		font-size:11pt;}

.italiclight	{font-style:italic;		font-size:14pt;		}

.bckgd			{background-color:#F8F5FC;		border:1px	black	solid;}

.centeredimage	{text-align:center;	margin-top:0px; margin-bottom:0px; 	padding:0px; }

.smalltext		{font-size: 10pt; color: #616363;}

.smallcaps		{font-size: 9pt; 	font-weight:bold;	text-transform:uppercase;  color:#630302;}

.prices			{font-size: 10pt;	line-height:20px;	text-align:center;	margin:30 0 0 10px;}

.rotateimg30  {transform: rotate(30deg);}
.rotateimg90  {transform: rotate(90deg);}

.captions		{font-family:Arial, Verdana, sans-serif;
 					font-size:10pt;
 					color:#616363; 
 					margin-top:4px;}
	



/* GALLERY CLASSES  */


.arrow			{width:115px; height:70px;	margin-left:27px; margin-top:30px;}

.grid {max-width: 1000px;	margin: 0 auto;	display: -webkit-box;	display: -ms-flexbox;	display: flex;
  -ms-flex-wrap: wrap;  flex-wrap: wrap; -webkit-box-pack: center;   -ms-flex-pack: center;      justify-content: center;}
  
  .grid-item {min-width: 250px; max-width: 250px;  -webkit-box-flex: 1; -ms-flex: 1 1 250px; flex: 1 1 250px;
  padding-left: .5rem; padding-right: .5rem; margin-bottom: 1rem;}

.portframe		{height:124px;		margin:0px 0px 100px 250px;	background-image :url('../images/portframe.png');	
/* this is the code that overlaps the image beneath  */	position:relative;		right:0px;		bottom:12px;}

					
.indexarrow	{width:442px; height:38px;		margin:0px 0px 0px 240px;	background-image :url('../images/arrow.jpg');
					position:relative;		right:0px;		bottom:12px;} 
					
.opacity	{background-image: url(../images/white.jpg);	opacity:0.5; filter:alpha (opacity=40);}
			
.pricelist	{width:201px; height:133px;		position:relative;		right:0px;	left:10px;	bottom:0px;	top:10px;  background-image: url('../images/dlist.png');}


.subheading	{line-height:200%;		font-size:10pt;		font-style:italic;		text-align:center;	color:#630302;}

.traditional{width:403px; height:38px;		margin:0px 0px 0px 240px;	background-image :url('../images/traditionalw.png');
					position:relative;		right:0px;		bottom:12px;}
				
			
						
.portraitslink		{width:103px;	height:51px;    visibility:hidden;
						position:relative;		right:0px;		bottom:0px;		top:21px;		left:77px;}
						
.artworklink	{width:88px;	height:45px;    visibility:hidden;
						position:relative;		right:0px;		bottom:0px;		top:21px;		left:152px;}


.cardslink		{width:71px;	height:38px;   visibility:hidden;
						position:relative;		right:0px;		bottom:0px;		top:-36px;		left:671px;}

  
 /* DIVISIONS */
   /* To create an image on top of another, create a div  for the top image. Use position:relative (or absolute); background-image: background-repeat:no-repeat; 
   height:0px; width:0px; z-index: (the order in which elements stack)*/

  
 #aboutme	{width:900px;  height:315px;	float: none;  background-image:url('../images/aboutword.png');}
 
 #epicindex {height:600px;	width:1080px; position:relative; 	background-repeat:no-repeat;   background-image:url('../images/epicindex3.jpg'); z-index: 2; }
   
  /*  #illustrationgallery	{background-image :url('../images/illustrationgallery.png'); height:60px; width:391px;	 position:relative; left:160px;	top:-500px;}*/
  /*  #shopgallery			{background-image :url('../images/shopgallery.png'); height:70px; width:312px; position:absolute;  left: 200px; top:100px; z-index: 1}*/

 #illustrationgallery	{background-image :url('../images/illustrationgallery.png');  height:70px; width:408px; position:absolute;  left: 770px; top:200px; z-index: 2;}
 #illustrationgalleryword	{background-image :url('../images/illustrationgalleryword.png');  height:48px; width:250px; position:absolute;  left: 230px; top:450px; z-index: 2;}

 #artshopword	{background-image :url('../images/artshopword.png');  height:67px; width:150px; position:absolute;  left: 230px; top:390px; z-index: 2;}

 #folksy {background-image :url('../images/folksy.png'); height:40px; width:93px; background-repeat:no-repeat; position:relative;}
 
 #shopgallery			{background-image :url('../images/shopgallery.png'); height:70px; width:311px; position:absolute; left: 190px; top:180px; z-index: 2}
 #shopgallery2			{background-image :url('../images/shopgallery.png'); height:70px; width:311px; position:absolute; left: 60px; top:10px; z-index: 2}

 
 #ironframe {text-align:center;  width:900px;  height:362px;	background-image:url('../images/ironframe2.png');}

 
 #wrapper  			{width:900px; margin:0px auto;  background-color:#ffffff;}
 #imagewrapper  	{background-color:#ffffff; width:900px; margin:0px auto; }
 #imagewrapper2  	{background-color:#ffffff; width:900px; margin:0px auto; }

  
 #contactext		{width:762px;	height:37px;	position:relative;		right:0px;		bottom:0px;		top:0px;		left:60px;  background-image:url(../images/indextext3.png)}
 
 #top		{width:100%; border-bottom:thin black solid; height:90px; padding-bottom: 15px; overflow:hidden;}
 
  
 #logo		{width:900px; height:125px; position:relative; background-color:#ffffff;	<a href="https://twitter.com/gifts_of_art" target="blank"><img alt="twitter" src="images/twitter.png" height="55"  style="margin:15px 1px  0px  180px"/></a>
   <a href="https://www.instagram.com/ironrose_art/" target="blank"><img alt="pinterest" src="images/instagram.png" height="55" style="margin:5px 1px  0px  20px"/></a>&nbsp; <a href="https://www.etsy.com/uk/shop/IronroseGifts" target="blank"><img src="images/facebook.png" alt="facebook" height="55" style="margin:45px 0px  0px  260px"/></a> <a href="https://www.etsy.com/uk/shop/IronroseGifts" target="blank"><img alt="etsyshop" src="images/etsy.png"  height="55" style="margin:25px 0px 0px 20px"/></a></div>
} 
			 
 
 #wall		{background-image:url('../images/artwall.png'); background-repeat:repeat-y;
 			width:900px; 	
 			text-align:center; }
 			
 #wallblue	{background-image:url('../images/wallblue.png'); background-repeat:repeat-y;
 			width:1000px; 	
 			text-align:center; }

 			
 #damansk	{background-image:url('../images/damansk.jpg'); background-repeat:repeat-y;
 			width:900px; 	
 			text-align:center; }

			
 #welcome {background-image:url(../images/welcome4.jpg);
 			width:900px; 
			height:142px;
 			text-align:center; }
 
 /* use this Div  for top navigation without drop down menus */
 #topnav			{clear:both;}
 #topnav ul 		{width:100%;  float:left;  margin:0px;   background-image:url('../images/topnavbar.png'); border-bottom:1px black solid;}
 #topnav ul li 		{display:inline;}
 #topnav ul li a	{float:left;	padding:5px  31px;		text-decoration:none;}
 
 #topnav a:link		{color:black;}
 #topnav a:visited	{color:#630302;}
 #topnav a:hover	{color:black;	background-color:#DDD8DE;} 
 #topnav a:active	{color:black;}
 #topnav a:focus	{color:black;}

#prices				{margin-bottom:20px;}
#prices	table		{width:200px;	font-family:Arial, Verdana, sans-serif;	font-size:11pt;	border:2px solid black;		text-align: center;}
#prices th			{background-color:#630302; color:white; height: 20px;	width:100px;  font-style:oblique;}
#prices tr			{border:2px solid black;	}
#prices td			{width:100px;}
 
 /* use this Div  for top navigation with drop down menus */ 
 
#submenu 		  {height:30px; font-size: 14px; background-repeat:no-repeat;  background-image:url(../images/.png);}
#submenu 	ul 	  {width:100%;  float:left;  margin: 0; background-image:url(../images/orangestrip.png); padding	: 0; list-style: none;}
#submenu	ul li { display: block;	position: relative;	float: left;}
#submenu	li ul { display: none; background-image: url('../images/orangeblock.png')}
#submenu	ul li a {display: block; text-decoration: none;  padding: 6px 40px;}
#submenu	a:link		{color:white;}
 #submenu	a:visited	{color:white;}
 #submenu	a:hover		{color:#ffffff;	background-color:black;}
 #submenu	li:hover ul {display: block; position: absolute;}
 #submenu	li:hover li {font-size: 11px;  float: none;		}
 #submenu	a:active	{color:white;}
 #submenu	a:focus		{color:white;}
 
 #submenu2 		  {height:30px; font-size: 14px; background-repeat:no-repeat;}
#submenu2 	ul 	  {width:100%;  float:left;  margin: 0; background-image:url('../images/purplestrip.png') ; padding	: 0; list-style: none;}
#submenu2	ul li { display: block;	position: relative;	float: left;}
#submenu2	li ul { display: none; background-image: url('../images/orangeblock.png')}
#submenu2	ul li a {display: block; text-decoration: none;  padding: 6px 40px;}
#submenu2	a:link		{color:white;}
 #submenu2	a:visited	{color:white;}
 #submenu2	a:hover		{color:#ffffff;	background-color:black;}
 #submenu2	li:hover ul {display: block; position: absolute;}
 #submenu2	li:hover li {font-size: 11px;  float: none;		}
 #submenu2	a:active	{color:white;}
 #submenu2	a:focus		{color:white;}



 #give				{width:320px; height:45px; 	margin:10px 0px 0px 0px; background-image:url('../images/give2.png');}
 
 #social-media	 		{width: 37%;  	float:right; position:relative;}
 #social-media img		{padding:0px 0px  0px   20px;}
 #social-media p 		{margin: 10px 10px 5px 0px;   font-size:12px;	text-align:center;		text-decoration:none;} 
 
 
 #banner 			{padding-top:0px;}
 #banner a:visited	{color:#630302;}	
 #banner a:link		{color:#630302;}
   
  
 #subbanner 		{padding:0px 27px  10px  27px;}
 #subbanner br		{line-height:7px;}
 #subbanner img		{float: left; margin-right:20px;}
 #subbanner ul li 	{display:inline;}
 
 
 /* gALLERY DIV for displaying different sized images */ 
  			
 /* #portraitgallery img		{float:left;} REMOVED DUE TO A CONFLICT WITH DISPLAY INLINE - CAUSING 3RD GALLERY ROW TO BE JUSTIFIED TO THE RIGHT*/
 #portraitgallery ul li			{display:inline;}
 #portraitgallery table			{border:0; cellpadding:0;}
 #portraitgallery  a:visited	{color:#63030;}	
 #portraitgallery  a:link		{color:#63030;}
 #portraitgallery  th			{text-align:left;}
 #portraitgallery  td			{text-align:left;}


 /* gALLERY DIV for displaying fixed size images */ 
 
 #gallery			{width:100%;  display:inline; }
 #gallery ul li		{display:inline;}
 #gallery p			{width:100%;	display:inline;	margin: 0px 0px 0px 10px;	}
 #gallery img		{width:96px;  height:113px;}
 
  /* develop this for index - to put text inside */ 
 #boxedtext			{width:40%;	margin-left:27px;  border-style:ridge; border-color:maroon;		float:left}
 

/* IMAGE TITLES */
 
 #character			{text-align:center;	margin-top:0px; margin-bottom:0px; 	padding:0px;}

 #traditional		{text-align:center;	margin-top:0px; margin-bottom:0px; 	padding:0px;}
 
 #rosebullet		{background-image:url('../images/rosebullet.png');	width:24px;   height:25px;  float:left; margin:0px 5px 0px 7px;}
  
 #ab				{background-image:url(../images/ab.png); width:504px; height:27px; z-index:1; }
  
 #content			{padding: 20px 10px; }
 #content p 		{margin:0px 10px; text-align:left;}
 #content img		{float:left;	}
 #content a:visited	{color:#630302;}	
 #content a:link	{color:#630302;}
 
 #description	p	{float:left;	}
 
  /*no longer used on index page*/ 
 #comingsoon		{margin :0px 10px 20px 20px; 		float:left;	}
 #comingsoon li		{display:inline;}
 
 #opacity			{background-image: url(../images/white.jpg);	opacity:0.5; filter:alpha (opacity=40);}
  
 #bottomnav			{clear:both;}
 #bottomnav ul 		{width:100%;  float:left;  margin:0px;   background-image:url('../images/inkstrip2.jpg'); border-bottom:1px black solid;}
 #bottomnav ul li 	{display:inline;}
 #bottomnav ul li a	{float:left;	padding:5px  50px;		text-decoration:none;}
 
 #bottomnav a:link		{color:#ffffff;}
 #bottomnav a:visited	{color:#f5ff82;}
 #bottomnav a:active	{color:#ffffff;}
 #bottomnav a:hover		{color:#ffffff;	background-color:black;}
 #bottomnav a:focus		{color:black;}		
 
 #footer			{padding: 2px	0px; 		text-align:center;	}
 #footer p			{font-size:7pt;}
 
 
 
 /* Slider DIVs on index page */ 

 
 #slider {
	float: right;
	height: 196px;
	width: 899px;
	overflow: hidden;
	z-index:1;}

#prev {
	height:76px;
	width:40px;
	background-image:url(../images/prev.png);
	position:relative;		z-index:2; 	left:13px;		top:70px; 
	}
	
#next {
	height:76px;
	width:40px;
	background-image:url(../images/prev.png); transform: rotate(180deg);
	position:relative; z-index:2;		left:850px;		top:-7px; 
	}