/* HTML, graphic and CSS by Adrienne Gilbert @ moon13.co.uk */

/* Styles that apply to the body */

html, body {       
	height: 100%; 
	}

body          { 
	background-image:url();
	background-repeat:repeat-x;
	background-position: left top;
	background-color: #dcdcdc;
	padding: 0; 
	margin: 0; 
	font-size: 0.75em;
	font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	color: #333333;
	}

a, a:visited { 
	color: #C71585; 
	background: inherit; 
	text-decoration: underline; 
	}
	
a:active { 
	background: inherit; 
	color: #C71585; 
	text-decoration: none; 
	}
	
a:hover { 
	color: #FF69B4; 
	background: inherit;
	text-decoration: none;  
	}

h1 {  
	background: transparent;
	color: #C71585;	
	font: bold 130% Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
 	padding: 0 0 0 12px; 
 	margin: 0;
 	text-align: left; 
 	}

h2 { 
	background: inherit; 
	color: #C71585;	
	font-weight: 700;
	margin: 0;	
	padding: 12px 0 0 12px;
 	font: normal 110% Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
 	}

h3 {
	background: inherit; 
	color: #C71585;	
	font-weight: 700;
	margin: 0;	
	padding: 12px 8px 10px 20px;
 	font: bold 110% Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
 	width: 80%;
 	background-image:url("images/lipic.gif");
 	background-position: left;
 	background-repeat:no-repeat; 
 	}
h4 {
	background: inherit; 
	color: #C71585;	
	margin: 0;	
	padding: 0 0 0 20px;
 	font: bold 90% Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
 	width: 80%;
	text-decoration: underline; 
 	}

/* main content image styles */	

img {
  border: 0px solid #C71585; 
  padding: 10px;
  background-color: transparent;
  float: right;
  display:inline;
  margin: 7px;
}

img.designs {
  border: 1px solid #bbb; 
  padding: 10px;
  background-color: transparent;
  float: right;
  display:inline;
  margin: 7px;
}
/* Portfolio Gallery  */


/* begin portfolio gallery styling */
#jgal { 
	list-style: none; 
	width: 230px; 
	}
#jgal li { 
	 float: left; 
	 display: block; 
	 width: 50px; 
	 height: 50px; 
	 background-position: 30% 20%; 
	 cursor: pointer; 
	 border: 1px solid #cccccc; 
	 outline: 1px solid #ddd; 
	 margin-right: 15px; 
	 margin-bottom: 15px; 
	 }
#jgal li img { 
	position: absolute; 
	top: 190px; 
	left: 300px; 
	display: none; 
	}
#jgal li.active img { 
	display: block; 
	}
#jgal li.active, #jgal li:hover { 
	outline-color: #bbb;  
	}

/* styles gallery without js */

#gallery { 
	list-style: none; 
	display: block; 
	}
#gallery li { 
	float: left; 
	margin: 0 10px 10px 0; 
	} 


/* Contains the whole page */

#container {
	margin: 0 auto 0 auto; 
	position:relative; 
	width: 800px;
	padding: 0px 0px 0px 0px; 
	background: white; 
	color: #666666; 
	border-left: 0px solid navy; 
	border-right: 0px solid navy;
	}
	
/* Styles the top left interface navigation */

#bannerwrap {
	background-image:url("images/topbg.png");
	background-repeat:no-repeat;
	background-color: transparent;   
	border-top: 0px solid;
	margin:0;
	padding-left: 0; 
	padding-right: 0; 
	padding-top: 0; 
	padding-bottom: 0;
	height: 200px;
	}


/* Styles the top right tabs navigation */


    #tabs {
      float:right;
      width:100%;
      background:transparent;
      font-size:93%;
      line-height:normal;
      }
    #tabs ul {
	margin:166px 0 0 0;
	padding:13px 6px 0 20px;
	list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:right;
      background:url("images/tableft.png") no-repeat left top;
      margin:0;
      padding:4px 4px 4px 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:right;
      display:inline;
      background:url("images/tabright.png") no-repeat right top;
      padding:4px 10px 4px 6px;
      color:#C71585;
      font-weight:900;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#ffffff;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }
     #tabs li a.current span {
      color:#ffffff;
      }
    #tabs li a.current {
    background-position:0% -42px;
    }
    #tabs li a.current span {
        background-position:100% -42px;
        }
     #tabs li a.current span {float:none;}
    
    
/* This is the main body. Holds the left navigation and the CSM Content */

#main {
	 float:left; 
	 width: 800px; 
	 background: #fff;
	 color: #666666; 
	 padding: 0px 0 0px 0; 
	 margin: 0px 0 0px 0;
	 }

/* Styles the content on the home page */

.content{
	 float:left; 
	 width: 550px;
	 height: 100%; 
	 font-size: 100%; 
	 padding: 0px 30px 0 0; 
	 margin: 20px 0 0 0; 
	 border-right: 1px dashed #C71585;
	 }
.content p{
	 line-height: 1.4em; 
	 padding: 0 0 0 0; 
	 margin: 10px 0 0 12px;
	 font-size: 90%;
	 }
.content p.border{
	background:url("images/dot-line.gif") 0% 50% repeat-x;
	 height:40px;
	 width: 90%;
	 padding: 0 0 0 0px; 
	 margin: 0 0 0 12px;
	 }
.content ul{ 
	margin: 6px 0 0 0; 
	padding:12px; 
	list-style:none;
	}
.content li {
	 margin:0 0 0 22px; padding:0; 
	 list-style:circle; 
	 list-style-position:outside;
	 }
	 
/* Styles the content on the portfolio page */

.portfoliogallery{
	 float:left; 
	 width: 778px; 
	 font-size: 100%; 
	 padding: 0px 20px 0 0; 
	 margin: 20px 0 0 0; 
	 border-right: 0px dashed #C71585 ;
	 }
.portfoliogallery p{
	 line-height: 1.4em; 
	 padding: 0 0 0 0; 
	 margin: 10px 0 0 12px;
	 font-size: 90%;
	 }
.portfoliogallery p.border{
	background:url("images/dot-line.gif") 0% 50% repeat-x;
	 height:40px;
	 width: 90%;
	 padding: 0 0 0 0px; 
	 margin: 0 0 0 12px;
	 }

/* Styles the right sidebar*/

.mainright {
	 float:right; 
	 width: 200px; 
	 padding:0 0 0px 0; 
	 margin:12px 0 20px 10px;
	 background: #ffffff;
	 min-height: 100%;
	 }
.mainright p{
	 line-height: 1.4em; 
	 padding: 0 10px 0 20px; 
	 margin: 5px 0 0 0;
	 font-size: 90%;
	 color: #666666;
	 }
.mainright p.border{
	background:url("images/dot-line.gif") 0% 50% repeat-x;
	 height:40px;
	 width: 90%;
	 padding: 0 0 0 0; 
	 margin: 0 0px 0 12px;
	 }


#footer {
	 clear: both;
	 height: 100px;
	 background-image:url("images/pinkfloweryfooter2.gif");
	 background-repeat:no-repeat;
	 background-color: #ff69b4;
	 width: 800px;
	 margin: 0 auto 0 auto;  
	 color: #ffffff; 
	 font: normal 90% verdana, arial, Helvetica, sans-serif; 
	 padding: 0px 0 0px 0;  
	 }	 
.left{ 
	display:inline; 
	color:white;
	font-weight: 900; 
	width:35%; 
	padding:0 0 0 45px; 
	margin: 0 0 0 0;
	}
.left a, .right a:visited{ 
	background: transparent; 
	color:#fff; 
	padding: 0 8px 0 8px; 
	text-decoration:underline;
	}
.left a:hover{
	 background: transparent; 
	 color: #FFE4E1;
	 }
.right{ 
	float:right; 
	text-align:right; 
	background: transparent; 
	color:white; 
	font-weight: 900;
	width:50%; 
	padding: 0 45px 0 0px; 
	margin:65px 0 0 0;
	}
.right a, .right a:visited{ 
	background: #FF69B4; 
	color:white;
	font-weight: 900; 
	padding: 0 8px 0 8px; 
	text-decoration:underline;
	}
.font-family a:hover{
	 background: #FF69B4; 
	 color: #FFE4E1;
	 font-weight: 900;
	 }