StyleGuide.css

body {
    background-color: #fff;
    margin:0;
}
body,
.text,
pre {
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    color: #343434;
    font-size: 14px;
    line-height: 1.428;
}

::-webkit-input-placeholder { /* WebKit browsers */
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

body ::selection,
body ::-moz-selection {
    background-color: #00A1DA;
    color: #fff;
}

.text  {
    font-weight: normal;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
del {
    text-decoration: line-through;
}
textarea
{
    resize:none;
}
h1, h2, h3, h4, h5, h6
{
	display: inline-block;
	*display: inline;
    margin: 0;
    padding: 0;
    zoom: 1;
}
h1,
h1 a,
h1 a:visited,
h1 a:active,
h1 a:link 
{
    font-size: 32px;
    font-weight: bold;
    margin: 12px;
    color: #343434;
    letter-spacing: -1px;
}
h1 a,
h1 a:visited,
h1 a:active,
h1 a:link 
{
    margin: 0px;
}
h1 a:hover {
    text-decoration: none;
}
h2,
h2 a:link,
h2 a:visited,
h2 a:active,
h2 .text {
    font-size: 30px;
    font-weight: normal;
    color: #343434;
    letter-spacing: -1px;
    text-decoration: none;
}
h2.title {
    margin-top: 20px;
    margin-bottom: 20px;
}
h2.light {
    font-size: 16px;
    font-weight: normal;
    color: #000;
}
h3,
h3 a {
    font-size: 15px;
    font-weight: bold;
    color: #343434;
}
.divider-top {
    border-top: 1px solid #ccc;
}
.divider-bottom {
    border-bottom: 1px solid #ccc;
}
.divider-left {
    border-left: 1px solid #ccc;
}
.divider-right {
    border-right: 1px solid #ccc;
}
.blank-box {
    border: 1px solid #ccc;
}
.dark-box {
    border: 1px solid #bcbcbc;
    background: #e1e1e1;
    padding: 5px;
}
.sub-divider-bottom {
    border-bottom: 1px solid #ededed;
}
a.text-link {
    font-weight: normal;
    text-decoration: none;
    color: #0055B3;
}
a.text-link:hover 
{
    text-decoration: underline;
}

/* TABLE STYLES*/
.table td,.table th {
    padding:5px;
    border-top:1px solid #ccc;
    margin:0;
    text-align: left;
}
table.table {
    border-top:1px solid #9e9e9e;
}
.table-header th {
    border-left: 1px solid #ccc;
    font-weight: 600;
    background-color:#f1f1f1;
    border-top: none;
}
.table-header .first {
    border-left: 1px solid #f1f1f1;
}
/* END TABLE STYLES */

.tip-text {
    padding-top: 2px;
    color: #666;
    display: block;
    font-size: 11px;
}
.tool-tip {
    border:1px solid #ccc;
    font-weight:normal;
    font-size: 12px;
    margin-left:20px;
    position:relative;
    width:120px;
    padding:5px;
}
.tool-tip span {
    color:#a00
}
.tool-tip .right {
    position:absolute;
    left:-10px;
    top:50%;
    margin-top:-5px;
}
.tool-tip .bottom {
    position:absolute;
    top:-10px;
    left:5px;
}
.validator-checkmark {
    width: 15px;
    height: 13px;
    background: url(/web/20140516222354im_/http://www.roblox.com/images/UI/img-check.png) no-repeat;
    margin-left: 5px;
    display: none;
}
.text-box {
    border:1px solid #a7a7a7;
    padding:0px 3px;
    font-weight:normal
}
.text-box.text-box-small {
    height:18px;
    font-size:11px;
    line-height:18px;   
    border: 1px solid #a7a7a7;
}
.text-box.text-box-medium {
    height:21px;
    font-size: 12px;
    line-height:19px;    
}
.text-box.text-box-large {
    height:25px;
    line-height:24px;
    font-size: 13px;    
}
.text-box.text-area-medium {
    line-height: 19px;
}

/*Button Styles */
.btn-control, .btn-control:active, .btn-control:link, .btn-control:visited, .btn-control:hover {
	border:1px solid #777;
    padding:0px 6px;
	color:#000; 
	text-decoration: none;
	background-color: #ccc;
	text-align:center;
	font-weight:normal;
    cursor: pointer;
    background-position: top;
    display:inline-block;
    *zoom: 1;
    *display: inline;
}
.btn-control:hover {
    background-position: bottom;
    border-color:#888;
    text-decoration: none; 
}
.btn-control.disabled {
	border:1px solid #ccc;
    cursor: default;  
    color: #a7a7a7;
    background-position: center; 
}
.btn-control.btn-control-small {
    height:18px;
    line-height:18px;
    font-size: 11px;
    background-image: url(/web/20140516222354im_/http://www.roblox.com/images/StyleGuide/btn-control-small-tile.png);           
}
.btn-control.btn-control-medium {
	height:21px;
    line-height:21px;
    font-size: 12px;
    background-image: url(/web/20140516222354im_/http://www.roblox.com/images/StyleGuide/btn-control-medium-tile.png);        
}
.btn-control.btn-control-large {
	height:25px;
    line-height:24px;
    font-size: 13px;
    padding:0px 7px;
    background-image: url(/web/20140516222354im_/http://www.roblox.com/images/StyleGuide/btn-control-large-tile.png);   
}
a.btn-control.top-level {
    font-weight: bold;
}
.btn-large,
.btn-medium,
.btn-small {
	margin:0px;
	display:inline-block;
   	zoom:1;
	text-align:center;
	font-weight:normal;
	text-decoration:none;
	border-width:1px;
	border-style:solid;
    cursor: pointer;	
	*display:inline;
    *vertical-align: top;	
}
.PurchaseModal .btn-large,
.PurchaseModal .btn-medium,
.PurchaseModal .btn-small {
    *margin-right: 5px;
    *vertical-align: top;
} 
.btn-large {
	padding:9px 13px 0px 13px;
	height:39px;
	min-width:70px;
	font-size:23px;
	line-height:27px;
	background-position:left 0px;
}
input.btn-large {
    padding: 9px 13px;
    height: 50px;
}
.btn-large:hover,
.btn-medium:hover,
.btn-small:hover{
    text-decoration: none;
}
.btn-large:hover {
	background-position:left -48px;
}
.btn-medium {
	padding:1px 13px 3px 13px;
	height:28px;
	min-width:62px;
	font-size:20px;
	background-position:left -96px;
}
.btn-medium:hover {
	background-position:left -128px;
}
.btn-small {
	padding:1px 7px 0px 7px;
	height:20px;
	min-width:40px;
	font-size:14px;
	line-height:18px;	
	background-position:left -160px
}
.btn-small:hover {
	background-position:left -181px
}
.btn-primary,
.btn-primary:link,
.btn-primary:active,
.btn-primary:visited  {
	border-color:#007001;
	background-color:#007001;
	background-image:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-green.png);
	color: white;
}
.btn-neutral,
.btn-neutral:link,
.btn-neutral:active,
.btn-neutral:visited {
	border-color:#0852b7;
	background-color:#0852b7;
	background-image:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-blue.png);
	color: white;
}
.btn-negative,
.btn-negative:link,
.btn-negative:active,
.btn-negative:visited   {
	border-color:#565656;
	background-color:#565656;
	background-image:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-gray.png);
	color: white;
}
.btn-disabled-primary,
.btn-disabled-primary:hover,
.btn-disabled-neutral,
.btn-disabled-neutral:hover,
.btn-disabled-negative,
.btn-disabled-negative:hover {
	cursor:default;
	background-position:left -202px;
}
.btn-disabled-primary,
.btn-disabled-primary:link,
.btn-disabled-primary:active,
.btn-disabled-primary:visited {
    background-color: #99c699;
	background-image:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-green.png);
	border-color:#99c699;
	color: white;
}
.btn-disabled-neutral,
.btn-disabled-neutral:link,
.btn-disabled-neutral:active,
.btn-disabled-neutral:visited 
{
    background-color: #9cbae2;
	background-image:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-blue.png);
	border-color:#9cbae2;
	color: white;
}
.btn-none {
    display: none;
}
.btn-disabled-negative,
.btn-disabled-negative:link,
.btn-disabled-negative:active,
.btn-disabled-negative:visited {
    background-color: #bbbcbb;
	background-image:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-gray.png);
	border-color:#bbbcbb;
	color: white;
}
/* this class should be removed once btn-text has been eliminated from the website */
/* this creates the drop shadow */
.btn-text {
	display:none;
	margin:0px;
	position:relative;
	color:#fff;
}
.btn-text:hover {
	text-decoration: none;
}
.btn-large .btn-text {
	bottom:26px;
}
.btn-medium .btn-text {
	bottom:22px;
}
.btn-small .btn-text {
	bottom:17px;
}
.btn-large-green-play,
.btn-play,
.btn-play:active,
.btn-play:visited,
.btn-play:link {
	padding-left:60px;
	border-color:#007001;
	background:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-lg-green-play.png) no-repeat left top;
	color: white;
    min-width: 26px;
}
.blue-arrow 
{
    background:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-blue-arrow-md.png) right top;
	border-color:#0852b7;
	color: white;
	padding-right:36px;
	min-width:41px;
}
.gray-arrow {
	background:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-gray-arrow-md.png) right top;
	border-color:#565656;
	color:#222;
	padding-right:36px;
	min-width:41px;
}
.gray-arrow:hover, .blue-arrow:hover {
	background-position:right -64px;
}
.disabled-blue-arrow, .disabled-blue-arrow:hover {
	background:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-blue-arrow-md.png) right -32px;
	border-color:#9cbae2;
	color:#99a7b1;
	padding-right:36px;
	cursor:default;
	min-width:41px;	
}
.disabled-gray-arrow, .disabled-gray-arrow:hover {
	background:url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/StyleGuide/bg-btn-gray-arrow-md.png) right -32px;
	border-color:#bbbcbb;
	color:#a5a5a5;
	padding-right:36px;
	cursor:default;
	min-width:41px;	
}
/* End Standard Button Styles */
/* Paging buttons */
.pager.first,
.pager.last {
    display: none;
}
.pager.previous {
    display: inline-block;
    background: url('/web/20140516222354im_/http://www.roblox.com/images/Buttons/Arrows/btn-silver-left-27.png') no-repeat top left;
    width: 27px;
    height: 27px;
}
.pager.next {
    display: inline-block;
    background: url('/web/20140516222354im_/http://www.roblox.com/images/Buttons/Arrows/btn-silver-right-27.png') no-repeat top left;
    width: 27px;
    height: 27px;
}
.page.text {
    position: relative;
    top: -8px;
    padding: 5px;
    *top:-4px;
}
.pager.previous:hover,
.pager.next:hover {
    background-position: bottom left;
    cursor: pointer;
}
.pager.disabled,
.pager.disabled:hover
{
    background-position: 0px -27px;
    cursor: default;
}

/* DropdownMenu */
.dropdown {
	position:relative;
	text-align:left;
	display:block;
	float:left;
}
.dropdown .button {
    background: url(/web/20140516222354im_/http://www.roblox.com/images/buttons/bg-drop_down_btn.png) no-repeat right top;
	font-size:13px;
	color:#000;
	text-align:center;
	display:block;
	position:relative;
	z-index:2;
	height: 21px;
    padding: 4px 17px 0 8px;
    border: 1px solid #777;
    bottom: -1px;
}
.dropdown .button:hover {
	background-position:right center;
	border-color:#888;
	text-decoration:none;
}
.dropdown .button.active {
	background-position:right bottom;
	border-bottom:none;
}
.dropdown .button.gear {
    background-image:url(/web/20140516222354im_/http://www.roblox.com/images/BuildPage/btn-gear_sprite_27px.png);
    height: 27px;
    border: none;
    bottom: 0px;
    width: 40px;
    padding: 0px;
}
.dropdown .dropdown-list {
	background-color:#efefef;
	border:1px solid #777;
	position:absolute;
	top:26px;
	z-index:1;
	font-size:12px;
    font-weight: normal;
	display:none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-left: 0px;
    white-space: nowrap;
}
.dropdown .dropdown-list li {
	display:block;
	text-decoration:none;
	color:#000;
	padding:4px 8px;
	margin:0;
	cursor:pointer;
}
.dropdown .dropdown-list li:hover {
	background-color:#0055B3;
	color:#fff;
}
.dropdown .dropdown-list li a {
    display: block;
    color: inherit;
    text-decoration: none;
}
span.robux,
div.robux {
    background: url('/web/20140516222354im_/http://www.roblox.com/images/Icons/img-robux.png') no-repeat 0px 1px;
    color: #060;    
    font-weight: bold;
    padding: 0px 0px 2px 20px;
    font-size: 12px;
}
span.tickets,
div.tickets {
    background: url('/web/20140516222354im_/http://www.roblox.com/images/Tickets.png') no-repeat 0px 1px;
    color: #A61;
    padding: 0px 0px 2px 20px;
    font-weight: bold;
    font-size: 12px;
}
.robux-text {
    color: #060;    
    font-weight: bold;
}
.form-outer {
    overflow: hidden;
    width: 100%;
    clear: both;
}
.form-inner.label-column {
    float: left;
    margin-right: 5px;
}
.form-label {
    font-size: 14px;
    color: #343434;
    font-weight: 600;
}
.form-inner.input-column {
    overflow: hidden;
	text-align:left;
}
.form-select {
    margin: 0 5px 0;
    height: 21px;
}

.error-message {
    color: black;
    background-color: #FAE5E5;
    border: solid 1px #c00;
    margin-bottom: 10px;
    text-align: left;
    padding: 3px 10px;
}
.footnote {
    color: #666;
}
.urgent-text {
    color: #c00;
    font-weight: bold;
}
.warning-text {
    color: #c00;
}
.search-match {
    background-color: #ffa;
}
a[disabled=disabled],a[disabled=disabled]:hover,
a[disabled],a[disabled]:hover {
    text-decoration: none;
    cursor: default;
}
.stat-label {
    font-size: 12px;
    color: #999;
    line-height: 1.5em;
}
.stat {
    font-size: 12px;
    color: #000;
    line-height: 1.5em;
}
.hint-text {
    font-style: italic;
    color: #ccc;
}
.invisible
{
    display:none;
}
.selected-text
{
    font-weight:bold;
}
.status-confirm {
	background-color:#e5effa;
	border: 1px solid #06C;
    padding: 5px 10px;
}
.status-error 
{
    background-color: #FAE5E5;
    border: 1px solid #C00;
    padding: 5px 10px;
}
.info-tool-tip {
    background: url(/web/20140516222354im_/http://www.roblox.com/images/Buttons/questionmark-12x12.png) no-repeat;
    padding-left: 13px;
}

.tab-container 
{
    overflow: hidden;
    padding-left: 5px;
}
.redesign .tab_white_31h_container .ajax__tab_inner,
.tab, .tab-container>div
{
    float: left;
    background-color: #D6D6D6;
    padding: 7px;
    border: 1px solid #9e9e9e;
    font-weight: bold;
    font-size: 15px;
    margin: 4px 2px 0 1px;
    border-bottom-width: 0;
    position: relative;
    top: -1px;
}
.redesign .tab_white_31h_container .ajax__tab_hover .ajax__tab_inner,
.tab:hover, .tab-container>div:hover
{
    background-color: #e9e9e9;
    cursor: pointer;
}
.redesign .tab_white_31h_container .ajax__tab_inner h3,
.tab a
{
    color: #343434;
    font-size: 15px;
    font-weight: bold;
}

.redesign .tab_white_31h_container .ajax__tab_active .ajax__tab_inner,
.tab.active, .tab-container>.tab-active, .tab-container>.tab-active:hover
{
    background-color: #fff;
    margin-top: 0;
    padding: 9px 7px 9px 7px;
    border-bottom: 0;
    position: relative;
    border-color: #ccc;
    z-index: 1;
    margin: 0px 1px 0px 0px;
    top: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.redesign .tab_white_31h_container .ajax__tab_panel /*Only affects places page*/
{
    top: -1px; 
    position: relative;    
    background-color: #fff;
    border-top: 1px solid #CCC;   
}

.tab-content, .tab-container+div>div
{
    top: -1px; 
    position: relative;    
    background-color: #fff;
    border-top: 1px solid #CCC;
    display: none;
}

.tab-container+div>div {
    padding: 21px 15px;
}

.tab-container+div>.tab-active
{
    display: block;
}



.arrow
{
    cursor:pointer;
    background-repeat:no-repeat;
    width:17px;
    height:50px;
    display: inline-block;
}
.arrow:hover 
{
    background-position:0 -51px;
}
.arrow.disabled 
{
    cursor: default;
    background-position:0 -102px;
    width:17px;
    height:50px;
}
.arrow.left 
{
    background-image: url(/web/20140516222354im_/http://www.roblox.com/images/GamesPage/arrow_left.png);
}
.arrow.right 
{
    background-image: url(/web/20140516222354im_/http://www.roblox.com/images/GamesPage/arrow_right.png);
}
.online-player
{
    font-size: 12px;
    color: #339933;
}
.verticaltab {
    text-decoration: none;
}
.verticaltab:hover {
    background: #EFEFEF;
}
.verticaltab.disabled:hover {
    background: none;
    border: none;
    text-decoration: none;
    cursor: default;
}
.verticaltab.selected {
    background: #EFEFEF;
    border: 1px solid #CCC;
    font-weight: bold;
    border-right: none;
    text-align: left;
}
.verticaltab a 
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 14px;
    color: #363636;
    position: relative;
    display: block;
    z-index: 2;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
    padding-left: 15px;
}
.verticaltab a:hover, .verticaltab a:active
{
    text-decoration: none;
}
.verticaltab.disabled a:hover
{
    cursor: default;
}
.validation-summary-errors 
{
    background-color:#FAE5E5;
    border:1px solid #C00;
    padding:5px 0 5px 5px;
    font-size:12px;
    font-weight:normal;
    text-align:left;
    margin-bottom:10px;
}
.validation-summary-errors ul 
{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.nav {
  margin-bottom: 20px;
  margin-left: 0;
  list-style: none;
}

.nav li {
    display: inline;
}

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

.nav-pills > li > a 
{
    padding: 4px 12px;
    margin: 2px 2px 2px 0;
   -webkit-border-radius: 5px;   
   -moz-border-radius: 5px;
    border-radius: 5px;
    line-height: 14px;
    text-decoration: none;
    color: #095FB5;
    font-size: 13px;
}

.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
  color: #ffffff;
  background-color: #3366cc;
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://web.archive.org/web/20140516222354im_/http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(//web.archive.org/web/20140516222354im_/http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(//web.archive.org/web/20140516222354im_/http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(//web.archive.org/web/20140516222354im_/http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}