/* CSS for rounded corners in the GameBug simulator */ /************************* adjustments for Windows are at the end *************************/ /************************* browser hacks *************************/ button::-moz-focus-inner { padding:0; border: none; } /* remove ugly dotted rect around the clicked button's text */ a::-moz-focus-inner { padding:0; border: none; } /* remove ugly dotted rect around the clicked button's text */ /************************* everything else is for all platforms and browsers *************************/ /************************** for the entire document ******************************/ * { /* border-box sizing for everything */ -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:border-box; } body { font-family:helvetica, arial, tahoma, sans-serif; font-size:12px; color:#222; background:#fff; margin:0px; border:0px; padding:0px; max-height:506px; overflow: hidden; cursor:default; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; /* use unselectable in js for ie9 DOESN'T WORK */ user-select:none; /* try this for ie9. It doesn't work.*/ } form { margin: 0; } input[type="text"] { -moz-user-select:text; /* not needed for webkit, which always allows selection of text inputs */ user-select:text; /* try this for ie9. It doesn't work.*/ } input { font-family:helvetica, arial, tahoma, sans-serif; font-size:12px; /* doesn't inherit from so have to specify again here */ margin:0; } input[type="radio"], input[type="checkbox"] { margin-right:3px; padding:0px; } /* no space char after these controls */ /************************* size and location of control/display groups */ #headarea { /* game title and buttons to show/hide or open in a window */ position:relative; /*top:0px; left:0px;*/ height:31px; width:730px; -moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px; border-radius:6px; border:1px solid #666; background:#666; /* could use 654 for brown, 567 for blue, 354 for green */ color:#fff; padding:4px 4px 2px 6px; } #plotarea { /* plot, plot report, generations/tick, and show area/curve */ position:relative; /*top:0px; left:0px;*/ height:276px; width:593px; } #proportion0 { /* initial proportions (role 1 or symmetric) */ position:relative;/* top:0px; left:0px;*/ height:66px; } #proportion1 { /* initial proportions (role 2) */ position:relative; /*top:0px; left:0px;*/ margin-left:-3px; height:66px; } #matrixarea { /* payoff matrix */ position:relative; /*top:0px; left:0px;*/ height:138px; width:593px; } /* variable and condition areas are absolute with different versions for presence/absence of head area */ #variablearea { /* variable values; down when head area is shown, up when not shown */ position:absolute; left:592px; height:341px; width:138px; } #variablearea.down { top:31px; } #variablearea.up { top:0; } #conditionsarea { /* set conditions; configure button; down when head area is shown, up when not shown */ position:absolute; left:592px; height:138px; width:138px; } #conditionsarea.down { top:371px; } #conditionsarea.up { top:340px; } .boxed { /* inset borders and padding for each of the above sections */ padding:4px; -moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px; border-radius:6px; border:1px solid #999; margin:0px -1px -1px 0px; } .sectionlabel { /* labels for each of the above sections */ display:block; position:relative; /*top:0px; left:0px;*/ font-size:13px; } /************************* head area with game title and buttons to show/hide or open in a window */ #gameTitle { /*span with title of the game */ display:inline-block; width:450px; line-height:22px; } .buttonToggle { margin-right:2px; } .buttonOpen { margin-left:3px; } .buttonToggle.min:before { content:"Show Game"; } .buttonToggle.max:before { content:"Hide Game"; } .buttonOpen:before { content:"Open in a Window"; } /************************* plot area with plot, plot report, generations/tick, and show area/curve */ #plotCanvas, .plotwarning { /* size of the plot canvas */ width:582px; height:242px; } #plottypearea { /* format the plot-type controls (gen, area, curve) */ /*display:inline-block; position:static;*/ float:left; width:252px; } #plotReport { /* format the plot report; innerHTML changes to show the report */ /*display:inline-block; position:static;*/ float:right; width:330px; margin-top:3px; text-align:right; } /************************* initial proportion area(s) with plot, plot report, generations/tick, and show area/curve */ .propfull { /* proportionarea0 style to fill the space (symmetric game) */ width:593px; } .prophalf { /* proportionarea0 and 1 style to share the space (asymmetric game) */ display:inline-block; width:297px; } .propnone { /* proportionarea1 style to disappear (symmetric game) */ display:none; } table.prop { /* table that positions the proportions */ text-align:center; } /* span styles to show proportion and matrix values over their input boxes */ .showpval, .showmval { font-size:9px; text-align:left; color:#666; display:block; position:relative; top:-10px; } .showpval { width:24px; left:14px; } .showmval { width:36px; left:2px; } /************************* payoff matrix area with option to combine asymmetric matrices */ table.matrix { /* table style for payoff entry */ width:100%; border:0; border-collapse:collapse; border-spacing:0px; /************** try this */ } table.matrix.combo td { border:1px solid gray; padding:2px; } /* FF centers vertically, WK doesn't */ table.matrix.combo td { padding-bottom:0px; height:31px; } /* this is required for WK browsers */ table.matrix td { text-align:center; } table.matrix.combo td {height:28px; padding-top:1px; } /* or it hits the bottom margin */ .matrix th:first-child { /* left-hand strategy labels are aligned right and at same baseline as input boxes */ text-align:right; padding-right:3px; line-height:0em; } input.payoff { text-align:center; height:21px; margin:0px; } .fixedht { /* set height of a payoff span so it doesn't expand when values are displayed */ display:inline-block; height:21px; } td { padding:0px; height:24px; } th { font-weight:400; padding:0px; height:21px; } /* make the checkbox for combine smaller, give it display options for showing and hiding */ input[type="checkbox"].combocheck { height:10px; width:10px; vertical-align:1px; margin-right:3px; } .combocheck { display:inline-block; } .combocheck.hidden { display:none; } /* input width for payoff matrices, based on role and strategy counts */ /* starting with 1 is symmetric, 2 for asymmetric; second digit is the role count */ /* c is for combined asymmetric payoffs */ .m12 { width:191px; } .m13 { width:143px; } .m14 { width:113px; } .m22 { width:95px; } .m22c { width:110px; } .m23 { width:69px; } .m23c { width:74px; } /* column width for the matrix based on strategy count; h is for first (header) column; c is for combined asymmetric matrices */ .m2, .m2h { width:33%; } .m3, .m3h { width:25%; } .m4, .m4h { width:20%; } .m2c { width:40%; } .m2ch { width:20%; } .m3c { width:27%; } .m3ch { width:19%; } .m4c { width:22%; } .m4ch { width:12%; } /************************* variable-setting area */ p.vardef { /* variable definition */ text-align:center; margin-top:11px; margin-bottom:2px; } p.varset { /* variable setting */ text-align:right; margin-bottom:4px; margin-top:0px; display:block; width:116px; } /************************* Conditions area with relatedness, baseline, and configure button */ p.cond { /* placement of items in the conditions section */ text-align:right; margin-top:10px; margin-bottom:0px; display:block; width:128px; } .buttonConfig { /* Configure button */ display:block; color:#333; text-decoration:none; text-align:center; text-shadow:#fff 1px 1px 0px; height:32px; width:128px; padding-top:7px; padding-bottom:7px; padding-left:3px; padding-right:3px; border:1px solid #999; line-height:14px; font-family:inherit; font-size:inherit; -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px; background:#eee; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc)); background:-moz-linear-gradient(0% 90% 90deg, #ccc, #fff); border-radius:5px; background:linear-gradient(0% 90%, #eee, #ddd); margin-top:18px; } .buttonConfig:hover { color:#000; border:1px solid #777; } .buttonConfig:active {/* animate a 1-pixel right movement by changing padding, flip the gradient */ padding-left:4px; padding-right:2px; background:#ddd; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#eee)); background:-moz-linear-gradient(0% 90% 90deg, #eee, #ddd); background:linear-gradient(0% 90%, #eee, #ddd); } .buttonConfig:before { content:"Configure Game"; } /************************* Strategy colors, used in proportions and payoff headings */ .c00, .c01, .c02, .c03, .c04, .c05, .c10, .c11, .c12 { height:15px; padding:0px; } /* color styles that correspond to the role/strategy colors set in gbg.js */ .c00 {color:red} .c01 {color:blue} .c02 {color:green} .c03 {color:purple} .c04 {color:orange} .c05 {color:#733a00} /* w3c css validator doesn't recognize brown, although it worked */ .c10 {color:orange} .c11 {color:aqua} .c12 {color:lime} .badval { /* bad value in a matrix or variable */ border-left:2px inset #f99; border-top:2px inset #f99; border-right:2px inset #f99; border-bottom:2px inset #f99; /*background:#fcc;*/ } /************************* Pseudo-dialog box to configure the game *****************************/ /************************* Dialog and blocker to hide the game */ #configure { /* the configure pseudo-dialog */ position:absolute; top:8px; left:114px; width:500px; /* height is auto and changes with the content */ padding-bottom:4px; background:#eee; border:1px solid #666; /*border:none; /* cleaner antialias than above, but I like the dark left border better */ -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5); -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5); -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; box-shadow:3px 3px 4px rgba(0,0,0,0.5); border-radius:6px; } #configure.hide { display:none; } #configure.show { display:block; } #blocker { /* rectangle to hide game when configuring */ position:absolute; top:0px; left:0px; height:100%; width:100%; background-color:#fff; opacity:.75; } #blocker.hide { display:none; } #blocker.show { display:block; } /************************* Title bar that can be dragged */ #configtitle { /* title bar that can be dragged */ -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; border-top-left-radius:6px; border-top-right-radius:6px; border:1px solid #666; background:#666; padding:3px 4px 3px 6px; color:#fff; } /************************* Sections of the dialog */ .cboxed { /* mark sections of the dialog */ padding:4px; position:relative; border-top:2px groove #fff; } /* sections of the dialog */ #configtype { height:30px; } #configRoleNames { height:46px; } .configStrategies1 { height:46px; } .configStrategies2 { height:68px; } #configVariables { height:70px; } #configButtons { height:69px; } #gtitle { /* set the name of the game */ display:inline-block; float:right; } /************************* Widths of input boxes */ input.gametitle { width:200px; } input.configrole { width:198px; } input.configstrategy { width:120px; } select.configvarname { width:45px; } input.configvardef { width:110px; } p.config { margin-top:2px; margin-bottom:0; } /************************* Buttons at the bottom */ .button21.buttonOK, .button21.buttonCancel { border:1px solid #999; height:23px; /* because of the border */ position:relative; } .buttonCancel:before { content:"Cancel"; } .buttonOK:before { content:"Save Changes"; } .buttonOK:hover, .buttonCancel:hover { color:#000; border:1px solid #777; } .buttonOK { float:right; margin-right:80px; } .buttonCancel { float:left; margin-left:80px; } /* reverse their positions on Windows NO GOOD because Cancel comes before OK in the html*/ /*.buttonOK.win { float:left; margin-left:80px; } .buttonCancel.win { float:right; margin-right:80px; }*/ /* if I really want to switch the cancel and OK buttons in Windows, I should call them buttonLeft and buttonRight and then set their :before text differently in Win in the CSS and set their actions differently in js */ /************************* generic button styles *****************************/ .button21 { position:static; display:inline-block; color:#333; text-decoration:none; text-shadow:#fff 1px 1px 0px; width:128px; height:21px; line-height:14px; padding:4px 3px 3px 3px; border:none; font-family:inherit; font-size:inherit; text-align:center; /* rounded corners and a gradient */ -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; background:#eee; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc)); background:-moz-linear-gradient(0% 90% 90deg, #ccc, #fff); /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#cccccc); /* works but removes the rounded borders */ border-radius:4px; background:linear-gradient(top,#fff,#ccc); /* try this for ie9. It doesn't work.*/ } .button21:hover { /* darken the text and border slightly */ color:#000; /*border:1px solid #666;*/ } .button21:active { /* animate a 1-pixel right movement by changing padding, flip the gradient */ padding-left:4px; padding-right:2px; background:#ddd; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#eee)); background:-moz-linear-gradient(0% 90% 90deg, #eee, #ddd); background:linear-gradient(top,#ddd,#eee); /* try this for ie9. It doesn't work.*/ } /************************* adjustments for Windows *************************/ input[type="radio"].win, input[type="checkbox"].win { vertical-align:-1px; } /* -2 in XP, only needs -1px in Windows 7 */ /* querySelectorAll("button") should capture all of these */ .showpval.win, .showmval.win { top:-11px; } /*.button21.win { padding-top:3px; padding-bottom:4px; }*/ /* Firefox and Webkit Win need this, ie9 doesn't */ .button21.win:active { padding-left:3px; padding-right:3px; } /* because IE9 does its own animation */ .buttonConfig.win:active { padding-left:3px; padding-right:3px; } /* because IE9 does its own animation */ input[type="checkbox"].combocheck.win { vertical-align:-2px; } /* reduced checkbox size isn't obeyed in XP or 7 */