/* Mobile Layout: 320px / 8 columns
-------------------------------------------------------------------------------------------------------------------------- */

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

#wrapper, #header-image {
width: 320px;
}
#vertalign { /* vertical center hack */
height: 6px;
margin-top: 0;
}

#header {
height: 27px;
background: url(../img/bg/320/wrapper-head-bg.jpg) no-repeat;
}
#container, #primary, #secondary {
background: url(../img/bg/320/wrapper-bg.jpg) repeat-y;
}
#footer {
height: 18px;
background: url(../img/bg/320/wrapper-foot-bg.jpg) no-repeat;
}

/* header ----------------------------------------------------------- */
#access {
left: 71px;
top: 26px;
}

/* main ----------------------------------------------------------- */
#container {
width: 300px;
padding: 174px 0 0 20px;
}
.gallery-title, 
#section-title, 
.page-id-17 .entry-title, 
.page-template-guestbook-php .entry-title,
.page-template-contact-php .entry-title {
left: 60px;
top: 160px;
}
.single .hentry, .page .hentry {
width: 280px;
margin: 0;
}
#primary, #secondary {
display: none;
/*
width: 300px;
padding-left: 20px;
font-size: 1.2em;
margin: 0;
}
#primary {
padding-top: 148px;
*/
}
#nav-below {
width: 280px;
}

/* footer ----------------------------------------------------------- */
#footer-widget-area {
top: 20px;
width: 320px;
background: url(../img/various/footer-a.png) top center no-repeat;
font-size: 1.2em;
}
#footer-widget-area ul {
padding: 0 0 20px 0;
}
#footer-widget-area ul li a {
display: block;
width: 320px;
padding: 14px 0;
background: url(../img/various/footer-a.png) bottom center no-repeat;
}
#footer-widget-area a {
}
#bg-img {
display: none;
}

#footer-widget-area ul li.gaga-link a {
width: 60px;
height: 28px;
padding: 10px 0!important;
background: url(../img/various/gaga-gr-999.png) center center no-repeat;
}
#footer-widget-area ul li.gaga-link a:hover {
background: url(../img/various/gaga-gr-3835dd.png) center center no-repeat;
}
#footer-widget-area ul li.gaga-link.current_page_item > a {
background: url(../img/various/gaga-gr-d82d35.png) center center no-repeat;
}

#menu-footmenu li:hover > ul {
display: none;
}

/* HOMEPAGE -------------------------------------------------------------- */
.home #access, .home #access ul{width:320px; height:480px}
.home #access{background:url(../img/branding/home/320/intro-320.jpg) no-repeat}
.home #access ul{background:url(../img/branding/home/320/intro-320.png) no-repeat}
.home .p-link, .home .o-link, .home .n-link, .home .t-link, .home .i-link, .home .a-link, .home .c-link, .home .prev-link, .home .home-link, .home .next-link, .home .gaga-link{text-indent:-9999px}

.home .p-link a, .home .o-link a, .home .n-link a, .home .t-link a, .home .i-link a, .home .a-link a, .home .c-link a, .home .prev-link a, .home .home-link a, .home .next-link a{position:absolute; height:140px; top:170px}
.home .p-link a:hover, .home .o-link a:hover, .home .n-link a:hover, .home .t-link a:hover, .home .i-link a:hover, .home .a-link a:hover, .home .c-link a:hover, .home .prev-link a:hover, .home .home-link a:hover, .home .next-link a:hover{position:absolute; top:170px; height:188px; width:154px}

.home .p-link a{left:20px; width:43px}
.home .p-link a:hover{left:8px; background:url(../img/branding/home/320/p-link-over.png) no-repeat}

.home .o-link a{left:64px; width:42px}
.home .o-link a:hover{left:28px; background:url(../img/branding/home/320/o-link-over.png) no-repeat}

.home .n-link a{left:107px; width:43px}
.home .n-link a:hover{left:70px; background:url(../img/branding/home/320/n-link-over.png) no-repeat}

.home .t-link a{left:151px; width:43px}
.home .t-link a:hover{left:81px; background:url(../img/branding/home/320/t-link-over.png) no-repeat}

.home .i-link a{left:194px; width:20px}
.home .i-link a:hover{left:123px; background:url(../img/branding/home/320/i-link-over.png) no-repeat}

.home .a-link a{left:215px; width:43px}
.home .a-link a:hover{left:138px; background:url(../img/branding/home/320/a-link-over.png) no-repeat}

.home .c-link a{left:258px; width:43px}
.home .c-link a:hover{left:158px; background:url(../img/branding/home/320/c-link-over.png) no-repeat}

.home .gaga-link{left:168px; top:336px; width:131px; height:86px}
.home .gaga-link a{width:131px; height:86px; background:url(../img/branding/home/320/gaga-link.png) no-repeat}
.home .gaga-link a:hover{background:url(../img/branding/home/320/gaga-link-over.png) no-repeat}

/* GALLERY ----------------------------------------------------------- */
.page-template-gallery-php #header {
height: 240px;
background: url(../img/bg/320/sketch-head-bg.jpg) no-repeat;
}
.page-template-gallery-php #container {
background: url(../img/bg/320/sketch-bg.jpg) no-repeat;
padding: 0;
width: 320px;
min-height: 390px;
}
.page-template-gallery-php #footer {
clear: both;
height: 55px;
background: none;
}
.page-template-gallery-php #footer-widget-area {
width: 320px;
left: 0px;
top: 10px;
}

#slideshow-container {
width: 320px;
height: 710px;
overflow: visible;
}
#slideshow, #controls {
left: 8px;
top: 0px;
}
#slideshow, span.image-wrapper, a.advance-link  {
width: 304px;
height: 290px;
}
#controls, .nav-controls  {
width: 304px;
height: 380px;
}
a.advance-link img {
max-width: 280px;
max-height: 280px;
}
.nav-controls a.next {
background: url(../img/aro/next2.png) bottom left no-repeat ;
}
.nav-controls a.next:hover {
background: url(../img/aro/next2-over.png) bottom left no-repeat;
}
.nav-controls a.prev {
background: url(../img/aro/prev2.png) bottom right no-repeat;
}
.nav-controls a.prev:hover {
background: url(../img/aro/prev2-over.png) bottom right no-repeat;
}
.ss-controls {
margin: 0 0 0 -31px;
}
.ss-controls .play, .ss-controls .pause {
line-height: 20px;
text-align: center;
width: 60px;
font-size: 1.3em;
}
#thumbs {
left: 20px;
top: 405px;
width: 280px;
height: 298px;
}
ul.thumbs {
width: 280px;
height: 280px;
overflow: hidden;
}
ul.thumbs li, ul.thumbs li img {
width: 64px !important;
height: 64px !important;
}
#caption {
left: 0;
top: 290px;
width: 320px;
text-align: center;
}
#caption .caption {
height: 60px;
vertical-align: middle;
}
#caption .image-title {
width: 100%;
padding: 0;
background: none;
}
#caption .image-title,
#caption .image-excerpt,
#caption .image-description {
width: 294px;
line-height: 1em;
}
#caption .image-excerpt {
color: #333;
}
#caption .image-description {
color: #666;
}



/* NEWS  ----------------------------------------------------------- */
.blog #header, .single-post #header {
height: 230px;
background: url(../img/bg/320/paper-head-bg.jpg) no-repeat;
}
.blog #container, .single-post #container {
background: url(../img/bg/320/paper-bg.jpg) repeat-y;
padding: 0 0 0 20px;
width: 320px;
}
.blog #footer, .single-post #footer {
clear: both;
height: 110px;
background: url(../img/bg/320/paper-foot-bg.jpg) no-repeat;
}
.blog #footer-widget-area, .single-post #footer-widget-area {
top: 20px;
padding: 12px 0;
background: url(../img/various/news-footertop-320.png) no-repeat;
}

.blog #section-title, .single-post #section-title {
position: absolute;
display: block;
left: 20px;
top: 180px;
width: 280px;
height: 32px;
}
.blog #section-title .entry-title, .single-post #section-title .entry-title {
display: block;
width: 280px;
height: 32px;
background: url(../img/headers/header-news-320.png) no-repeat;
}

.blog .hentry {
width: 280px;
margin: 0 0 16px 0;
}
.news-thumb img {
max-width: 180px;
}
.blog .hentry:first-child {
margin: 0;
}
.news-latest {
width: 280px!important;
}
.header-image img {
max-width: 280px;
}
.paged .hentry {
width: 280px;
min-height: 0;
margin: 0 0 16px 0;
}
.paged .hentry:first-child {
margin: 0 0 16px 0;
}
.news-thumb, .entry-title, .entry-date {
text-align: center;
}

/* single -------------------------------------------------------------- */
.single-post .entry-title {
width: 280px;
font-size: 2.6em!important;
}
.featured-image {
margin: 0;
}
.featured-image img {
max-width: 280px;
}
.single .entry-content img {
max-width: 280px;
}

/* TAKE-OUT -------------------------------------------------------------- */
.page-template-takeout-php #header, .single-takeout #header {
height: 220px;
background: url(../img/bg/320/takeout-head-bg.jpg) no-repeat;
}
.page-template-takeout-php #container {
background: url(../img/bg/320/takeout-bg.jpg) no-repeat;
padding: 0 0 0 29px;
width: 291px;
height: 1008px;
min-height: 1008px;
}
.page-template-takeout-php #footer, .single-takeout #footer {
clear: both;
height: 70px;
background: url(../img/bg/320/takeout-foot-bg.jpg) no-repeat;
}

.page-template-takeout-php #section-title, .single-takeout #section-title {
position: absolute;
display: block;
left: 28px;
top: 159px;
width: 265px;
height: 39px;
}
.page-template-takeout-php #section-title .entry-title, .single-takeout #section-title .entry-title {
display: block;
width: 265px;
height: 39px;
background: url(../img/headers/header-takeout-320.jpg) no-repeat;
}

#takeout .hentry, .paged #takeout .hentry {
width: 262px;
height: 168px;
min-height: 168px;
margin: 0;
}
#takeout .hentry a {
left: 25px;
top: 17px;
width: 213px;
height: 130px;
background: url(../img/bg/320/takeout-door.png) no-repeat;
}
#takeout .hentry a:hover {
background: url(../img/bg/320/takeout-door-over.png) no-repeat;
}

.takeout-thumb {
left: 25px;
top: 17px;
width: 213px;
height: 130px;
}
.takeout-thumb img {
max-width: 214px;
}

#takeout h2.entry-title {
font-size: 2em;
margin: 30px 0 0 0;
}
.takeout .item {
font-size: 1.3em;
}
.takeout .price {
font-size: 1.3em;
}


.page-template-takeout-php #nav-below {
width: 262px;
}

.page-template-takeout-php #footer-widget-area, .single-takeout #footer-widget-area {
top: 90px;
}

/* wp-pagenavi */
.page-template-takeout-php #page-nav {
top: 1032px;
width: 262px;
}

a.previouspostslink, a.nextpostslink {
padding: 12px!important;
margin: -12px 0 0 0!important;
}

/* single */
.single-takeout #container {
padding: 0 0 0 16px;
width: 304px;
min-height: 390px;
}
.single-takeout .hentry {
margin: 0;
width: 300px;
min-height: 390px;
}
.takeout-image {
float: left;
margin: 14px 0 10px 0;
}
.takeout-image img {
max-width: 288px;
}

.single-takeout #nav-below {
width: 288px;
}

/* AUTOBIO, GUESTBOOK, RECOMMENDED -------------------------------------------------------------- */
.page-template-autobio-php #header, .page-template-guestbook-php #header, .page-template-recommended-php #header {
height: 390px;
background: url(../img/bg/320/book-head-bg.jpg) no-repeat;
}
.page-template-autobio-php #container, .page-template-guestbook-php #container, .page-template-recommended-php #container {
background: url(../img/bg/320/book-bg.jpg) repeat-y;
}
.page-template-autobio-php #footer, .page-template-guestbook-php #footer, .page-template-recommended-php #footer {
height: 35px;
background: url(../img/bg/320/book-foot-bg.jpg) no-repeat;
}

#menu-autobio {
left: 46px;
top: 165px;
width: 240px;
font-size: 1.8em;
text-align: center;
}
#menu-autobio li {
display: block;
min-width: 200px;
margin: 0 14px;
}

/* AUTOBIO -------------------------------------------------------------- */
.page-template-autobio-php #container {
padding: 0px 0 0 50px;
}

.page-template-autobio-php #section-title, .single-autobio #section-title {
left: 42px;
top: 330px;
width: 240px;
height: 32px;
}
.page-template-autobio-php #section-title .entry-title, .single-autobio #section-title .entry-title {
background: url("../img/headers/header-autobio-320.png") no-repeat scroll 0 0 transparent;
width: 240px;
height: 32px;
}

.page-template-autobio-php .hentry {
margin: 0 0 0 0!important;
width: 240px;
}
.page-template-autobio-php .hentry .entry-title, .page-template-autobio-php .hentry .entry-content {
float: left;
width: 240px;
}
.page-template-autobio-php .featured-image {
width: 240px;
margin: 0;
}
.page-template-autobio-php .featured-image img {
max-width: 240px;
}

.page-template-autobio-php .entry-content img {
max-width: 240px;
}

.page-template-autobio-php #page-nav {
margin: 20px 0 0 -10px;
width: 260px;
}

.page-template-autobio-php #footer-widget-area, .page-template-guestbook-php #footer-widget-area, .page-template-recommended-php #footer-widget-area {
top: 50px;
}

/* GUESTBOOK -------------------------------------------------------------- */
.page-template-guestbook-php #container {
width: 270px;
min-height: 400px;
padding: 0px 0 0 50px;
}

.page-template-guestbook-php #section-title {
left: 50px;
top: 320px;
width: 240px;
height: 60px;
}
.page-template-guestbook-php #section-title .entry-title {
display: block;
width: 240px;
height: 60px;
background: url(../img/headers/header-guestbook-320.png) no-repeat;
}

#respond,
#reply-title,
.respond-left,
.respond-left label,
.comment-form-comment,
.comment-form-comment label,
.form-submit,
#comments-title,
ul.commentlist,
ul.commentlist li {
width: 240px;
}

#respond {
height: 380px;
margin-left: 0;
}
#reply-title {
top: 0;
text-align: center;
}
.respond-left,
.respond-left input,
.comment-form-comment label {
text-align: center;
}
.respond-left {
bottom: 230px;
}
.respond-left input {
padding: 3px 2px
}
.comment-form-comment {
left: 0;
bottom: 50px;
}
textarea#comment {
width: 228px;
height: 140px;
}
.form-submit {
left: 0;
bottom: 16px;
text-align: center;
font-size: 1.4em;
}
.form-submit input {
padding: 0 4px 2px 4px;
}

/* comments */
#comments {
margin: 0 0 0 -50px;
width: 305px
}
#comments-title {
margin: 8px 0 4px 50px !important;
text-align: center;
}
ul.commentlist {
padding: 0 0 0 50px;
}
#comments .navigation {
width: 260px;
padding: 0 0 0 40px;
}

/* RECOMMENDED -------------------------------------------------------------- */
.page-template-recommended-php #container {
width: 270px;
padding: 0 0 0 50px;
}

.page-template-recommended-php #section-title {
left: 50px;
top: 320px;
width: 240px;
height: 62px;
}
.page-template-recommended-php #section-title .entry-title {
display: block;
width: 240px;
height: 62px;
background: url(../img/headers/header-recommended-320.png) no-repeat;
}

.page-template-recommended-php .hentry {
width: 238px;
min-height: 1px;
margin: 0 0 16px 0;
}
.page-template-recommended-php .hentry p:first-child {
width: 238px;
}

/* CONTACT -------------------------------------------------------------- */
.page-template-contact-php #header {
background: url(../img/bg/320/contact-head-bg.jpg) no-repeat;
height: 357px;
}
.page-template-contact-php #container {
background: url(../img/bg/320/contact-bg.jpg) repeat-y;
min-height: 299px;
}
.page-template-contact-php #footer {
background: url(../img/bg/320/contact-foot-bg.jpg) no-repeat;
}

.page-template-contact-php #section-title {
left: 42px;
top: 313px;
width: 240px;
height: 150px;
}
.page-template-contact-php #section-title .entry-title {
width: 240px;
height: 150px;
background: url(../img/headers/header-contact-320.png) no-repeat;
}

.page-template-contact-php #menu-autobio {
left: 46px;
top: 165px;
width: 240px;
font-size: 1.8em;
text-align: center;
}

.page-template-contact-php .hentry {
min-height: 1px;
}

#contactform {
left: 40px;
top: 125px;
width: 260px;
}

.CleanContact input[type="text"] {
width: 204px;
margin: 0 0 6px 0;
}
.CleanContact input[type="text"], .CleanContact label {
line-height: 23px;
}
#clean_contact_from_name {
margin: 0px 0 6px 0;
}
.label-msg {
margin: 20px 0 -3px 0;
}
.CleanContact textarea {
height: 204px;
}
.CleanContact input[type="submit"] {
margin: 3px 0 0 0;
width: 240px;
}

/* ERROR 404 -------------------------------------------------------------- */
.error404 #container {
min-height: 260px;
}
#img404 {
width: 290px;
height: 260px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.error404 #content img {
max-width: 280px;
margin: 30px 0 0 0;
}
.error404 #access {
left: 71px;
top: 40px;
}
#txt404 {
left: 20px;
top: 150px;
width: 280px;
text-align: center;
}
.error404 #footer-widget-area {
top: 40px;
}


}