/*  Twenty Heads stylesheet (c) 2005
    developed by Emir Bukva and
    Rafi Dowla of Cidamon
    http://www.cidamon.com

    last modified: oct 31 12:45am
    */



@media all {


    

/* ==General */

body {
    margin: 0;
    padding: 0 0 30px 0;
    font-family: Arial, Helvetica, Verdana, 'Lucida Console', sans-serif;
    font-size: smaller;
    background: url(../common/bodyGradient.jpg) repeat-x #0065FB;
}

.hidden, #navigation li a span { position: absolute; left: -9000px; }

img {   border: 0; }

p, ul { line-height: 150%; color: #B0D0FF; }
  
ul {
    list-style-type: none;
    border: 0;
}

h1 {
    height: 120px;
    width: 250px;
    margin: 0;
    position: relative;
    left: 30px;
    top: 0;
    background: url(../common/headline.gif) no-repeat -10px 0;
   /* border: 1px solid white;*/

/*    float: left;*/
/*    margin: 0 0 0 30px !important;
      margin: 0 0 0 15px;   */
}

h1 a {
    display: block;
    width: 100%;
    height: 100%;
}

h2 { display: none; }  /*unless I can figure out some pass filter to IE so that other browsers use the same hiding method as .hidden above */



/* ==Specific div's */

#container {
    height: 640px !important;
    height: 650px;  
    width: 800px;   
    margin: 0 auto;
    margin-top: 0;
    background: url(../common/containerGradient.jpg) repeat-x #005BCD;
   /* background-color: #0470DA;*/
    /*border: 1px solid white;*/
}

#navigation {
    height: 120px;
    width: 470px;
    position: relative;
    top: 0;
    left: 290px;
    margin-top: -120px;
    margin-left: -5px;
    padding: 0;                /* important not to forget this one, FFox will add padding for lists by default */
    /*border: 1px solid white;*/
}



#navigation li {
 /* padding seems like a better alternative below
    because IE applies too much of a margin and
    hacks would have been necessary */
       
 /* margin: 0 0 0 25px; */
    padding-left: 25px;          
    width: 67px;
    height: 115px;
    float: left;
    /*border: 1px solid white;*/
}

#navigation li a{
    display: block;
    width: 100%;
    height: 100%;
}

#navigation .about a     { background: url(../common/about.gif) no-repeat top right;}
#navigation .archive a   { background: url(../common/archive.gif) no-repeat top right;}
#navigation .links a     { background: url(../common/links.gif) no-repeat top right;}
#navigation .myCart a   { background: url(../common/myCart.gif) no-repeat top right;}
#navigation .contact a   { background: url(../common/contact.gif) no-repeat top right;}

#navigation .about a:hover, #navigation .archive a:hover,
#navigation .links a:hover, #navigation .myCart a:hover,
#navigation .contact a:hover {background-position: 29px -95px;}

#about #navigation .about a, #archive #navigation .archive a,
#links #navigation .links a, #myCart #navigation .myCart a,
#contact #navigation .contact a {background-position: 29px -190px;}

/*#archive #navigation .archive a {background-position: 29px -190px;}*/

#gallery {
    /*border: 1px solid white;*/
    margin: 0 !important;
    margin: 0 -10px;                /* A hack to fix IE bug, I presume!? */
    padding: 0 20px;
    text-align: center;
}

#gallery div {
    height: 130px;
    width: 130px;
    margin: 10px;                   /* later change this selector to #archive #gallery div {} */
    float: left;                    /* or better, get rid of this class completely and use body's */

}

#archive #gallery div, #myCart #gallery div {
    background: url(../common/emptyItem2.gif) no-repeat top left #005AB2;
}



#gallery div a {
    display: block;
    height: 130px;
    width: 130px;
}

#numNavigation {
    margin: 0;
    width: 750px !important;
    width: 700px;                   /* another hack for IE, 50px seems like a lot of difference but it's just a cenering issue */
    clear: left;
    text-align: center;
    padding: 0;
    padding-top: 15px;
/*    border: 1px solid yellow;*/
}

#numNavigation li{
    display: inline;
    margin: 0;
    /* float: left;*/
    /* border: 1px solid white; */
}

#numNavigation li a {
    text-decoration: none;
    padding: .2em .4em;
    color: white;
}

#numNavigation li a.current {
    background-color: #005AB2;
}

#gallery #numNavigation li a:hover, #numNavigation li a:hover, #numNavigation li a:focus,
#gallery p a:hover, #links #gallery ul a:hover,
#galleryDetail #purchInfo a:hover {
    background-color: #A3E706;
    color: #005AB2;
}



#footer {
    text-align: center;
    /*border: 1px solid green;*/
}

#footer p {
    margin: 5px;
    color: #0054A6;
}

#footer p a { text-decoration: none; color: #0054A6;}

#footer p a:hover { color: #A3E706;}


#gallery p {
    text-align: left;
    margin-left: 25px;
}

#gallery p a, #links #gallery ul a {
    text-decoration: none;
    color: yellow;
    padding: .1em .2em;
}


/*   about page and links pages (share same structure) */

#gallery p, #links #gallery ul, #contact form {
    margin: 10px 40px 15px 335px;
}

#myCart #gallery p {
    margin: 0 0 0 25px !important;
    margin: 0 0 0 37px;
}

#about #gallery div, #links #gallery div, #contact #gallery #decoImg1,
#contact #gallery #decoImg2 {
    width: 130px;
    height: 130px;
    background: url(../images/1234.jpg) no-repeat top right;
    padding-left: 100px;                    /* margins for these are pulled from a generic div selector above, float too */
    clear: left;
    float: left;
}

#about #numNavigation, #links #numNavigation, #contact #numNavigation,
#login #numNavigation, #galleryDetail #numNavigation, #myCart #numNavigation, #colophon #numNavigation {
    margin: -45px auto 30px auto;
    text-align: center;

}

#links #gallery ul {
    padding: 0;
 }
 
#links #gallery ul li {
    text-align: left;
    margin: 0;
    padding: 0;
    list-style-type: disc;
    list-style-position: inside;
}



/* contact me form */

#contact form {
   text-align: left;
   padding: 0;
   float: left;
   margin: 0 0 0 85px !important;
   margin: 40px 0 0 75px;
   width: 379px;
}

#contact form #userCommentTxt {
    width: 379px;
    height: 150px;
    
}

#contact form #userCommentBtn {
    
    width: 130px;
    margin: 10px 0 0 255px !important;
    margin: 10px 0 0 195px;
}

#contact form #userCommentEmail {
    width: 379px;
   
}

#wrapper hr {
  margin: 7px 0 7px 0 !important;
  margin: 0;
  border: 1px solid #006AB2;
}


/* login page */


#login form {
    height: 150px;
    width: 270px;
    margin: 50px 0 0 260px !important;   /* yet another IE hack. it centers it horizontally by default unlike opera and FireFox */
    margin: 50px 0 0 0;
    background-color: #005AB2;
}
/*
#login form #loginTxt {
    width: 140px;
    margin: 25px 0 0 0;
}

#login form #passwordTxt {
    width: 140px;
    margin: 5px 0 0 0;
}

#login form #loginBtn {
    margin: 5px 0 0 90px;
}

#login label {
    float: left;
    margin-top: 25px;
    text-align: left;
    margin: 15px 0 0 80px;
}

#login #gallery form p {
    margin: 0 0 -20px 70px !important;
    margin: 0 0 -20px 40px;
    padding: 0;
    width: 150px;
    text-align: center;
    color: white;
    background-color: red;

}
*/
label {
    color: #B0D0FF;
}

#contact #gallery .wrapper {
    margin: 0;
    padding: 0;
    background: url();
    float: none;
    width: 100%;
    height: auto;
    clear: none;
   
}



/* detail page */

#galleryDetail #detail {
    height: 440px;
    width: 440px;
    margin-left: 150px !important;
    margin-left: 85px;
    background-color: #005AB2;
}


#galleryDetail #purchInfo {
    
    color: #B0D0FF;
    height: 100px;
    width: 150px;
    padding: 0;
    margin: 158px 0 0 0;       /*change from wd4  previous was 358px*/
    float: right;
}

#galleryDetail #purchInfo p {
    margin: 10px 0 0 0;
    padding: 0;
}

#galleryDetail #purchInfo p span{
    color: white;
   
}

#galleryDetail #purchInfo p a {
    display: inline;
    margin: 0;
}

#galleryDetail .sculptureID {
    color: #004397;
}




#mainPage #gallery a:hover {
    background-color: #005AB2;
}

#archive #gallery a:hover {
    background-color: #005AB2;
}





/*   myCart page    */

#myCart {
   padding-bottom: 10px;
   }

#cart {
	  /*border: 1px solid yellow;*/
    height: auto;
    width: 450px;
    margin: 0 0 0 320px;
    text-align: left;
    color: #B0D0FF;
    }


#cartText {
    float: left;
    margin: 0;
    padding: 0 0 0 60px;
    width: 225px;
    /*  border: 1px solid yellow;*/
    }

#cartTable {
	border-collapse: collapse;	
  width: 100%;
	}

#cartTable td {
	border-top: 2px solid #005BD0;
	border-bottom: 2px solid #005BD0;
	background-color: #005AB2;
	padding: 7px;
	}

#cartTable td.imageTitle p {
	margin-top: 35px;
	}

#cartTable th#sculpture {
	text-align: left;
	padding: 5px;
	font-weight: normal;
	color: #004A92;
}


#cartTable th.price {
	color: #004A92;
	}


#cartTable th.price, #cartTable td.price {
	text-align: right;
	padding: 7px;
	font-weight: normal;
	}

#cartTable img {
	margin-right: 10px;
	float: left;
}

div.belowTheTable {
	text-align: center;
	margin-top: 15px;
}


#cart a, #cartText a {
	color: yellow;
  text-decoration: none;
  padding: .2em .4em;
	}
	
#cart a:hover, #cartText a:hover {
  background-color: #A3E706;
  color: #005AB2;
	}

#cart a.remove {
	color: red;
	}

#cart a.remove:hover {
  background-color: red;
  color: white;
	}

tfoot {
	color: white;
	}
	
#emptyCart {
	width: 450px;
	height: 90px;
  margin: 0 0 0 320px;   
  color: #B0D0FF;
  background-color: #005AB2;
	}

#emptyCart p {
	text-align: center;
	padding-top: 25px;
	}
	

#colophon {

margin-left: auto;
margin-right: auto;
}





}   /* this bracket closes @media all at the top*/