.headContainer { position: relative; width: 1024px; margin: 0 auto; } .headSide { display: inline-block; position: relative; float: left; } .heading { position: relative; margin-top: 1em; margin-bottom: 1em; width: 900px; float: left; padding: 0.6em; text-align: center; white-space: nowrap; font-size: 2em; color: black; background: #E0E0F0; -moz-box-shadow: 0 0 1em #C0C0C0; -webkit-box-shadow: 0 0 1em #C0C0C0; box-shadow: 0 0 1em #C0C0C0; background: -moz-linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF); background: -ms-linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF); background: -o-linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF); background: -webkit-linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF); background: linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF); -pie-background: linear-gradient(left, #FF8080, #FFFF80, #80FF80, #8080FF, #FF80FF); background: -webkit-gradient(linear, left top, right top, from(#FF8080), to(#FF80FF)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8080', endColorstr='#FF80FF'); } .tabs { display: inline-block; margin: 0; padding: 1em 1em 0; overflow: hidden; margin-bottom: -1px; } .tabs li, .classMenu li { z-index: 1; position: relative; padding: 0.5em 0.5em; display: table-cell; list-style: none; background: #E0E0F0; color: #000000; border: 1px solid #C0C0C0; -moz-box-shadow: 0 0 1em #C0C0C0; -webkit-box-shadow: 0 0 1em #C0C0C0; box-shadow: 0 0 1em #C0C0C0; } .tabs li { -moz-border-radius: 0.5em 0.5em 0 0; -webkit-border-radius: 0.5em 0.5em 0 0; border-radius: 0.5em 0.5em 0 0; border-bottom: 0; } .tabs a { white-space: nowrap; text-decoration: none; } .tabs li:hover, .classMenu li:hover { background: -moz-linear-gradient(#FFFFFF, #E0E0F0 100%); background: -ms-linear-gradient(#FFFFFF, #E0E0F0 100%); background: -o-linear-gradient(#FFFFFF, #E0E0F0 100%); background: -webkit-linear-gradient(#FFFFFF, #E0E0F0 100%); background: linear-gradient(#FFFFFF, #E0E0F0 100%); -pie-background: linear-gradient(#FFFFFF, #E0E0F0 100%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#E0E0F0)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E0E0F0'); } .tabs li.selected { z-index: 3; background: #FFFFFF; } .classMenu li:active { -moz-box-shadow: 0 1px 2px #C0C0C0 inset; -webkit-box-shadow: 0 1px 2px #C0C0C0 inset; box-shadow: 0 1px 2px #C0C0C0 inset; } .heading, .mcuListHeader, .mcuList, .classMenu li, .mcuLink, .featList, .featTableName, .featName, .configList, .confTableName, .configWord, .confOptName, .ramMap, .ramTableName, .ramBank, .sfrMap, .sfrTableName, .sfrBank, .sfrName, .sfrNameX, .srcInfo { -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; } .mcuList, .featList, .configList, .ramMap, .sfrMap { z-index: 2; position: relative; width: auto; padding: 1em 1em; background: #FFFFFF; border: 1px solid #C0C0C0; -moz-box-shadow: 0 0 1em #C0C0C0; -webkit-box-shadow: 0 0 1em #C0C0C0; box-shadow: 0 0 1em #C0C0C0; } .mcuList { display: inline-block; min-width: 95%; } .mcuTable { display: inline; table-layout: fixed; } /*----------------------------------------------*/ .classMenu { white-space: nowrap; height: 2em; margin-bottom: 1.5em; } .classMenu li { -moz-box-shadow: 0 0 1em #C0C0C0; -webkit-box-shadow: 0 0 1em #C0C0C0; box-shadow: 0 0 1em #C0C0C0; } .classMenu a { text-decoration: none; } /*----------------------------------------------*/ .mcuListHeader, .featTableName, .confTableName, .ramTableName, .sfrTableName { background: #CAB2DE; border-color: #CAB2DE; border-style: outset; } .mcuAttrP12, .mcuAttrP14, .mcuAttrP16, .mcuAttrP12E, .mcuAttrP14E, .mcuAttrP16E { padding: 0.2em 0.625em; text-align: center; font: bold 1em Georgia; } .mcuAttrP12 { background: #FFB4B4; } .mcuAttrP14 { background: #B4B4FF; } .mcuAttrP16 { background: #B4FFB4; } .mcuAttrP12E { background: #FFB4FF; } .mcuAttrP14E { background: #B4FFFF; } .mcuAttrP16E { background: #FFFFB4; } .mcuListHeader, .configWord, .featValue, .confSwName, .confSwValue, .confSwExpl, .ramBank, .sfrBank, .sfrAddr, .sfrSep { padding: 0.2em 0.625em; } .mcuListHeader { text-align: left; white-space: nowrap; font-size: 1.2em; border-width: 4px; } .mcuLink { width: 12em; padding: 0.2em; text-align: left; background: #D7DEB2; border: 2px outset #D7DEB2; } .mcuLink:active { border: 2px inset; -moz-box-shadow: 0 0 10px 6px #B7BD97 inset; -webkit-box-shadow: 0 0 10px 6px #B7BD97 inset; box-shadow: 0 0 10px 6px #B7BD97 inset; } .mcuLink a { display: block; padding: 0 0.5em 0 0.5em; text-decoration: none; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; -moz-box-shadow: 0 0 10px 6px #F0FFA1 inset; -webkit-box-shadow: 0 0 10px 6px #F0FFA1 inset; box-shadow: 0 0 10px 6px #F0FFA1 inset; } .mcuLink a:hover { background: #49DDFF; } .featValue, .confSwName, .confSwValue, .confSwExpl, .sfrAddr { background: #BAE7B8; } /*----------------------------------------------*/ .featTableName, .confTableName, .configWord, .ramBank, .ramTableName, .sfrBank, .sfrTableName { text-align: center; border-width: 4px; } .featTableName, .confTableName, .ramTableName, .sfrTableName { font:bold 1.5em Georgia; line-height: 1.75em; } .mcuGap, .featGap, .confGap, .ramGap, .sfrGap { height: 1em; background: transparent; } .configWord, .ramBank, .sfrBank { font-size: 1.3em; background: #D7DEB2; border-color: #D7DEB2; border-style: ridge; } .featName, .featValue, .confOptName, .confSwName, .confSwValue, .confSwExpl, .sfrName, .sfrNameX, .sfrAddr { text-align: left; } .vMargin { width: auto; background: transparent; } .featName, .confOptName, .sfrName, .sfrNameX, .sfrSep { padding: 0.5em 0.75em; } .featName, .confOptName, .sfrName, .sfrNameX { border-style: solid; border-width: 0; } .featName, .confOptName, .sfrName, .sfrNameEx { background: #A5BDE4; } .ramColumn, .sfrColumn { width: 130px; padding: 5px; background: #DEFFFE; border: 1px solid #C0C0C0; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; -moz-box-shadow: 0 0 0.2em #C0C0C0; -webkit-box-shadow: 0 0 0.2em #C0C0C0; box-shadow: 0 0 0.2em #C0C0C0; } .ramColCont { position: relative; } .ramColCont a { display: block; background: #F0FFA1; text-decoration: none; -moz-border-radius: 0.75em 0.75em 0.75em 1.5em; -webkit-border-radius: 0.75em 0.75em 0.75em 1.5em; border-radius: 0.75em 0.75em 0.75em 1.5em; -moz-box-shadow: 0 0 10px 6px #F0FFA1 inset; -webkit-box-shadow: 0 0 10px 6px #F0FFA1 inset; box-shadow: 0 0 10px 6px #F0FFA1 inset; } .ramColCont a:link { color: #874EAD; } .ramColCont a:hover { background: #49DDFF; } /* This a tooltip. */ .ramTt { display: none; font-size: 0.7em; text-align: center; position: relative; left: 20px; background: #F0FFA1; padding: 0.2em 0.8em; -moz-border-radius: 0 1em 1em 2em; -webkit-border-radius: 0 1em 1em 2em; border-radius: 0 1em 1em 2em; -moz-box-shadow: 0 0 1.5em #C0C0C0; -webkit-box-shadow: 0 0 1.5em #C0C0C0; box-shadow: 0 0 1.5em #C0C0C0; } .ramGPR:hover .ramTt, .ramSFR:hover .ramTt, .ramSHA:hover .ramTt, .ramBAD:hover .ramTt { z-index: 100; display: block; } /* This accessories of the tooltip. This is a beak which point towards the left side. */ .ramGPR:hover .ramTt:before, .ramSFR:hover .ramTt:before, .ramSHA:hover .ramTt:before, .ramBAD:hover .ramTt:before { display: block; position: absolute; content: ""; width: 0; height: 0; top: 0; left: -15px; border-right: 15px solid #F0FFA1; border-bottom: 5px solid transparent; } .ramAcc { z-index: 5; position: absolute; width: 1px; height: 0; background: transparent; box-shadow: 2px 0 #303030, 2px 0 #303030, 7px 0 #303030, 12px 0 #303030, 17px 0 #303030, 22px 0 #303030, 27px 0 #303030, 32px 0 #303030, 37px 0 #303030, 42px 0 #303030, 47px 0 #303030, 52px 0 #303030, 57px 0 #303030, 62px 0 #303030, 67px 0 #303030, 72px 0 #303030, 77px 0 #303030, 82px 0 #303030, 87px 0 #303030, 92px 0 #303030, 97px 0 #303030, 102px 0 #303030, 107px 0 #303030, 112px 0 #303030, 117px 0 #303030, 122px 0 #303030, 127px 0 #303030; } .ramGPR, .ramGPREx { background: #76CB76; } .ramSFR, .ramSFREx { background: #F48282; } .ramSHA, .ramSHAEx { background: #76CBFF; } .ramBAD, .ramBADEx { background: #C0C0C0; } .ramGPR, .ramSFR, .ramSHA, .ramBAD { position: relative; width: 130px; } .ramSFR .ramTt:active { background: #94A9FF; } .ramMap, .sfrMap { min-width: 55%; } .ramSum { padding: 0.4em 0; font-size: 0.75em; text-align: center; } .sfrColumn { vertical-align: top; } .sfrName, .sfrNameX, .sfrAddr, .sfrSep { font-size: 0.75em; } .sfrNameX, .sfrNameXEx { background: #ECA4FC; } .sfrNameX span { display: none; position: absolute; text-align: left; background: #F0FFA1; padding: 0.2em 0.4em; -moz-border-radius: 0 0.75em 0.75em 0.75em; -webkit-border-radius: 0 0.75em 0.75em 0.75em; border-radius: 0 0.75em 0.75em 0.75em; -moz-box-shadow: 0 0 1.5em #C0C0C0; -webkit-box-shadow: 0 0 1.5em #C0C0C0; box-shadow: 0 0 1.5em #C0C0C0; } .sfrNameX:hover span { z-index: 100; /* This will surely be enough. */ display: block; cursor: text; } .ramSFREx, .ramGPREx, .ramSHAEx, .ramBADEx, .sfrNameEx, .sfrNameXEx, .menuEx { padding: 0; width: 50px; margin-left: 20px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 0 0.5em #C0C0C0; -webkit-box-shadow: 0 0 0.5em #C0C0C0; box-shadow: 0 0 0.5em #C0C0C0; } .sfrAccess { background: #C87548; color: #FDFFC7; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .legendContainer { position: relative; width: 1024px; margin: 0 auto; } .legend { display: inline-block; position: relative; vertical-align: top; width: 22em; } .ramAccEx { position: absolute; width: 1px; height: 1.15em; /* .explanation->(font-size + padding-top + padding-bottom) */ background: transparent; box-shadow: 2px 0 #303030, 2px 0 #303030, 7px 0 #303030, 12px 0 #303030, 17px 0 #303030, 22px 0 #303030, 27px 0 #303030, 32px 0 #303030, 37px 0 #303030, 42px 0 #303030, 47px 0 #303030; } .explanation, .ramSumEx { font-size: 0.75em; background: #BAA78F; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; } .explanation { position: relative; padding: 0.2em 0.4em; top: -1px; left: 55px; white-space: nowrap; } .ramSumEx { padding: 0.3em 0.4em; } .srcInfo { width: 92%; font-size: 0.8em; padding: 0.3em 0.5em; background: #BA8F94; }