/* undohtml.css */

/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */

:link,:visited { text-decoration:none
                 }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }



/*

         Preloading images via the content property

         Thanx goes out to CSSNinja

         http://www.thecssninja.com/css/even-better-image-preloading-with-css2

   */



body:after
{
content: url('../img/button_design.gif')
         url('../img/button_art.jpg')
         url('../img/button_personalart.jpg')

         url('../img/tn/tn_Escape_Advertising_unwor.jpg')
         url('../img/tn/tn_Escape_Advertising_upgra.jpg')
         url('../img/tn/tn_Escape_Advertising_Exit.jpg')
         url('../img/tn/tn_Escape_website.jpg')
         url('../img/tn/tn_Escape_Foldingbrochure_inside.jpg')
         url('../img/tn/tn_Escape_Foldingbrochure_outside.jpg')
         url('../img/tn/tn_Escape_Businesscard_Denim.jpg')
         url('../img/tn/tn_Escape_Businesscard_Rotten.jpg')
         url('../img/tn/tn_Escape_Businesscard_GreenSplatter.jpg')
         url('../img/tn/tn_Escape_Letterhead_Envelope.jpg')
         url('../img/tn/tn_Escape_Logo_Tshirt.jpg')
         url('../img/tn/tn_Escape_Logo_Final.jpg')
         url('../img/tn/tn_Escape_Logo_concepts.jpg')

         url('../img/tn/tna_Andongweaver.jpg')
         url('../img/tn/tna_Andong01.jpg')
         url('../img/tn/tna_Andong02.jpg')
         url('../img/tn/tna_Andong03.jpg')
         url('../img/tn/tna_Andong04.jpg')
         url('../img/tn/tna_Andong05.jpg')
         url('../img/tn/tna_Andong06.jpg')
         url('../img/tn/tna_Andong07.jpg')
         url('../img/tn/tna_Andong08.jpg')
         url('../img/tn/tna_Andong09.jpg')







         display: none;
}






body {    background-image: url(../img/gradient.jpg);
          background-repeat: repeat-x;
          background-position: top left;
          background-color: #d7e7f1;
          font-family:  Helvetica, Arial, sans-serif;
          font-size: 18px;

         }

#container {

          background-color: #fcead0;
          margin: 0 auto;
          height: auto;
          width: 862px;



         }

#header {
           margin: 8px 0 16px 0;
           padding: 0;
           float: left;
           height:160px;
           width:192px;


         }
#tagline   {


           text-align: left;
           font-family: Georgia, Times, serif;
           font-style:italic;
           font-size: 24px;
           color: #FFFFFF;
           padding: 8px 16px 0px 8px;
           margin: 8px 0 0 32px;
           float: left;
           width: 390px;
           height: 120px;



         }


#nav {
           height: 40px;
           width: 800px;
           margin: 0 0 8px 40px;
           padding: 0;
           float: left;


          }


#main {
           padding: 0;
           margin: 0 0 0 40px;
           float: left;
           width: 640px;
           height: auto;
           overflow: hidden;

}




#ads {     height: 520px;
           width: 160px;
           margin: 8px 0 0 0;
           padding: 0;
           float: right;
           clear: right;

}

#footer {
           padding: 0;
           margin: 16px 0 0 40px;
           float: left;
           width: 800px;
           height: 64px;
           font-size: 12px;

        }

#newsitem {
           padding: 8px 8px 8px 0px;
           margin: 8px 8px 8px 0px;
           width: 570px;
           height: auto;
           font-size: 12px;

}



#newsitem a {

            color: #FFFFFF;}

#newsitem ul {

             font-size: 12px;
             margin: 8px 8px 8px 0px;
                 }

#newsitem ul li {

             background:url('../img/imd_imagemap02.png');
             background-repeat: no-repeat;
             background-position:-232px -136px;;
             height:16px;
             padding: 0 20px 0;

                }

#intro  {
             margin: 16px 0 0 0px;
             font-size: 12px;

                   }


h1 {

         color:#333333;
         font-size:18px;
         font-weight:bold;
         letter-spacing: 2px;
         line-height:25%;
         padding:18px 0 0 0;
         margin: 0 0 8px 0;
         border-bottom: solid 1px;

}

h1.norm {

         color:#333333;
         font-size:18px;
         font-weight:bold;
         letter-spacing: 2px;
         line-height:80%;
         padding:0;
         margin: 0 0 8px 0;
         border-bottom: solid 1px;
}





h2 {     font-weight: normal;
         color:#000000;
         font-size:12px;
         margin: 0 0 6px 0;
         padding: 0;

}

h2.bold {
         width: 220px;
         margin: 16px 0 8px 0;
         line-height:75%;
         font-size:14px;
         font-weight: bold;
         border-bottom: solid #FFFFFF 1px; }



p {     margin: 0 0 8px 0; }

.bigh   {color:#333333;
         font-size:18px;
         font-weight:bold;
         letter-spacing: 2px;
         line-height:80%;
         padding:0;
         margin: 0 0 8px 0;
         border-bottom: solid 1px;}


.smallh   {
         font-weight: normal;
         color:#000000;
         font-size:12px;
         margin: 0 0 6px 0;
         padding:0;}

.birdy { padding: 8px 0 0 32px;}



/*
 Thanx goes out to Ignacio Ricci for his Sprite tutorial.
 http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites

         CSS sprites imagemap of:      imd_imagemap.png
--------------------------------------------------------------
     item            location                 width/height
--------------------------------------------------------------
         wacom           -192px 0px               32px x 32px
         ruler           -224px 0px
         pencil          -192px -32px
         marker          -224px -32px
         brush           -192px -64px
         cutter          -224px -64px
         feather         -192px -96px
         phone           -224px -96px
         fox             -192px -128px
         up              -192px -192px

         star            -232px -136px            16px x 16px

         home              0px  -160px            96px x 32px
         services        -96px  -160px            96px x 32px
         portfolio         0px  -192px            96px x 32px
         contact         -96px  -192px            96px x 32px

         imd               0px   0px             192px x 160px
         birds           -160px -192px            64px x 32px


*/


.sprite {background:url('../img/imd_imagemap02.png');}

         .logo {height:160px;
                 width:192px;}

         .navi {height:32px;
                 width:96px;}

         .icon {height:32px;
                 width:32px;}

         .back {height:32px;
                 width:64px;}

         .bullet {height:16px;
                   width:16px;}



                /* icons */
                .wacom   {background-position:-192px 0px;}
                .ruler   {background-position:-224px 0px;}
                .pencil  {background-position:-192px -32px;}
                .marker  {background-position:-224px -32px;}
                .brush   {background-position:-192px -64px;}
                .cutter  {background-position:-224px -64px;}
                .feather {background-position:-192px -96px;}
                .phone   {background-position:-224px -96px;}
                .fox     {background-position:-192px -128px;}
                .up      {background-position:-192px -192px;}

                /* bullet point */
                .star    {background-position:-232px -136px;}


                /* navigation */
                .home      {background-position:0px -160px;}
                .services  {background-position:-96px -160px;}
                .portfolio {background-position:0px -192px;}
                .contact   {background-position:-96px -192px;}

                /* logo */
                 .imd       {background-position:-0px -0px;}

                /* background */
                 .birds   {background-position:-192px -160px;}


#nav ul {
         height: 32px;
         list-style: none;
}
#nav ul li {
         height: 32px;
         float: left;


}
#nav li a {
         height: 32px;
         display: block;
         text-decoration: none;
         margin: 4px 8px 0;

}
#home-tab a {

         background:url('../img/imd_imagemap02.png');
         background-repeat: no-repeat;
         background-position:0px -160px;
         width: 96px;
         border-left: solid 20px #C1272D;
}

#services-tab a {
         background:url('../img/imd_imagemap02.png');
         background-repeat: no-repeat;
         background-position:-96px -160px;
         width: 96px;
         border-left: solid 20px #C1272D;
}

#portfolio-tab a {
         background:url('../img/imd_imagemap02.png');
         background-repeat: no-repeat;
         background-position:0px -192px;
         width: 96px;
         border-left: solid 20px #C1272D;
}

#contact-tab a {
         background:url('../img/imd_imagemap02.png');
         background-repeat: no-repeat;
         background-position:-96px -192px;
         width: 96px;
         border-left: solid 20px #C1272D;
}


#home-tab a:hover {
         border-left: solid 20px #FFFFFF;
         text-align: left;
}


#services-tab a:hover {
         border-left: solid 20px #FFFFFF;
         text-align: left;
}

#portfolio-tab a:hover {
         border-left: solid 20px #FFFFFF;
         text-align: left;

}

#contact-tab a:hover {
         border-left: solid 20px #FFFFFF;
         text-align: left;
}

#blog-tab a:hover {
         border-left: solid 20px #FFFFFF;
         text-align: left;

}

#about-tab a:hover {
         border-left: solid 20px #FFFFFF;
         text-align: left;
}



#footernav ul {
         list-style: none;
}


#footernav ul li {

         float: left;
}


#footernav li a {

         text-align: left;
         text-decoration: none;
         color: #000000;
         margin: 0 8px 0 8px;
}

#footernav li a:hover {
         color: #808080;
}

#footercopy {

         font-family: Georgia, Times, serif;
         font-size: 10px;
         margin: 6px 0 0 8px;
         text-align: left;
}


#order {         background-color: transparent;
                 padding: 8px 8px 8px 8px;
                 margin: 26px 8px 8px 32px;
                 width: 570px;
                 height: auto;
                 font-size: 12px;


}



.gallery {       background-color: #e9f0f4;
                 padding: 16px;
                 margin: 16px 0;
                 width: 560px;
                 height: auto;
                 font-size: 12px;
                 border: solid #C0C0C0 1px;


}





.gallery a {

                 height: 75px;
                 width: 75px;
                 text-decoration: none;
                 color: #000000;
                 margin: 4px 0 4px 2px;

}

.top {
                 padding: 16px;
                 margin: 16px 0;
                 width: 560px;
                 height: auto;
                 font-size: 12px;
                 text-align: center;


}





#f_image {       background-image: url(../img/footer_kite04.gif);
                 background-repeat: repeat-x;
                 background-position:bottom center;
                 float: left;
                 width: 100%;
                 display: table;
                 height: 161px;
                 font-size: 12px;

        }
#ign     {    background-image: url(../img/personalart/Ignazio_comic.jpg);
              background-repeat: no repeat;
              float: left;
              height: 160px;
              width: 124 px;
              border: solid 2px;
              padding: 0 124px 0 0;
              margin: 0 16px 16px 0;

}