/* RESET ---------------------------------------------- */ html{background-color:#fcf9f9;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;}table{border-collapse:collapse;border-spacing: 0;}fieldset,img{border: 0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border: 0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;overflow:hidden;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit; resize: none;outline:none;}legend{color:#000;} body {font-family:"helvetica neue",arial,sans-serif;font-size:10px;color:#211922;}table{font-size:inherit;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}em{font-style:italic;}strong{font-weight:bold;} /* ABOUT ---------------------------------------------- */ a {color: #221919; font-weight: bold; text-decoration: none;} a:hover {color: #cb2027; text-decoration: underline;} #PrimaryLogo {display: block; margin: 50px auto 50px;} #Right {margin: 0 0 18px 246px;} h1 {font-size: 32px; font-weight: bold; line-height: 43px;} h1 img {display: inline-block; position: relative; margin: 0 8px 0 -47px;} h1 span {display: inline-block;} h2 {clear: both; margin: 50px 0 18px; font-size: 32px; font-weight: bold; line-height: 38px;} h1 + h2 {margin-top: 0;} h3 {font-size: 18px; line-height: 24px; font-weight: bold;} h4 {font-size: 14px; font-weight: bold; line-height: 19px;} .hidden {display: none !important;} .noMarginTop {margin-right: 0 !important;} .noMarginRight {margin-right: 0 !important;} .noMarginBottom {margin-right: 0 !important;} .noMarginLeft {margin-right: 0 !important;} .button {padding: 0 .8em; vertical-align: top; font-size: 1.3em; line-height: 2em; font-weight: bold; text-decoration: none; background: url(../images/buttonGradient20.png) repeat 0 0; border: 1px solid; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px rgba(34,25,25,0.05) -webkit-box-shadow: 0 1px rgba(34,25,25,0.05); box-shadow: 0 1px rgba(34,25,25,0.05);} .button:hover {text-decoration: none;} .button.pressed {color: #888; text-shadow: 0 0 #fff; background-image: none; background-color: #fff; border-color: #e7e7e7; -moz-box-shadow: 0 0 #fff; -webkit-box-shadow: 0 0 #fff; box-shadow: 0 0 #fff;} .button.pressed:hover {color: #888; background-color: #fff; border-color: #e7e7e7; color: #888;} .button.pressed:active {color: #221919; background-color: #fff; border-color: #e7e7e7; color: #221919;} .button.active {color: #888; text-shadow: 0 1px rgba(255, 255, 255, 0.35); background: #fcf9f9; border-color: #ddd; -moz-box-shadow: 0 1px rgba(255, 255, 255, 1), inset 0 1px rgba(34, 25, 25, 0.05); -webkit-box-shadow: 0 1px rgba(255, 255, 255, 1), inset 0 1px rgba(34, 25, 25, 0.05); box-shadow: 0 1px rgba(255, 255, 255, 1), inset 0 1px rgba(34, 25, 25, 0.05);} .button.active:hover {color: inherit; background-color: inherit; border-color: #ddd;} .blueButton {color: #31545f; background-color: #bed7e5; border-color: #aaa; text-shadow: 0 1px #eaeaea;} .blueButton:hover {color: #221919; background-color: #bed7e5; border-color: #777;} .blueButton:active {color: #eaeaea; background-color: #41545f; border-color: #444; text-shadow: 0 -1px #221919; -moz-box-shadow: inset #24323a 0 0 3px; -webkit-box-shadow: inset #24323a 0 0 3px; box-shadow: inset #24323a 0 0 3px;} .lightButton {color: #41545f; background-color: #e0ecf0; border-color: #bbb; text-shadow: 0 1px #fafafa;} .lightButton:hover {color: #221919; background-color: #e0ecf0; border-color: #aaa;} .lightButton:active {color: #000; background-color: #bed7e5; border-color: #777; text-shadow: 0 1px #eaeaea; -moz-box-shadow: inset #8fa7b4 0 0 3px; -webkit-box-shadow: inset #8fa7b4 0 0 3px; box-shadow: inset #8fa7b4 0 0 3px;} .whiteButton {color: #41545f; background-color: #fff; border-color: #d7d7d7 #ccc #c3c3c3; text-shadow: 0 1px #fafafa; -moz-box-shadow: #eee 0 1px 1px; -webkit-box-shadow: #eee 0 1px 1px; box-shadow: #eee 0 1px 1px;} .whiteButton:hover {color: #221919; background-color: #e0ecf0; border-color: #ccc;} .whiteButton:active {color: #000; background-color: #bed7e5; border-color: #aaa; text-shadow: 0 1px #eaeaea; -moz-box-shadow: inset #8fa7b4 0 0 3px; -webkit-box-shadow: inset #8fa7b4 0 0 3px; box-shadow: inset #8fa7b4 0 0 3px;} .suppressed.whiteButton {border-color: transparent; background-image: none; box-shadow: 0 0 #fff; -moz-box-shadow: 0 0 #fff; -webkit-box-shadow: 0 0 #fff;} .suppressed.whiteButton:hover {background: #fff url(../images/buttonGradient20.png); border-color: #d7d7d7 #ccc #c3c3c3; box-shadow: #eee 0 1px 1px; -moz-box-shadow: #eee 0 1px 1px; -webkit-box-shadow: #eee 0 1px 1px;} .suppressed.whiteButton:active {background-color: #bed7e5; border-color: #aaa; -moz-box-shadow: inset #8fa7b4 0 0 3px; -webkit-box-shadow: inset #8fa7b4 0 0 3px; box-shadow: inset #8fa7b4 0 0 3px;} .friend_avatar {width: 50px; height: 50px; background-color: #f2f0f0;} .friend_avatar_follow {display: none; height: 26px; margin-top: 12px; font-size: 13px; line-height: 10px;} .friend_name_n_stuff {display: none;} .friend_avatar_buttons li {float: left; width: 160px; overflow: hidden; margin-bottom: 18px !important;} .friend_avatar_buttons .friend_avatar {float: left; margin-right: 5px;} .friend_avatar_buttons .friend_avatar_follow {float: left; line-height: 26px; margin-top: 2px;} .friend_avatar_buttons .friend_name_n_stuff {display: block; float: left; font-size: 13px; font-weight: bold; line-height: 15px; clear: right; margin-top: 3px; margin-right: 4px; text-align: left; width: 90px; white-space: nowrap; overflow: hidden;} .error {display: block; margin-bottom: 18px; padding: 14px; font-size: 32px; font-weight: 300; background-color: #fae9e8; border: 1px solid #fab9b5; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 1px rgba(34, 25, 25, 0.15); -webkit-box-shadow: 0 1px rgba(34, 25, 25, 0.15); box-shadow: 0 1px rgba(34, 25, 25, 0.15);} .error img {position: relative; top: 1px;} #ScrollToTop {display: none !important;} /* CONTAINER ---------------------------------------------- */ .container {width: 880px; margin: 0 auto;} /* HEADER ---------------------------------------------- */ #header {margin: 0 -20px 55px;} #header.fixed {position: fixed; z-index: 1; top: 0; left: 50%; width: 920px; margin-left: -460px;} #HeaderContents {padding: 23px 20px 22px; background: url(../images/orientation/HeaderRule.png) center bottom no-repeat;} #HeaderContents #Indicators {float: right; margin-top: 4px;} #HeaderContents #Indicators li {float: left; margin-left: 34px;} #HeaderContents #Indicators .indicator span {float: left; width: 30px; height: 30px; margin: 0 8px 0 0; background: url(../images/orientation/IndicatorNumbers.png);} #HeaderContents #Indicators .bracket {margin-top: 9px;} #HeaderContents #Indicators .indicator strong {float: left; margin-top: 6px; font-size: 18px; color: #bbb;} #HeaderContents #Indicators .indicator.active strong {color: #ce2020;} #HeaderContents #Indicators .first span {background-position: 0 0;} #HeaderContents #Indicators .first.active span {background-position: 0 -30px;} #HeaderContents #Indicators .second span {background-position: -30px 0;} #HeaderContents #Indicators .second.active span {background-position: -30px -30px;} #HeaderContents #Indicators .third span {background-position: -60px 0;} #HeaderContents #Indicators .third.active span {background-position: -60px -30px;} /* REQUEST INVITATION ---------------------------------------------- */ #RequestContainer {position: relative;} #RequestInvitation h1 {margin-bottom: 32px; text-align: center; font-weight: 300;} #RequestInvitation #CompleteAccount {width: 796px; margin: 0 auto;} #RequestInvitation #CompleteAccount ul {float: left; width: 465px; margin-right: 12px;} #RequestInvitation #CompleteAccount ul li {float: left; width: 465px;} #Success {position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; font-size: 32px; line-height: 43px; font-weight: 300; color: #0c9102;} #Success a {color: #0c9102;} /* WELCOME STEPS ---------------------------------------------- */ #SignUp {position: relative; margin-top: 55px; text-align: center;} #SignUp h1 {font-weight: 300;} #SignUp .BigButton {position: relative; margin: 31px 0; padding-right: 54px;} #SignUp .BigButton img {position: absolute; z-index: 2; top: 16px; right: 24px;} #SignUp p {margin: 11px 0 0; font-size: 14px; line-height: 19px; font-weight: 300;} #SignUp #WeNever {position: absolute; top: 84px; right: 0; width: 243px; margin-top: 0; text-align: left; color: #888;} #WhyLinkAccounts {position: relative;} #WhyLinkAccounts span {display: none; position: absolute; top: 21px; left: 50%; width: 260px; margin-left: -143px; padding: 12px; text-align: left; font-weight: 300; text-decoration: none; color: #221919; background-color: #fcf9f9; border: 1px solid #ccc; border-radius: 8px; -moz-border-radius:> 8px; -webkit-border-radius: 8px; box-shadow: 0 1px 3px rgba(34,25,25,0.1); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.1); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.1);} #WhyLinkAccounts:hover {text-decoration: none;} #WhyLinkAccounts:hover span {display: block; cursor: default;} #WhyLinkAccounts span:hover {display: block;} #WelcomeEducation {width: 100%; margin-top: 55px; padding: 55px 0; background: url(../images/linen_bg.png) top left repeat; border-top: 2px solid #fff; overflow: hidden; -moz-box-shadow: inset 0 1px 17px rgba(34,25,25,0.2); -webkit-box-shadow: inset 0 1px 17px rgba(34,25,25,0.1); box-shadow: inset 0 1px 17px rgba(34,25,25,0.2);} #WelcomeEducation h1 {margin-bottom: 31px; text-align: center; font-weight: 300; color: #221919; text-shadow: 0 2px rgba(252,249,249,0.25);} #WelcomeEducationExamples {position: relative; height: 785px;} #WelcomeEducationExamples ul {position: absolute; top: 0; right: 50%; width: 12000px; margin-right: -2350px; -moz-transition: 1500s linear; -webkit-transition: 1500s linear;} #WelcomeEducationExamples li {float: left; margin-right: 40px;} #WelcomeEducationExamples li h4 {width: 380px; margin: 0 12px 4px; text-align: center; font-weight: 300; color: #221919 !important; text-shadow: 0 1px rgba(252,249,249,0.25);} /* STEPS ---------------------------------------------- */ #step2 {position: fixed; top: 100px; left: 50%; width: 880px; height: 543px; margin-left: -474px; background-color: #fcf9f9;} /* TASTE ---------------------------------------------- */ #ClickPins .pin {position: relative; float: left; width: 113px; margin: 0 14px 22px 0; font-weight: normal; cursor: pointer;} #ClickPins .pin .category {display: block; padding: 10px 0; font-size: 13px; line-height: 17px; font-weight: 300; overflow: hidden; white-space: nowrap;} #ClickPins .pin .square {position: relative; z-index: 1; display: block; width: 113px; height: 112px; border-radius: 9px; border: 1px solid #f2f0f0; box-shadow: 1px 0 #fff;} #ClickPins .pin .square .image {display: block; width: 113px; height: 112px; -webkit-border-radius: 8px;} #ClickPins .pin .shadow {position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; display: block; border-radius: 6px; box-shadow: inset 0 1px 3px rgba(34,25,25,0.5);} #ClickPins .pin .check {display: none; position: absolute; z-index: 3; bottom: 35px; right: 32px;} #ClickPins .pin .check img {display: block; opacity: 0.93; filter: alpha(opacity="93"); filter: alpha(opacity="93");} #ClickPins .pin:hover .square .image {opacity: .85; filter: alpha(opacity="85");} #ClickPins .pin:active .shadow {box-shadow: inset 0 2px 4px rgba(34,25,25,0.5);} #ClickPins .pin:active .square {background-color: #221919;} #ClickPins .pin:active .square .image {background-position: 0 0 !important;} #MainContent #ClickPins .selected .check {display: block; opacity: .9; filter: alpha(opacity="90");} #MainContent #ClickPins .selected .square {background-color: green; border-color: darkgreen;} #MainContent #ClickPins .selected .square .image, #MainContent #ClickPins .selected:hover .square .image {opacity: .1; filter: alpha(opacity="10");} #MainContent #ClickPins .selected:active .check {bottom: 34px;1} #MainContent iframe {margin-top: 12px;} #category_picker_message {display: none; text-align: center;} /* PEOPLE ---------------------------------------------- */ #AboutTeamPhotos {overflow: hidden;} #AboutTeamPhotos ul {float: left; width: 425px; margin: 0 0 25px; overflow: hidden;} #AboutTeamPhotos ul.clearLeft {clear: left; margin-right: 30px;} #AboutTeamPhotos li {float: left; margin: 0 1px 1px 0;} #AboutTeamPhotos .pin img {display: block; width: 46px; height: 46px;} #AboutTeamPhotos .AboutProfile {width: 92px; height: 93px; overflow: hidden;} #AboutTeamPhotos .AboutProfile img {display: block; width: 93px;} #AboutTeamPhotos .AboutBio {clear: left; float: none; display: block; padding: 6px 0 0; font-size: 13px; line-height: 17px; font-weight: 300; color: #888;} #AboutTeamPhotos .AboutBio span {float: left; width: 310px; padding: 5px 0 0;} #AboutTeamPhotos .AboutBio strong {color: #221919;} #AboutTeamPhotos .AboutBio .button {float: right; margin-right: 1px; font-size: 13px;} #AboutTeamPhotos .AboutBio .button img {display: none; margin: 0 5px 0 0;} #AboutTeamPhotos .AboutBio .button.active img {display: inline-block;} #friends {width: 820px; margin: 0 auto; text-align: center; font-size: 0; line-height: 2px; overflow: hidden;} #friends li {display: inline; margin: 0 1px 1px 0;} /* BOARDS ---------------------------------------------- */ #CompleteAccount #BoardSuggestions {position: absolute; top: 0; right: -176px; width: 162px;} #CompleteAccount #BoardSuggestions li {margin-bottom: 3px; font-size: 14px; line-height: 19px; font-weight: 300;} #CompleteAccount #BoardSuggestions li a {font-weight: 300;} #CompleteAccount #BoardSuggestions li .BoardTitleUsed {color: #ccc;} #CompleteAccount #BoardSuggestions li .BoardTitleUsed:hover {text-decoration: none; cursor: default;} .BoardNameError {display: block; font-size: 14px; font-weight: bold; padding: 12px 21px 0; color: #910202;} /* BUTTON ---------------------------------------------- */ #BigPinItButton {float: left; margin-right: 18px; padding: 11px 15px; text-align: center; font-size: 18px; line-height: 1em; background: #fff url(../images/buttonGradient10.png) top left repeat-x; border: 1px solid #fff; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 1px 2px rgba(34,25,25,0.5); -webkit-box-shadow: 0 1px 2px rgba(34,25,25,0.5); box-shadow: 0 1px 2px rgba(34,25,25,0.5); cursor: move;} #BigPinItButton:hover {color: #000; text-decoration: none;} #PinButton {width: 632px; margin: 0 auto;} #PinButton p {margin: 0 0 18px; font-size: 18px; font-weight: 300; line-height: 24px;} #PinButton ol li {margin: 0 0 8px 24px; list-style: decimal outside; font-size: 18px; line-height: 24px; font-weight: 300;} #ButtonHolder {margin-bottom: 31px; padding: 15px; background-color: #daecf6; border-top: 1px solid #c4ddef; overflow: hidden;} #ButtonHolder p {margin: 0;} #ButtonInstructions {padding-top: 9px;} #BigPinItButton:hover { color: #3b2e2e; text-decoration: none; -moz-box-shadow: inset 0 0 4px rgba(255,255,255,0.5), inset 0 1px 2px rgba(255,255,255,0.7), 0 2px #ddd, 0 3px 0 #e7e7e7, 0 4px 2px rgba(0,0,0,0.15), 0 4px 17px rgba(34,25,25,0.2); -webkit-box-shadow: inset 0 0 4px rgba(255,255,255,0.5), inset 0 1px 2px rgba(255,255,255,0.7), 0 2px #ddd, 0 3px 0 #e7e7e7, 0 4px 2px rgba(0,0,0,0.15), 0 4px 17px rgba(34,25,25,0.2); box-shadow: inset 0 0 4px rgba(255,255,255,0.5), inset 0 1px 2px rgba(255,255,255,0.7), 0 2px #ddd, 0 3px 0 #e7e7e7, 0 4px 2px rgba(0,0,0,0.15), 0 4px 17px rgba(34,25,25,0.2); } /* COMPLETE ---------------------------------------------- */ #CompleteContainer {width: 880px; margin: 0 auto;} #CompleteHeader {clear: both; padding: 0 0 15px 245px;} #CompleteContainer p, #CompleteContainer ul, #CompleteContainer ol, #CompleteContainer dl {margin-bottom: 24px; font-size: 18px; line-height: 24px; font-weight: 300;} #CompleteContainer .styleLess {list-style: none;} #CompleteContainer li {margin-bottom: 12px;} #CompleteContainer .small h3 {font-size: 14px; line-height: 19px;} #CompleteContainer .small p {margin-bottom: 19px; font-size: 14px; line-height: 19px;} #CompleteContainer .small li {margin-bottom: 8px; font-size: 14px; line-height: 19px;} #CompleteLogo {display: block; margin: 65px 0 46px;} #CompletePhoto {float: left; width: 223px; margin-right: 25px; overflow: hidden; -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.5); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.5); box-shadow: 0 1px 3px rgba(34,25,25,0.5);} #CompletePhoto img {display: block; width: 223px; margin-bottom: 15px; background-color: #fcf9f9;} #CompletePhoto p, #CompletePhoto li {font-size: 14px; line-height: 19px; font-weight: 300;} #CompletePhoto li {margin-bottom: 3px;} #CompletePhoto li a {font-weight: 300;} .CreateAccountStep #CompletePhoto {max-height: 223px;} .CreateAccountStep #CompletePhoto img {margin-bottom: 0;} #CompleteAccount {position: relative; width: 468px; margin-left: 245px;} #CompleteAccount li {position: relative; display: block; margin-bottom: 18px; font-size: 32px; font-weight: 300;} #CompleteAccount input#invitationBox{ position: relative; z-index: 3; display: block; width: 435px; padding: /*13px 14px 8px*/10px 14px 5px; font-size: 32px; font-weight: 300; background: transparent; border: 1px solid #a4a2a2; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: inset 0 1px rgba(34,25,25,0.15), 0 1px rgba(255,255,255,0.8); -webkit-box-shadow: inset 0 1px rgba(34,25,25,0.15), 0 1px rgba(255,255,255,0.8); box-shadow: inset 0 1px rgba(34,25,25,0.15), 0 1px rgba(255,255,255,0.8); -webkit-transition: all 0.08s ease-in-out; -moz-transition: all 0.08s ease-in-out; } #CompleteAccount #Boards input {width: 410px; padding: 13px 39px 8px 14px} #CompleteAccount label {position: absolute; z-index: 2; top: 14px; left: 16px; line-height: 1em; color: #d7d7d7; -moz-user-select: none; -webkit-user-select: none; -moz-transition: all 0.16s ease-in-out; -webkit-transition: all 0.16s ease-in-out;} #CompleteAccount .fff { position: absolute; z-index: 1; top: 0; right: 0px; left: 3px; bottom: 0; max-height: 59px; background-color: #fff; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } #CompleteAccount .helper {position: absolute; right: -194px; bottom: 14px; width: 180px; font-size: 13px; line-height: 15px;} #CompleteAccount .RemoveBoard {display: none; position: absolute; z-index: 4; right: 12px; top: 21px; width: 20px; height: 20px; background: url(../images/orientation/BoardInputX.png) top center no-repeat;} #CompleteAccount .RemoveBoard:hover {background-position: center;} #CompleteAccount .RemoveBoard:active {background-position: bottom center;} #CompleteAccount li:hover .RemoveBoard {display: block;} /* Input Focus */ #CompleteAccount input:focus { border-color: #024091 !important; -moz-box-shadow: inset 0 1px rgba(34,25,25,0.15), 0 1px rgba(255,255,255,0.8), 0 0 14px rgba(82,169,235,0.35) !important; -webkit-box-shadow: inset 0 1px rgba(34,25,25,0.15), 0 1px rgba(255,255,255,0.8), 0 0 14px rgba(82,169,235,0.35) !important; box-shadow: inset 0 1px rgba(34,25,25,0.15), 0 1px rgba(255,255,255,0.8), 0 0 14px rgba(82,169,235,0.35) !important; } #CompleteAccount input:focus + label { opacity: .5; filter: alpha(opacity="50"); } /* Input Error */ #CompleteAccount .BoardError { border-color: #910202; -moz-box-shadow: 0 0 14px rgba(235,82,82,0.35); -webkit-box-shadow: 0 0 14px rgba(235,82,82,0.35); box-shadow: 0 0 14px rgba(235,82,82,0.35); } /* Input Error Focus */ #CompleteAccount .BoardError:focus { border-color: #910202; -moz-box-shadow: 0 0 14px rgba(235,82,82,0.35), 0 1px rgba(255,255,255,0.8); -webkit-box-shadow: 0 0 14px rgba(235,82,82,0.35), 0 1px rgba(255,255,255,0.8); box-shadow: 0 0 14px rgba(235,82,82,0.35), 0 1px rgba(255,255,255,0.8); } /* Input Entry */ #CompleteAccount .entry input:focus + label, #CompleteAccount .entry label { left: 0; opacity: 0; filter: alpha(opacity="0"); } /* Registration Validation */ #CompleteAccount li .ValidationIcon {position: relative; top: 1px; left: 3px; display: inline-block; width: 11px; height: 11px; background-image: url(../images/orientation/CheckX.png); background-repeat: no-repeat;} #CompleteAccount li .green {color: green;} #CompleteAccount li .green .ValidationIcon {background-position: 0 0;} #CompleteAccount li .red {color: red;} #CompleteAccount li .red .ValidationIcon {background-position: -11px 0;} #CompleteAccount li .default {font-weight: normal; color: #ccc;} /* Big Button */ .BigButton {position: relative; display: inline-block; padding: 0.500em 1em; text-align: center; font-size: 24px; line-height: 1em; color: #fcf9f9; text-shadow: 0 -1px rgba(34,25,25,0.5); background-color: #f3f3f3; border: 1px solid #e7e7e7; background-image:url(but_bckgrnd.jpg); height:53px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); -webkit-box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); -moz-transition-property: color, -moz-box-shadow, text-shadow; -moz-transition-duration: .08s; -moz-transition-timing-function: ease-in-out; -webkit-transition-property: color, -webkit-box-shadow, text-shadow; -webkit-transition-duration: .08s; -webkit-transition-timing-function: ease-in-out; border: 1px solid blue; } .BigButton:hover { color: #fff; text-shadow: 0 -1px rgba(34,25,25,0.3); text-decoration: none; } .BigButton:active { color: #f3f3f3; text-shadow: 0 -1px rgba(34,25,25,0.6); } .BigButton strong { position: relative; z-index: 2; } .BigButton span { position: absolute; z-index: 1; top: -1px; right: -1px; bottom: -1px; left: -1px; display: block; color: #fcf9f9; text-shadow: 0 -1px rgba(34,25,25,0.4); background-position: 0; background-repeat: repeat-x; border-width: 1px; border-style: solid; opacity: 1; filter: alpha(opacity="100"); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: inset 0 1px rgba(255,255,255,0.35); -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.35); box-shadow: inset 0 1px rgba(255,255,255,0.35); -moz-transition-property: opacity; -moz-transition-duration: 0.5s; -moz-transition-timing-function: ease-in-out; -webkit-transition-property: opacity; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; } .BigButton:hover { background-position: 0 -56px; border-color: #034dad; -moz-box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(82,169,235,0.25); -webkit-box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(82,169,235,0.25); box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(82,169,235,0.25); -moz-transition-property: opacity; -moz-transition-duration: 0.05s; -moz-transition-timing-function: linear; -webkit-transition-property: opacity; -webkit-transition-duration: 0.05s; -webkit-transition-timing-function: linear; } .BigButton:active span { background-position: 0 -112px; border-color: #002351; box-shadow: inset 0 1px 2px rgba(34,25,25,0.25), 0 0 4px rgba(82,169,235,0.35); -moz-box-shadow: inset 0 1px 2px rgba(34,25,25,0.25), 0 0 4px rgba(82,169,235,0.35); -webkit-box-shadow: inset 0 1px 2px rgba(34,25,25,0.25), 0 0 4px rgba(82,169,235,0.35); -moz-transition: none; -webkit-transition: none; } /* Disabled Big Button */ .BigButton.disabled {color: #e7e7e7; text-shadow: 0 -1px rgba(34,25,25,0.01); background-color: #f3f3f3; cursor: default;} .BigButton.disabled:hover {color: #e7e7e7; text-decoration: none;} .BigButton.disabled span {opacity: 0; filter: alpha(opacity="0");} /* Blue Button */ .BlueButton span {background-image: url(../images/orientation/ButtonGradient.png); border-color: #024091;} /* White Button */ .WhiteButton {color: #5a5a5a; text-shadow: 0 -1px rgba(255,255,255,0.8);} .WhiteButton:hover {color: #606060; text-shadow: 0 -1px rgba(255,255,255,0.9); } .WhiteButton:active {color: #555; text-shadow: 0 -1px rgba(255,255,255,0.7);} .WhiteButton span {background-image: url(../images/orientation/ButtonGradientWhite.png); border-color: #bbb;} .WhiteButton:hover span {border-color: #c3c3c3; -moz-box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(232,230,230,0.75); -webkit-box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(232,230,230,0.75); box-shadow: 0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(232,230,230,0.75); } .WhiteButton:active span {border-color: #b7b7b7; -moz-box-shadow: inset 0 1px 2px rgba(34,25,25,0.25), 0 0 4px rgba(232,230,230,0.5); -webkit-box-shadow: inset 0 1px 2px rgba(34,25,25,0.25), 0 0 4px rgba(232,230,230,0.5); box-shadow: inset 0 1px 2px rgba(34,25,25,0.25), 0 0 4px rgba(232,230,230,0.5); } /* Lightweight Button */ .LightweightButton strong {font-weight: 300 !important;} /* Specific Buttons */ #CompleteButton {display: block;} #BoardsButton {float: right;} #AddButton {float: left;}