/* ----------------------------------------------------- Copyright 2007 Eggplant Studios All Rights Reserved. Author: Eggplant Studios Team ----------------------------------------------------- --- Rules --- 16px = 1em (number divided by 16 (e.g. 120px/16 = 7.5em) 1px = .0625em gutters = 0.9375em standard fontsize(14/16) = 0.875em --- TOC --- 1. HTML and BODY 2. Frame Work 3. Basic Classes 4. Basic HTML 5. Navigation 6. Typography 7. Forms */ /* --- 1. HTML and BODY --- */ body { background-color: #FFFFFF; margin:0; padding:0; font-size:16px; font-family:Verdana, Arial, Helvetica, sans-serif; } /* --- 2. Frame Work --- */ #mainContainer { margin:0 auto; width:48.625em; border:1px #fff solid;}/* (780-2)px*/ #header {margin:1.25em 0 0 0.625em; float:left;}/* margin-top:50px*/ #contactForm { clear:both; width:31.25em; margin-right:1.2em; float:left;} #indexTopH { width:47.5em; height:0.5em; background:#a31c1f;} span#indexDownH { margin:0 0 0.315em 0; padding:0; display:block; width:47.5em; height:0.5em; background:url(../image/indexDown.gif) repeat-x;} #leftContent { width:18.8125em;} #rightContent { width:28.375em;} #leftContent,#rightContent,#nextContent,#indexArtists,#indexContact,#indexExihibition,#nextContentButton,#indexArtistsButton,#indexContactButton,#indexExihibitionButton,#artistsList, #collectionContent,.category,#contentArtists,.exhibitionLeft,.exhibitionRight,#footContent,#artTopNav,#indexhead,#aboutMiddleC,#indexAbout,#aboutLeft,#indexFlash,#articleSPecailPage, #exhibitionWords,#exhibitionFlash{ float:left;} #exhibitionWords {width:12.5em;} #aboutMiddleC { margin-top:0.315em;} #indexAbout { background:url(../image/bj.gif) #eeeeee no-repeat top; border-bottom:none; border-top:none; border-color:#eeeeee;} #aboutLeft { background:#eeeeee; height:25.25em;} #indexFlash { border:none;} #indexContact,#indexExihibition { background:#e5e5e5; border-color:#e5e5e5;} #indexArtists { background:#edd2d2;border-color:#edd2d2;} #indexArtistsButton,#indexExihibitionButton ,#indexContactButton{ background:#e5e5e5; border-color:#e5e5e5;} #contactContent {margin:0.625em 0 0 0.25em; width:47.5em; float:left;} #artistContent { width:47.5em;margin:1.5em 0 1.25em .625em;} #exhibitionContent{ float:left; margin:1.5em 0 1.25em .625em;} #artContent,#artContent{ float:left; margin:1.5em 0 0 .625em;} #aboutContent,#indexContent,#testAbout,#artContent,#contact {margin:1.5em 0 0 .625em;} #footer{ width:47.5em;margin:0.315em 0 0 0.625em; color:#3e3d3d;} #footContent { font-size:10px; width:76em;} /*#indexContent { margin-bottom:0.315em;}*/ .category { margin-left:1.65em; width:8.0625em;} .selected {color: #000000;} #artistsList,#articleSPecailPage { width:37.75em;} #collectionContent { width:693px; border:1px #CCCCCC solid; padding:0 2em 2em 2em; margin-bottom:0.625em;} .contentExhibition { margin-top:1.5625em;} .contentExhibitionL { margin-top:1.5625em;} #rss { width:33.4em; text-align:right; vertical-align:middle;} #contentAbout { background:#f0f0f0; font-size:14px; color:#333333; font-family:Arial, Helvetica, sans-serif; margin:1.76em 0 1.76em 0; padding:1.76em; line-height:20px; } #artTopNav { width:47.5em; margin-bottom:0.5em;} #artFlash,#collectionContent{ margin-top:1.75em; font-family:Arial, Helvetica, sans-serif;} #articleSPecailPage,#biographySPecailPage { margin-top:0.5em; font-family:Arial, Helvetica, sans-serif;} #nextContent,#nextContentButton{ width:47.5em;} /* --- 3. Basic Classes --- */ .clear { clear:both;} .marginL{ margin-left:0.3125em;} .marginR { margin-right:0;} .marginT{ margin-top:0.3125em;} .marginTL{ margin-top:1.25em;} .marginTN { margin-top:0;} .marginBN { margin-bottom:0;} .marginB{ margin-bottom:0.3125em;} .nameW { width:129px;} img#ButtonMR { margin-left:9em;} .clorRed { color:#990000;} .oneBox { width:9.125em; border:1px #fff solid;}/*width:(148-2)px*/ .twoBox { width:18.6875em; border:1px #fff solid;}/*width:(301-2)px*/ .threeBox { width:28.375em;}/*width:(454-2)px*/ .EsizeOne { height:16.9375em;} .Esizetwo { height:5em;} .Esizethree { height:1.5625em;} .border{ border-bottom:2px #E5E5E5 solid;} #getTouch { width:14em; float:left;} #getTouch h5{ margin-top:0.625em;margin-bottom:0.5em; padding:0;font-size:18px; color:#000000; font-weight:normal;} #getTouch span{ color:#000000;} h5#getTouchArt { color:#fddcde; background:#990000; padding:0.1em 0.2em; margin-top:1.6em;} #getTouch input,#getTouch textarea { width:195px; margin:0.2em 0 0.2em 0; border:1px #CCCCCC solid;} input#submitArt{ height:22px; width:54px; background:url(../image/submit_art.gif) no-repeat; border:none;} #getTouch p{ font-size:13px; color:#000000; line-height:22px; } #getTouch p span{ margin-right:0.2em;} .marginLL{ margin:0 0 0 39em; padding:1.25em 0 0 0; font-size:12px; } .marginLL span{ margin-left:1.25em;} /* --- 4. Basic HTML --- */ #indexAbout img#indexAboutT { margin:8.05em 0 0 0.625em; } #indexAbout img#indexAboutC{ margin:0.8em 0 0.5em 0.625em; } #indexAbout font { display:block; text-align:right;} #indexAbout font span{text-align:right; vertical-align:middle; } #indexAbout font img{ vertical-align:middle; margin-right:0.625em; } #aboutLeft p { font-size:14px; line-height:20px; margin-left:0.625em; padding:5px; font-family:Arial, Helvetica, sans-serif;} p.topH { margin-top:1.25em;} p.bottomH { margin-bottom:1.25em;} #indexContact p{ margin:0.8em 0 0 0.8em; padding:0; width:11em; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #indexExihibition span { display:block; margin:0.8em 0 0 0.8em; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ab0e14;} #indexExihibition p { margin:0.4em 0 0 0.8em; padding:0;font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#221815;} #artTopNav h1 { margin:0; padding:;font-family:Arial, Helvetica, sans-serif; font-size:26px; font-weight:normal; width:7.7em; float:left;} #artistContent h1,#exhibitionContent h1,#aboutContent h1 ,#contact h1,#testAbout h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; padding:0 0 2px 0; border-bottom:1px #a31c1f solid; margin:0; width:29.25em;} .category h2 { font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; margin:1.7em 0 0 0; padding:0; vertical-align:middle;} .category ul{ margin:1em 0 0 0; padding:0;} .category ul li{ font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#615f61; list-style-type:none; margin:0; padding:0; line-height:22px;} h1 { font-size:26px;} h2 { font-size:18px;} h2 a { color: #000000; text-decoration: none; } h2 a:hover { text-decoration: underline; } h3 { font-size:14px; font-weight:normal;} h4{ font-size:12px;} h5 { font-size:14px; } h6 { font-size:12px; font-weight:normal;} #header span { margin-left:22.5625em;} #artistsList dl { float:left; margin:2.1875em 1.75em 0 0; padding:0;} #artistsList dl dd{margin:0; padding:0; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#000000; text-align:center;} #artistsList dl dd img{ border:1px #CCCCCC solid;} #artistsList dl.lastDl{ margin-right:0;} #artistsList dl span { font-size:12px; margin-right:1.25em; color:#666666; } #collectionContent dl { float:left; margin:1em 3.5em 0 0; padding:0;} #collectionContent dl dd{margin:0; padding:0; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#000000; text-align:center;} #collectionContent dl dd img{ border:1px #CCCCCC solid;} #collectionContent dl.lastDl{ margin-right:0;} #collectionContent h2 { font-weight:normal;margin:1.25em 0 0 0; padding:0; } #exhibitionWords dl { margin:1em 0 0 0; padding:0 0 0 1.4375em;font-family:Arial, Helvetica, sans-serif;} #exhibitionWords dl dt{ margin:0.5em 0 0 0; padding:0; font-size:18px;} #exhibitionWords dl dd{ font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; font-size:12px; margin-top:0.5em; line-height:18px; height:26em; width:14.5em;overflow:hidden;} #exhibitionWords dl dd p{ margin:0;} #exhibitionWords dl dd.ddMore{ margin:0; padding:0; font-size:12px;line-height:18px;height:20px; width:12.5em;} #exhibitionWords dt.smallTile { font-size:14px; text-decoration:none; font-weight:bold; margin-top:0.5em; } #exhibitionWordsPop { width:500px; padding:10px 20px 0 0; text-align:left; } #exhibitionWordsPop dl { margin:0; padding:0 0 0 1.4375em;font-family:Arial, Helvetica, sans-serif;} #exhibitionWordsPop dl dt{ margin:0.5em 0 0 0; padding:0; font-size:18px;} #exhibitionWordsPop dl dd{ margin:0; padding:0; font-size:0.875em; margin-top:0.5em; line-height:1.285em;} #exhibitionWordsPop dt.smallTile { font-size:14px; text-decoration:none; font-weight:bold; margin-top:0.5em; } #footContent div{ margin:0; float:left;} #rss span{vertical-align:middle;} #artTopNav ul { margin:1em 0 0 0; padding:0; float:left; width:34.8em; text-align:right;} #artTopNav ul li{ margin:0; padding:0; display:inline; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin-left:1.75em;} #artTopNav .selected {color:#000000;} #artContent span.line { display:block; width:47.5em; background:url(../image/line.gif) repeat-x; height:1px;} #articleSPecailPage p ,#biographySPecailPage p{ font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:22px;} #articleSPecailPage h6 ,#biographySPecailPage h6{ color:#999999;} #getTouch p a{ color:#990000;} .tellSelect p{ background:#FFFFDD;margin: 1em 0 0.4em 0; padding:0.3em; width:29.5em;} p.backlinks {font-size: 11px; margin-bottom: 0; padding-bottom:0;} p.backlinks a {color: #615f61; margin-bottom: 0; padding-bottom:0;} p.backlinks a:hover {text-decoration:none;} /* --- 4.1 Images --- */ #indexFlash img { margin:0; padding:0; border:none;} #indexContact img ,#indexExihibition img{ margin:0.625em 0 0 0.625em;} img#artistTitle { margin:0.625em 0 0 0.35em; vertical-align:top;} #getTouch p img{ float:right; margin-top:0.315em;} #indexContactButton img,#indexArtistsButton img ,#indexExihibitionButton img{ margin-top:0.4em ;} img#ButtonCMI{ margin-left:0.5em;} img#ButtonCMT{ margin-left:3.4em;} img#ButtonAMI{ margin-left:0.5em;} img#ButtonAMT{ margin-left:4em;} img#ButtonEMI{ margin-left:0.5em;} img#ButtonEMT{ margin-left:21.5em;} #nextContentButton img { border:none;} #header img {border:none; float:left;} #rss img{vertical-align:middle; margin-left:0.625em;} #indexAbout font img { border:none;} /* --- 5. Navigation --- */ #indexArtists a,#indexCurrent a{ color:#000000;} #nextContentButton a:hover{ cursor:pointer;} .category ul a { text-decoration:none; color:#615f61;} .category ul a.selected { color: #000000;} #artistsList a,#collectionContent a { text-decoration:none; color:#000000;} #artTopNav ul a { text-decoration:none; color:#999999;} #artTopNav ul a:hover { text-decoration:none; color:#000000; } #artistsList span a,#artistsList h1 a { color:#666; text-decoration:none; } .on { padding:0; color:#fff; border:1px #990000 dotted; background:#F9E6E6; } .onTitle{ color:#990000;} #artistsList span a:hover,#artistsList h1 a:hover { color:#990000;} #artistsList h1 span.onTitle a{ color:#990000;} #artistsList dd a { color:#000000; text-decoration:none;} #artistsList dd a:hover{ color:#990000; text-decoration:none;} /* --- 5.1 Top Navigation --- */ #topNav { margin-left:12.4375em; margin-top:4.28em; vertical-align:bottom;padding: 0; width:21.125em; height: 0.6875em; float:left;} #topNav ul { padding: 0; margin:0; } #topNav li { display: inline; text-indent: -9999em; float: left; height: 0.6875em; } #topNav a { overflow: hidden; } #index .navHome a,#about .navAbout a,#artists .navArtists a, #exhibition .navExhibition a, #contact .navContact a, .navHome a:hover,.navAbout a:hover,.navArtists a:hover, .navExhibition a:hover, .navContact a:hover {background-position: 0 -11px !important;} #topNav .navHome a { background:url(../image/nav/nav_home.gif) top ; height: 11px; width: 52px; display: block; } #topNav .navAbout a { background:url(../image/nav/nav_about.gif) top ; height: 11px; width: 64px; display: block; } #topNav .navArtists a { background:url(../image/nav/nav_artists.gif) top ; height: 11px; width: 67px; display: block; } #topNav .navExhibition a { background:url(../image/nav/nav_exhibition.gif) top ; height: 11px; width: 90px; display: block; } #topNav .navContact a { background:url(../image/nav/nav_contact.gif) top; height: 11px; width: 65px; display: block; } #footer div a{ color:#990000;} /* --- 6. Typography --- */ /* --- 7. Forms --- */ select#contactSelect { margin:1em 0 0 0; width:10em;}