/* 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, 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;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


/* set margin - default fore and background colors  and font properties*/
body {
max-width: 1200px;
margin: 0 auto;
color: #0e0e0e;
background: #333399;
font-family:arial, verdana, serif;
font-weight: normal;
font-style: normal
}
/* added from layoutscsg.css in socalsaltygirl */
/* set width of header element for site heading and slogan */

#tophdr {
   height: 400px;

    background-image: 
        url('images/castle_ruins.jpg'); 
     /*    url('images/Fiji%202014%20(199).JPG'); */
    background-repeat: no-repeat;
    background-size: 100%;
    
    background-color: #222200;
    padding: 3% 2% 5% 2%;

margin: 1% 0 .5% 0;
border-radius: 20px 20px 0 0;
box-shadow: 5px 5px 10px #0e0e0e;
 color: #ccefef;
 text-shadow: 4px 4px 8px #00ff66;
     }


#head-right {
    width: 45%;
    height: 20%;
    padding: 1% 1% 1% 0%;
}
/* set imagein header */ 
#head-right img{
    border:2px solid black;
    box-shadow: 4px 4px 8px #202020;
    float: right;
}
#head-right h1{
font-size: 55px;
      color: #000000;
     text-shadow: 2px 2px 4px #ffffff;
float: left; 
padding: 1.5% 1% 1% 0%;
}

#head-right h2{
    font-size: 24px;
    color: #000000;
     text-shadow: 2px 2px 4px #ffffff;
float: left; 
padding: 0% 1% 1% 0%;
}  
#head-right p{
    font-size: 20px;
    color: #ffffff;
    text-shadow: 1px 1px 2px #000000;
    text-align : left;
    padding: 5% 5% 1% 0%;
}
#head-left {
    font-size: 24px;
    color: #000000;
    text-shadow: 2px 2px 4px #ffffff;
    padding: 1% 1% 2% 2%;
    width: 35%; 
    height: 20%;
    float: right; 
}

#head-left h1 {
font-size: 54px;
    color: #000000;
    text-shadow: 2px 2px 4px #ffffff;
    float: right;
    padding: 0% 1% 1% 1%;
}  
#head-left h2 {
font-size: 36px;
    color: #000000;
    text-shadow: 2px 2px 4px #ffffff;
    float: right;
    padding: 0% 1% 1% 1%;
}  
/* end of add from layoutscsg.css in socalsaltygirl */
/* set width  of container for body section */

#main {
width: 100%;
background: #ffffff ;
float: left;
margin: .25% 0 1% 0;
box-shadow: 5px 5px 10px #0e0e0e
}
#main h1 {
 font-size : 20px;
 text-align : center;
 color : #003399;
 margin: 2% 0;
text-shadow: 2px 2px 4px #999999;
}
 #main h2 {
 font-size : 16px;
 text-align : center;
 color : #003399;
 margin: 2% 0; }
#main h3 {
 font-size : 16px;
 text-align : center;
 color : #006699;
 margin: 2% 0; }
#main-left {
float: left;
width: 67%;
margin: 1% 1% 0 1%;
background-color: beige;
    padding-bottom: 8px;
}
#main-left td, th{
    padding: 8px;
    vertical-align: top;
}

#main-left p {
 text-align : left; 
text-indent : 16px ;
 margin: 0 10%; }
#main-left ul {
    margin-left: 0; list-style:none; padding-left:10em;
}
#main-right {
float: right;
width: 25%;
margin: 1%;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px #0e0e0e;
 color: #0e0e0e;
background: #fdfdfd;
}
/* end of fijidivesurdream main */
#main-right span.firstwords
{
  font-weight:bold;
    font-size: 20px;
   color:darkblue;
}

/* added from mystyle.css in index.html from example Create HTML5 Page */



#main img { 
    max-width: 100%;
margin: 4% 4%;
 border-radius: 5px;
 border: solid #000000 1px;
 box-shadow: 4px 4px 8px #202020;
 }
 #main-right p {
     font-size: 14px;
 text-align : left; 
text-indent : 6px ;
 margin: 2% 8%; }

/* end from mystyle.css in index.html from example Create HTML5 Page */
/* width:1000px; out of main wrapper header wrapper menu bar content wrapper*/
.main_wrapper{

height:auto;
margin:auto;
background:black;
}

.header_wrapper{

height:110px;
margin:auto;
padding-top: 5px;
border-radius: 10px;
}

#logo {float:right;}

#banner {float:left;}

.menubar {

height:50px;
background:#3399dd;
color:black;
border-radius: 10px;
}

#menu {
padding:0;
margin:0;
line-height:40px;
float:left;
border-radius: 10px;
}

#menu li {
list-style:none;
display:inline;
}

#menu a {
text-decoration:none;
color:white;
padding:8px;
margin:5px;
font-size:18px;
font-family:arial, verdana, serif;
}

#menu a:hover {color:orange; font-weight:bolder; text-decoration:underline;}

#form {float:right; padding-right:8px; line-height:50px;}

.content_wrapper {

margin:auto;
background:beige;
}
#content_about {
width:350px;
float:left;
background:#eeffff;
padding: 1% 2% 5% 1%;
border-radius: 10px;
 box-shadow: 5px 5px 10px #202020
}
#about_right {
width:400px;
float:left;
background:#eeffff;
padding: 1% 2% 5% 1%;
border-radius: 10px;
 box-shadow: 5px 5px 10px #202020;
     margin: 2% 8%;
}
#content_area {
width:960px;
float:left;
background:#eeffff;
padding: 1% 2% 5% 1%;
border-radius: 10px;
 box-shadow: 5px 5px 10px #202020
}
/* table, th, td {
  border: 1px solid black;
} */

#sidebar {
width:200px;
background:#3399dd;
float:left;
border-radius: 10px;
}

#sidebar_title {
background:white;
color:black;
font-size:22px;
font-family:arial; 
padding:10px;
text-align:center;
}

#cats {
	text-align:center;
    color: white;
}

#cats li {list-style:none; margin:5px;}

#cats a {color:white; padding:8px; margin:5px; text-align:center; font-size:20px; text-decoration:none; font-family:arial Sans Ms;}

#cats a:hover {color:orange; font-weight:bolder; text-decoration:underline;}

#shopping_cart {
    width: 900px;
    height: 31px;
    float: left;
    background:#ffffdd;
    color:black;
    padding: 2% 2% 2% 2%;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #0e0e0e;
    }

#products_box {
width:905px; 
text-align:center;
margin-left:30px;
margin-bottom:10px;
border-radius: 10px;
}

#single_product {float:left; margin-left:30px; padding:10px;}
	
#single_product img {border:2px solid black;}
#single_product a {color:black;}
	
#single_product button {
    background-color: #EAEA33; /* YELLOW */
    border: 2px solid #4C0050; /* Dark */
    border-radius:20px;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5), 0 6px 10px 0 rgba(0,0,0,0.19);
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5), 0 6px 10px 0 rgba(0,0,0,0.19);
}

#single_product button hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
#registerform {
    padding: 2% 2% 2% 0;
    margin: 2px 2px 2px 2px;
}
/* Container holding the image and the text */
.dreamcycle {
  position: relative;
  text-align: center;
  color: lightgoldenrodyellow;
    font-size: 24px;
}
/* Bottom text */
.bottom-text {
  position: absolute;
  bottom: 38px;
  left: 90px;
}

/* set width of  footer element - add color */
footer {
width: 100%;
background: #3399dd;
float: left;
margin: 0 0 1% 0;
box-shadow: 5px 5px 10px #0e0e0e;
border-radius: 0 0 20px 20px
}

/* set font properties of address tag within footer */
footer p {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #000000;
text-shadow: 1px 1px 1px #666666;
padding: 0.5% 2% 0.5% 2%;
  
}