/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, font, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: top; background: transparent; }
a, a:visited, a:active { text-decoration: none; font-size: inherit; color: #000000; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
/* RESET END */


body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #777777; background-color: White; line-height: 1.2em;}
a, a:link, a:visited { text-decoration: none; color: #999999; }
a:hover { color: #000000; }

#allPage { max-width:700px; min-width:320px; margin: 90px auto 0px auto; }
#MenuIni {  font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; color: #999999; font-size: 11px; text-transform: uppercase; margin-left: 2px; }
#MenuIni a, #MenuIni a:link, #MenuIni a:visited { text-decoration: none; color: #999999; }
#MenuIni a:hover { color: #f54085; }

#sideMenu { display:inline; float:left; width: 158px; margin-right: 70px; }
#pageContent { display:inline; float: left; width: 472px; text-align:left; }
#sideMenu #imgTop { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #999999; }
#sideMenu #imgTop img { width: 90px; }
#sideMenu #menuBar { margin-left: 2px; }
#menuBar .menuItem { font-size: 14px; text-transform: uppercase; color: #999999; cursor:pointer; line-height: 1.2em }
#menuBar .menuItemNoSub { font-size: 14px; text-transform: uppercase; color: #999999; line-height: 1.2em }
#menuBar .menuContact { padding-top: 20px; margin-top: 20px; padding-bottom: 20px; margin-bottom: 20px; border-top: 1px solid #999999; border-bottom: 1px solid #999999; }
#menuBar .menuItem:hover { color: #000000; }
#menuBar .menuOptions { font-size: 11px; text-transform: lowercase; line-height: 1.3em; margin: 4px 0px 4px 10px; }
#menuBar .menuContact .menuOptions { font-size: 10px; color: #999999; text-transform: lowercase; line-height: 1.3em; margin: 10px 0px 4px 2px; }
#menuBar .menuOptions a, #menuBar .menuOptions a:link, #menuBar .menuOptions a:visited { text-decoration: none; color: #999999; }
#menuBar .menuOptions a:hover { color: #000000; }
#menuBar .menuSelected { color: #000000; }

.pageTitle { font-size: 18px; text-transform: uppercase; font-weight: bold; line-height: 1.2em; margin-bottom: 20px; }
.pageSubTitle { font-size: 13px; text-transform: lowercase; font-weight: bold; }
.pageSmallText { font-size: 10px; line-height: 1.2em;}
.pageGroupListText { font-weight:bold; margin-top:5px; margin-bottom:3px; }

.pageProjTitle { font-size: 18px; font-weight: bold; line-height: 1.2em; margin-top: 40px; margin-bottom: 20px; }
.pageProjInfo { font-size: 10px; line-height: 1.2em; margin-bottom: 20px; }
.pageProjInfo .pageProjInfoYear { font-size: 13px; font-weight: normal; line-height: 1.2em; }
.pageProjPlayVideo { font-size: 13px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; }
.pageProjColection { font-size: 10px; line-height: 1.2em; margin-bottom: 20px; }
.pageProjText { font-size: 13px; line-height: 1.2em; margin-top: 20px; margin-bottom: 20px; }
.imgPhotoHidden { display: none; }
.imgPhotoSelector { font-size: 10px; text-align: right; margin-top:5px; }
.imgPhotoNumber { margin-left: 5px; }
.imgPhotoSelected { color: Black; }
.imgPhotoCaption { font-size: 10px; color:Black; text-align: left; margin-top:2px; }
.itemCursorPointer { cursor: pointer; }

/* SlideShow */
.slideshow { position: relative; display: block; width:100%; }
.slideshowImg { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 8; display: none; }
.slideshowImg.active { z-index:10; display:block;}
.slideshowImg.last-active { z-index:9; }
.slideshowImg IMG { position: static; top: 0px; margin-left: auto; margin-right: auto; }


@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) 
and (orientation : landscape) {
    #allPage { margin: 0px auto; min-width: 320px; width: 100%; line-height: 180%; }
    body { font-size: 20px; }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) 
and (orientation : portrait) {
    #allPage { margin: 0px auto; min-width: 320px; width: 100%; line-height: 180%; }
    body { font-size: 26px; }
}