From cf4af138b16da878404cf3319d5d988dacee198a Mon Sep 17 00:00:00 2001 From: raylu Date: Sat, 5 Nov 2011 03:04:49 -0700 Subject: new layout --- css/maps.css | 390 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 390 insertions(+) create mode 100644 css/maps.css (limited to 'css/maps.css') diff --git a/css/maps.css b/css/maps.css new file mode 100644 index 0000000..035672a --- /dev/null +++ b/css/maps.css @@ -0,0 +1,390 @@ +.grid_dsp_data { + padding:1px; + font-weight:bold; +} + +.grid_outer { + position:relative; + padding: 2px 0 1px; + margin: 0 auto; + background-color: #334; + border-radius: 2px; + box-shadow: 0 0 2px #777; +} +.grid_outer a +{ + color: #FFFF33; +} + + + +.dsp_60 { + width:60%; +} +.dsp_49 { + width:49%; +} +.dsp_33 { + width:32%; +} +.dsp_24 { + width:23%; +} +.dsp_16 { + width:16%; +} + +.grid_dsp_left, +.grid_dsp_mid, +.grid_dsp_right { + overflow: hidden; + white-space: nowrap; + position: relative; + float: left; + padding:2px; + color: #FFFFFF; +} +.grid_dsp_left { + text-align:left; +} +.grid_dsp_mid { + text-align:center; +} +.grid_dsp_right { + text-align:right; +} + +.grid_img { + padding: 0px; + margin: 0px; + border: 0px; + border-spacing: 0px; + width: 36px; + height: 35px; +} + + +.grid_table +{ + position:relative; + padding: 0px; + margin-top:1px; + margin-bottom:1px; + margin-left:auto; + margin-right:auto; + border-top: 0px solid #000; + border-left: 0px solid #000; + border: 1px solid #000; + border-spacing: 0px; +} +.grid_table td, .grid_table th { + padding: 0px; + margin: 0px; +} +.grid_td, +.grid_td_rocks, .grid_td_gray, .grid_td_path, .grid_td_blanks, .grid_td_walls, +.grid_td_start, .grid_td_finish, +.grid_td_cpa, .grid_td_cpb, .grid_td_cpc, +.grid_td_cpd, .grid_td_cpe, +.grid_td_animate, .grid_td_animate_pre, +.grid_td_tp1_in, .grid_td_tp2_in, .grid_td_tp3_in, .grid_td_tp4_in, .grid_td_tp5_in, +.grid_td_tp1_out, .grid_td_tp2_out, .grid_td_tp3_out, .grid_td_tp4_out,.grid_td_tp5_out, +.grid_td_path1 , .grid_td_path2, .grid_td_path3, .grid_td_path4 +{ + padding: 0px; + margin: 0px; + border: 0px; + border-right: 0px solid #000; + border-bottom: 0px solid #000; + + overflow: hidden; + font-size: 4px; + line-height:9px; + width: 35px; + /* width: 22px; */ + height: 35px; + min-height: 1px; + background: url(../images/OverlayTileFaceted50b.png); + background-size: 100%; + transition:background-color 0s; + -webkit-transition:background-color 0s; + -o-transition:background-color 0s; + -moz-transition:background-color 0s; +} +.grid_td +{ + background: #F5FBFE url(../images/OverlayTile10.png); +} +.grid_td:hover +{ + background: #CCCCCC url(../images/OverlayTileFaceted10.png); +} +.grid_td_pressed { + background: #111122; +} + +.grid_td_rocks { + background: #b85555 url(../images/OverlayTileFaceted50b.png); +} +.grid_td_gray { + background: #CCCCCC url(../images/OverlayTileFaceted50b.png); +} +.grid_td_path { + background: #FFFFEE url(../images/OverlayTeleport.png); +} + +.grid_td_blanks { + background: inherit; +} +.grid_td_walls { + background-color: #666666; + background: url(../images/OverlayTileFaceted50b.png); + transition:background-color 1.6s ease-out; + -webkit-transition:background-color 1.6s ease-out; + -o-transition:background-color 1.6s ease-out; + -moz-transition:background-color 1.6s ease-out; +} +.grid_td_walls:hover { + background: #CCCCCC url(../images/OverlayTileFaceted30.png); + background-color: #999; +} + +.grid_td_start { + background: url(../images/OverlayStart50b.png); + background-color: #FFF; +} +.grid_td_finish { + background: url(../images/OverlayFinish50c.png); + background-color: #666666; + color: #fff; +} + + +.grid_td_tp1_in, .grid_td_tp2_in, .grid_td_tp3_in, .grid_td_tp4_in, .grid_td_tp5_in, +.grid_td_tp1_out, .grid_td_tp2_out,.grid_td_tp3_out, .grid_td_tp4_out,.grid_td_tp5_out, +.grid_td_cpa, .grid_td_cpb, .grid_td_cpc, .grid_td_cpd, .grid_td_cpe +{ + transition:background-color 2s; + -webkit-transition:background-color2s; + -o-transition:background-color 2s; + -moz-transition:background-color 2s; +} + +.no_transition { + transition:background-color 0s; + -webkit-transition:background-color 0s; + -o-transition:background-color 0s; + -moz-transition:background-color 0s; +} + + + +.grid_td_tp1_in { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportInAni.gif); */ + background: url(../images/TeleportInW.png); + background-color: #3377AA; +} +.grid_td_tp1_out { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportInAni.gif); */ + background: url(../images/TeleportOutW.png); + background-color: #3377AA; +} +.grid_td_tp2_in { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportInAni.gif); */ + background: url(../images/TeleportIn.png); + background-color: #44EE66; +} +.grid_td_tp2_out { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportOutAni.gif); */ + background: url(../images/TeleportOut.png); + background-color: #44EE66; +} +.grid_td_tp3_in { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportInAni.gif); */ + background: url(../images/TeleportInW.png); + background-color: #992200; +} +.grid_td_tp3_out { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportOutAni.gif); */ + background: url(../images/TeleportOutW.png); + background-color: #992200; +} +.grid_td_tp4_in { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportInAni.gif); */ + background: url(../images/TeleportIn.png); + background-color: #55CCFF; +} +.grid_td_tp4_out { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportOutAni.gif); */ + background: url(../images/TeleportOut.png); + background-color: #55CCFF; +} +.grid_td_tp5_in { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportInAni.gif); */ + background: url(../images/TeleportInW.png); + background-color: #005533; +} +.grid_td_tp5_out { + /* background: url(../images/OverlayTeleport.png),url(../images/TeleportOutAni.gif); */ + background: url(../images/TeleportOutW.png); + background-color: #005533; +} + + + + +.grid_td_cpa { + background: url(../images/OverlayA50.png); + /* For non-fancy letters...*/ + /* background: url(../images/OverlayA50ss.png); */ + background-color: #F777FF; + color: #fff; +} +.grid_td_cpb { + background: url(../images/OverlayB50.png); + /* background: url(../images/OverlayB50ss.png); */ + background-color: #FFFF11; + color: #000; +} +.grid_td_cpc { + background: url(../images/OverlayC50.png); + /* background: url(../images/OverlayC50ss.png); */ + background-color: #FF4466; + color: #fff; +} +.grid_td_cpd{ + background: url(../images/OverlayD50.png); + /* background: url(../images/OverlayC50ss.png); */ + background-color: #ff9911; + color: #fff; +} +.grid_td_cpe { + background: url(../images/OverlayE50.png); + /* background: url(../images/OverlayC50ss.png); */ + background-color: #00FFFF; + color: #fff; +} +.grid_td_animate { + /* background: url(../images/OverlayStart50i.png); */ + background: url(../images/OverlayTile50.png); + background-color: #000055; + color: #0000ff; + transition:background-color 2s ease-out; + -webkit-transition:background-color 2s ease-out; + -o-transition:background-color 2s ease-out; + -moz-transition:background-color 2s ease-out; + +} +.grid_td_animate_pre { + /* background: url(../images/OverlayTile50.png); */ + background: url(../images/Path1.png); + background-color: #77ccff; + color: #00ccff; + transition:background-color 0s; + -webkit-transition:background-color 0s; + -o-transition:background-color 0s; + -moz-transition:background-color 0s; +} +.grid_td_path1 , .grid_td_path2, .grid_td_path3, .grid_td_path4 { + transition:background-color .5s ease-out; + -webkit-transition:background-color .5s ease-out; + -o-transition:background-color .5s ease-out; + -moz-transition:background-color .5s ease-out; +} +.grid_td_path1 { + background: url(../images/Path1.png); +} +.grid_td_path2 { + background: url(../images/Path2.png); +} +.grid_td_path3 { + background: url(../images/Path3.png); +} +.grid_td_path4 { + background: url(../images/Path4.png); +} + + +.mapdisplay, .mapdisplay_up +{ + position:absolute; + width:auto; + height:auto; + box-shadow: 10px 10px 5px #000055; /* Opera */ + -webkit-box-shadow: 10px 10px 5px #000055; /* Safari and Chrome */ + + -webkit-transform: + skew(10deg,10deg) + scale(.3, .3) + translate(-390px, -230px) + rotate(1deg) + rotateX(0deg) + ; + -moz-transform: + skew(10deg,10deg) + scale(.3, .3) + translate(-390px, -230px) + rotate(1deg) + rotateX(0deg) + ; + /* Remember, we need to duplicate all of this with prefix -o- and w/o prefix for opera, ff, netscape. */ + -webkit-transition:-webkit-transform 2s; + -webkit-transition-delay: 0s; + -moz-transition:-webkit-transform 2s; + -moz-transition-delay: 0s; + z-index:1; +} +.mapdisplay_up +{ + + -webkit-transform: + skew(0deg,0deg) + scale(1, 1) + translate(0px, 0px) + rotate(0deg) + rotateX(0deg) + ; + -moz-transform: + skew(0deg,0deg) + scale(1, 1) + translate(0px, 0px) + rotate(0deg) + rotateX(0deg) + ; + -webkit-transition:-webkit-transform 1s; + -moz-transition:-webkit-transform 1s; + z-index:2; +} +.mapdisplay_up:hover { + background:#10e; +} +.mapdisplay:hover { + z-index:3; + background:#10e; +} + +.mapgallery +{ + position:relative; + float: left; + width:auto; + height:700px; + background: #110088; + color: #FFF; +} +.mapgallery a +{ + color: #FFFF33; +} + + +.mapcontainer +{ + border:1px solid #000; + position:relative; + float: left; + width:300px; + height:200px; + background: #220099; +} +.clear { clear: both;} -- cgit v1.2.3