body {

	margin:0px; padding:0px;

	background-color:black;

}

img {

    border: none;

}

.imgsel {

    border: 2px solid yellow;

}

#main {

	background-color:black;

}

#footer {

	color:white;

}

/* #header {

	background-image: url("../img/header.jpg");

	width: 760px;

	height: 84px;

}*/

#menu li {

	list-style-type: none;

}

#menu li a {

	text-decoration: none;

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 12px;	

}

#menu li a.active, #menu li a:hover {

	background-color: #e0e0b0;

	color: black;

}

#content {

	width: 500px;

	height: 483px;

	position: absolute;

	top: 150px;

	left: 150px;

}

#content-body {

	float: right;

	width: 550px;

}

#cb2 {

	width: 550px;

	position: relative;

}

#drill {

    width: 93px;

    height: 96px;

    background-image: url("../img/drill.png");

    position: absolute;

    top:423px;

    left:448px;

    z-index:20;

}

.logo {

	position: absolute;

	left: 300px;

	top: 3px;

}

.ribbon {

	position: absolute;

	top: -2px;

	right: -2px;

}

.clearboth {

	clear: both;

}

.clicktip {

	position: absolute;

	top: 240px;

	left: -175px;

        background-image: url("../img/clicktip.png");

        width: 138px;

        height: 55px;

}

#yellowpad {

	background: url("../img/notebook.png") no-repeat;/*url("/img/yellowpad.jpg") ;*/

	width: 560px;

	height: 400px;

	font-size: 13px;

        position: relative;

        top: 7px;

        left:-15px;

        font-family: "Times New Roman", Times, serif;

}

#yellowtextLEFT {

    position: absolute;

    width: 195px;

    left: 59px;

    top: 28px;

}

#yellowtextRIGHT {

    position: absolute;

    width: 189px;

    left: 284px;

    top: 25px;

}

#yellownext {

    position: absolute;

    right: 140px;

    bottom: 95px;

    margin-right: 10px;

    padding-bottom: 3px;

}

#yellowprev {

    /*float: left;*/

    position: absolute;

    left: 92px;

    bottom: 95px;

    padding-bottom: 3px;

    margin-left: 10px;

}

#abouthdr {

    position: absolute;

    background: no-repeat url("../img/menuStory.png");

    height: 38px;

    width: 150px;

    top: 19px;

    left: 100px;

}

.cont {

	position: absolute;

	left: 198px;

	top: 110px;

}

#my-workshop {

    position: relative;

    display: inline-block;

}

#taperight {

    position: absolute;

    top: -22px;

    right: 0px;

    background-image: url("../img/tapeR.png") ;

}

#tapeleft {

    position: absolute;

    top: -8px;

    left: -20px;

    background-image: url("../img/tapeL.png") ;

}

#contact {

	background: url("../img/bizcard.png") no-repeat;

	width: 333px;

	height: 210px;

	font-size: 11px;

        position: relative;

        top: 30px;

        left:-25px;

}

#mainnote {

	background: url("../img/mainnote.png") no-repeat;

	width: 150px;

        height: 108px;

	font-size: 11px;

        position: relative;

        padding:0px;

        position: absolute;

        left:242px;

        top: 70px

}

#welcome {

	background: url("../img/welcome.png") no-repeat;

	width: 170px;

        padding-right: 80px;

	height: 241px;

	font-size: 11px;

        position: relative;

        top: 4px;

        left: -20px;

        padding-left:10px;

}

.disabled {

    display: none;

}

.paging {

    font-size: 12px;

}



.menuMain {

    background: url("../img/menuMain.png") no-repeat top left;

    height: 23px;

    width: 150px;

    display: block;

}



.menuGallery {

    background: url("../img/menuGallery.png") no-repeat top left;

    height: 33px;

    width: 150px;

    display: block;

    margin-top:5px;

}



.menuStory {

    background: url("../img/menuStory.png") no-repeat top left;

    height: 38px;

    width: 150px;

    display: block;

    margin-top: -3px;

}



.menuWorkshop {

    background: url("../img/menuWorkshop.png") no-repeat top left;

    height: 35px;

    width: 150px;

    display: block;

    margin-top: -7px;

    margin-left:-4px;

}



.menuContact {

    background: url("../img/menuContact.png") no-repeat top left;

    height: 26px;

    width: 150px;

    display: block;

    margin-top: -5px;

    margin-left: -8px;

}

#menu a {

    text-decoration: none;

}

#menu a:hover {

    background-position: left bottom;

}

#pic1 {

    top: -99px; left:205px;

}

#pic2 {

    top:-90px; left:375px;

}

#pic3 {

    top: 172px; left:-30px;

}

#pic4 {

    top: 155px; left:150px;

}

#pic5 {

    top: 140px; left:365px;

}

.headfull {

	position: absolute;

	top: 210px;

	left: 325px;

        background-image: url("../img/headFull.png");

        background-repeat: no-repeat;

        width: 100px;

        height: 100px;

}



.container {

    width:1015px;

    /*height:754px;

    /*background: url("../img/background.jpg") no-repeat;

    /*background-position: center;*/

    max-width:100%;

    margin:0 auto;

    position: relative;

}



#logo_tm {

    width:351px;

    height:112px;

    position: absolute;

    top: 4px;

    left: 10px;

}

#menu-container {

    width:196px;

    height:232px;

    background: url("../img/menu.png") no-repeat;

    position: absolute;

    top: 111px;

    left: -6px;

}



#menu {

    padding-left:34px;

    padding-top: 50px;

}



#cork-container {

    position: relative;

    width: 760px;

   /* left: 132px;*/

    height: 470px;

    background: url("../img/cork.jpg") repeat-y;

    margin: 0px auto;

}

#cork-adjustment {

    margin-left: 13px;

    position: relative;

}

#bench {

    width:1015px;

    height:336px;

    background: url("../img/bench.png") no-repeat;

    position: absolute;

    top: 418px;

    left: -132px;

    z-index: 500;

}



#siteby {

    color: #444;

    font-family: sans-serif;

    position: relative;

    left: 340px;

    top: 230px;

    font-weight: bold;

    font-size: .8em;

}

#siteby a {

    text-decoration: none;

    color: #448;

}

#siteby a:hover {

    color: #e5ab4c;

}



#display-case {

    position: absolute;

    top: -95px;

    left: 310px

}



#gallery-select {

    position: absolute;

    top:-90px; left: 200px;

    height: 180px; width:300px;

    margin-top: 10px;

}

#gallerynote {

    position: absolute;

    top: 12px;

    left: -10px;

    width: 184px;

    height: 93px;

    background-image: url('../img/gallerynote.png');

}



#imgs {

    display: none; position:absolute; left:-15px; top:110px; width: 500px

}



/***************RESPONSIVE********************/

@media only screen and (max-width : 1015px) {

    /*-----------Full cork, Narrower than full background-------*/

    .container {background-position: center}

    /*-------END-Full cork, Narrower than full background-------*/

}



@media only screen and (max-width : 777px) {

    /*-----------Narrower than full cork-------*/

    #cork-container{ width: 100%; height: 670px;}

    #bench {

        top: inherit;

        left: inherit;

        bottom: -283px;

        width: 100%;

        background-position: center;

    }



        /*---MAIN PAGE---*/

        #pic2 {

            top: 370px;

            left: 5px;

        }

        #pic5 {

            top: 350px;

            left: 200px;

        }

        #mainnote {left: 228px; top: 65px}

    /*------END--Narrower than full cork-------*/

}



@media only screen and (max-width : 565px) {

    #logo_tm {

        position: relative;

        margin: 0px auto;

    }

    #cork-container{ height: inherit}

    #menu-container{

        position: relative;

        margin: 0px auto;

        top: inherit;

        left: inherit;

    }

    #imgs,

    .cont {

        margin-left: 5%;

        width: 90%;

        display: block;

        text-align: center;

    }

    #imgs {

        width: 98%;

        margin-left:1%;

    }



    #my-workshop #myImage,

    #my-workshop {width: 100%}



    #gallerynote, .clicktip, #gallery-select, #imgs,

    #contact, #display-case,

    .cont, #pic1, #pic2, #pic3, #pic4, #pic5,

    #welcome,

    #mainnote {

        display: inline-block;

        position: relative;

        top: inherit;

        left: inherit;

    }

    .clicktip {display: block; margin: 0px auto}

    #welcome {

        margin: 0px auto;

        display: block;

        width: 105px;

    }

    #mainnote{ vertical-align: text-bottom}

    #siteby {

        left: inherit;

        width: 95%;

        text-align: center;

    }





    #fancy_wrap,

    #fancy_overlay {display:none}



    .jcarousel-skin-tango .jcarousel-clip-horizontal,

    .jcarousel-skin-tango .jcarousel-container-horizontal {

        width: 100%;

        overflow: auto;

        overflow-x: hidden;

        height: auto;

    }

    .jcarousel-list li, .jcarousel-item {

        float: none;

        min-width: 150px;

    }

    .jcarousel-skin-tango .jcarousel-item {

        height: 180px;

    }

    .jcarousel-skin-tango .jcarousel-next-horizontal,

    .jcarousel-skin-tango .jcarousel-prev-horizontal,

    .random-top {display: none}



    .jcarousel-skin-tango .jcarousel-item {

        display: inline-block;

    }

    .jcarousel-list {

        max-width: 100%;

    }

    .jcarousel-skin-tango .jcarousel-container {

        left: auto;

    }



    #logo_tm {

        width:351px;

        height:112px;

        max-width: 95%;

        top: 4px;

        left: inherit;

    }

    #logo_tm img {

        max-width: 100%;

    }

    .mnuItm {

        margin-bottom: 5px;

    }



}



/***************end of RESPONSIVE********************/