body, html { margin: 0; font-size: 100%; font-family: 'Trebuchet MS', Helvetica, sans-serif; }

body { background: #C6DCF5 url(../images/bodyGradient.png) repeat-x scroll 0 0; }
body.facebook { background: #ffffff; }

h1, h2, h3, h4, h5, h6 { margin: 0; }

ul { margin: 0; }

a { color: #0083bf; }
a:hover { color: #00afff; background-color: #f0f0e1; }

a img { border: 0; }

.clearFix { clear: both; }

.left { text-align: left; }
.right { text-align: right; }

img.left, a.left, span.left { float: left; }
img.right, a.right, span.right { float: right; }


/* action buttons */

a.actionButton { background: url(../images/actionButtonBg.png) repeat-x 0 1px; display: inline-block; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 5px 10px; border: 1px solid; text-decoration: none; font-weight: bold; margin: 4px;}
a.actionButton.large { font-size: large; padding: 10px 12px; margin: 6px; }
a.actionButton.small { font-size: small; padding: 3px 5px; }

/* action buttons colors */
/*default*/
a.actionButton { background-color: #40c3ff; border-color: #33aee6; color: white; }
a.actionButton:hover { background-color: #00afff; border-color: #02a5ef; }
a.actionButton:active { background-color: #009be2; }
/*positive*/
a.actionButton.positive { background-color: #64af00; border-color: #5ca100; color: white; text-shadow: #64af00 0 -1px 0; }
a.actionButton.positive:hover { background-color: #409000; border-color: #3b8201; }
a.actionButton.positive:active { background-color: #2a5f00; }
/*negative*/
a.actionButton.negative { background-color: #d90000; border-color: #c70000; color: white; text-shadow: #c70000 0 -1px 0; }
a.actionButton.negative:hover { background-color: #a70000; border-color: #980000; }
a.actionButton.negative:active { background-color: #6b0000; }

/* columns and sidebars */

.normalColumn { float: left; width: 545px; }
.normalSidebar { float: right; width: 310px; }
.wideColumn { float: left; width: 645px; }
.wideSidebar { float: right; width: 210px; }
.fullFacebookColumn { width: 724px; margin: 0 auto; }

/* bubble boxes */

.bubble { border: 3px solid #f0f0e1; padding: 5px 15px; margin: -8px -18px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.nipple { background: url(../images/bubbleNipple.gif) no-repeat; margin: -15px 0 0 12px; width: 19px; height: 10px; }
.nipple.fill { background-image: url(../images/bubbleNippleFill.gif); }

/* loader in games lists */

#gamesListLoader { float: right; margin: 0 5px 0 0; }

/* footer in a bubble box */

.bubbleFooter { background-color: #f0f0e1; margin: 5px -15px -5px; padding: 5px 3px 2px; }

/* content sections */

.contentSection { margin: 10px 0 10px; padding: 15px 0; border-top: 3px solid #f0f0e1; position: relative; }
    .contentSection h3 { position: absolute; left: 0; top: -15px; background: white; padding: 0 8px 0 5px; font-weight: normal; text-transform: lowercase; color: #002c40; }

        
/* header */

#header { width: 975px; height: 50px; margin: 0 auto 10px; position: relative; }

/* facebook header */

body.facebook #header { width: 748px; height: 30px; padding: 4px 6px; background-color: #C6DCF5; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
	#uluFbLogo { position: absolute; top: 4px; right: 6px; }
body.facebook #header { 
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(117,184,255)),
	    color-stop(1, rgb(217,235,255))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(117,184,255) 0%,
	    rgb(217,235,255) 100%
	);
}

#fbHeaderTitle { position: absolute; top: 8px; left: 6px; margin: 0; font-size: large; font-weight: bold; text-shadow: 1px 1px 1px #DBECFF; }
	#fbHeaderTitle img { width: 30px; height: 30px; position: absolute; margin-top: -4px; left: 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
	#fbHeaderTitle a { color: #005880; background: transparent; text-decoration: none; padding-left: 35px; }

/* ululand logo */

#ululand { position: absolute; top: 8px; left: 15px; }
	#ululand a { background: url(../images/headerLogo.png) no-repeat center center; display: block; width: 108px; height: 52px; text-decoration: none; }
	#ululand span { visibility: hidden; }

/* main menu */

#menu { position: absolute; top: 10px; left: 140px; margin: 0; padding: 0; list-style-type: none; font-size: 22px; color: #002c40; text-transform: lowercase; }
	#menu li { float: left; margin: 0 10px 0 0; }

/* main menu links */

#menu a { display: block; padding: 4px 7px 7px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
#menu a:hover { background-color: white; }

#userFacebookWelcome { position: absolute; right: 0; top: 0; margin: 2px; }

/* connect with facebook */

#connectWithFacebook { position: absolute; top: 13px; right: 5px; }
#connectWithFacebook a:hover { background: white; }

/* user box */

#userBox { background: #f0f0e1; z-index: 100; width: 298px; height: 70px; border: 1px solid #ddd; position: absolute; top: 0; right: 40px; padding: 5px; border-top: 0; }

/* user photo in user box */

#userPhoto { width: 70px; height: 70px; position: absolute; margin-left: -80px; }

/* username in user box */

#username { position: absolute; top: 5px; left: 85px; margin: 0; }
	#username a { display: block; text-decoration: none; }
	#username a:hover { text-decoration: underline; }

/* user details in user box */

#userDetails { list-style-type: none; margin: 25px 0 0 80px; padding: 0; font-size: small; color: #002c40; }
	#userUlupoints { font-size: large; }
		#userUlupoints span { font-size: x-large; font-weight: bold; }
	#signOut { text-align: right; }


/* user box in facebook */
body.facebook #userBox { width: 135px; height: 30px; padding: 4px; right: 40px; border-width: 0 1px; }
body.facebook #username { left: 45px; font-size: small; }
body.facebook #username a { margin-top: -2px; }
body.facebook #userDetails { margin: 5px 5px 0 40px;}
body.facebook #userUlupoints { font-size: small; margin-top: 16px; }
body.facebook #userUlupoints span { font-size: small; }
body.facebook #userPhoto { width: 30px; height: 30px; margin: 2px 0 0 -40px; }

/* content */

#content { background: white; width: 895px; min-height: 540px; padding: 30px 40px; margin-left: auto; margin-right: auto; position: relative; }
body.facebook #content { width: 760px; padding: 0; }

/* huge welcome banner */

#hugeWelcome { margin-top: -30px; margin-left: -40px; }

/* wizard progress bar */

.wizardProgress { margin: 5px 15px 25px; padding: 10px; overflow: hidden; }
	.wizardProgress ol { list-style-type: none; height: 16px; border-bottom: 4px solid #f0f0e1; margin: 0; padding: 0; }
	.wizardProgress .twoSteps li { width: 50%; }
	.wizardProgress .threeSteps li { width: 32.5%; }
	.wizardProgress .fourSteps li { width: 25%; }

/* wizard progress bar steps */

.wizardProgress li { float: left; height: 60px; position: relative; }
	.wizardProgress .stepNumber { display: block; width: 35px; height: 28px; background: url(../images/wizardProgressCircle.gif); text-align: center; padding: 8px 0 0 1px; color: #999; margin: 0 auto; }
	.wizardProgress .current .stepNumber { background-position: 0px -37px; color: #f0f0e1; font-weight: bold; }
	.wizardProgress .completed .stepNumber { background-position: 0px -74px; }
	.wizardProgress .stepDescription { color: #999; display: block; text-align: center; text-transform: lowercase; }
	.wizardProgress .current .stepDescription { color: #ff8050; }

/* normal forms */

.normalForm input, .normalForm textarea { border: 1px solid #d9d9d9; padding: 5px; color: #333;  }
.normalForm input:focus, .normalForm textarea:focus { border-color: #999; }
.normalForm input[type="text"], .normalForm textarea { width: 415px; }
.normalForm label { width: 100px; text-align: right; padding-right: 10px; font-size: large; color: #0083bf; }
.normalForm .field { position: relative; }
.normalForm .help { color: #696969; font-size: small; }
.normalForm .formError { color: red; font-size: small; }
.normalForm .continue input, .normalForm .cancel input { cursor: pointer; }
.normalForm .continue { text-align: right; padding-right: 5px; }
.normalForm .cancel { text-align: left; padding-right: 5px; }

/* text input boxes */

input.text { color: #002c40; border: 1px solid #dddddd; }
input.text:focus { border-color: #ff8050; color: #ff8050; }

/* one line fields */

.normalForm p.field label { display: inline-block; }
.normalForm p.field input { display: inline-block; font-size: large; }
.normalForm p.field input[type="checkbox"] { position: absolute; left: 114px; }
.normalForm p.field .help, .normalForm p.field .formError { display: block; margin: 4px 0 0 114px; }

/* textarea fields */

.normalForm div.field { margin: 5px 0 25px; }
.normalForm div.field label { position: absolute; top: 0; }
.normalForm div.field .help { width: 100px; padding-top: 10px; position: absolute; text-align: right; }
.normalForm div.field textarea { margin-left: 114px; }


/* search box */

.search { background: #f0f0e1; padding: 4px; margin-top: 7px; margin-bottom: 15px; }
	.search p { margin: 0; }
	.searchText { color: #002c40; font-size: medium; border: 1px solid #ddd; padding: 5px; width: 70%; }
	.searchText:focus { border-color: #ff8050; color: #ff8050; }
	.searchSubmit { background: #f0f0f0; color: #002c40; font-size: medium; border: 1px solid #ddd; padding: 4px 0; width: 24%; }
	.searchSubmit:active { color: #ff8050; }

/* small search box */

.wideSidebar .search .searchText { width: 55%; }
.wideSidebar .search .searchSubmit { width: 35%; }

/* search box in index */

#indexSearch { margin: 20px auto; width: 607px; }
	#indexSearchText { width: 490px; font-size: large;  }
	#indexSearchSubmit { font-size: large; width: 100px; }

/* page titles */

.pageTitle { font-size: 40px; color: #0083bf; margin-bottom: 20px; font-weight: normal; }
	.pageTitle a { color: #0083bf; text-decoration: none; }
	.pageTitle a:hover { color: #00afff; background: transparent; }
	.pageTitle a:active { color: #ff8050; }
	.pageTitle img { margin: 0 13px -6px 0; padding: 5px; border: 1px solid #002c40; background: #0083bf; -moz-border-radius: 3px; -webkit-border-radius: 4px; border-radius: 4px; }
	.pageTitle a:hover img { background-color: #00afff; border-color: #0083bf; }
	.pageTitle a:active img { background-color: #ff8050; border-color: #f0f0e1; }

/* options lists */

.optionsList { margin: 10px 0; padding: 0; list-style-type: none; }
	.optionsList li { margin: 0 0; }
	.optionsList .option { display: block; background: #f0f0e1; padding: 4px 8px; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-decoration: none; }
	.optionsList .option:hover { background: #ff8050; color: #f0f0e1; }
	.optionsList .option.dangerous { color: red; }
	.optionsList .option.dangerous:hover { background-color: red; color: #f0f0e1; }

/* normal game lists */

.gameList { margin: 10px 0; padding: 0; list-style-type: none; }
	.gameList li.half { width: 48%; margin: 10px 2% 10px 0; }
	.gameList li.full { width: 98%; margin: 10px 2% 10px 0; }
	.gameList li { float: left; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; }
	.gameList .gameListBox { display: block; background: #f0f0e1; height: 75px; text-decoration: none; -moz-border-radius: 5px; }
	.gameList .gameListBox:hover { background: #ff8050; }
	.gameList .thumbnail { width: 75px; height: 75px; float: left; margin-right: 8px; }
	.gameList .name, .gameList .description { display: block; }
	.gameList .name { color: #00afff; font-weight: bold; padding: 6px 4px; }
	.gameList .gameListBox:hover .name { color: #f0f0e1; }
	.gameList .description { color: #002c40; font-size: small; line-height: 1.5; }

/* large game lists */

.gameList.large .gameListBox { height: 100px; }
.gameList.large .thumbnail { width: 100px; height: 100px; }
.gameList.large li { margin: 10px 2% 10px 0; }

/* small game lists */

.gameList.small .gameListBox { height: 30px; }
.gameList.small .thumbnail { width: 30px; height: 30px; }
.gameList.small li { margin-top: 2px; margin-bottom: 2px; }

/* filters on games list */

.gamesListFilters { background: #f0f0e1; padding: 8px; margin: 0 -15px; }
.gamesListFilters .orderBy { float: right; }
.gamesListFilters .filtersInfo { float: left; font-size: small; color: #002c40; margin: 0; }
	.gamesListFilters .filtersInfo a { color: #002c40; text-decoration: none; }

/* create competition link on index */
#createCompetition { margin-top: 10px; }


/* competitions list metadata */

.competitionMetadata { margin: 6px 0 0 4px; font-size: small; text-transform: lowercase; color: #002c40; }
	.competitionMetadata li { margin: 5px 20px 5px 0; }
	.competitionMetadata .time, .competitionMetadata .users, .competitionMetadata .creator { padding-left: 22px; }
	.competitionMetadata .time { background: url(../images/clock.png) left center no-repeat; }
	.competitionMetadata .users { background: url(../images/group.png) left center no-repeat; }
	.competitionMetadata .creator { background: url(../images/user.png) left center no-repeat; }

        /* game details on competition pages */

.competitionGameDetails { margin-top: 30px; padding-left: 115px; position: relative; }
	.competitionGameDetails p { margin: 0 0 0.5em;}
	.competitionGameDetails .thumbnail { width: 100px; float: left; margin-left: -110px; }
	.competitionGameDetails .gamename { font-weight: bold; color: #002c40; }
	.competitionGameDetails .description { font-size: small; color: #696969; }
        .competitionGameDetails .createdBy { font-size: small; color: #444; }

/* competition details on competition pages */

.competitionDetails div { display: inline-block; width: 162px; text-align: center; vertical-align: middle; }
.competitionDetails div.time { width: 210px; }
.competitionDetails p { margin: 4px 0; }

/* users tables in competition admin page */

.competitionAdminUsers .username { text-align: right; padding-right: 5px; }

/* ranking tables */

.rankingTable { width: 95%; margin: 0 auto; border-collapse: collapse; }

/* ranking table rows */

.rankingTable th { padding-bottom: 5px; font-size: large; color: #002c40; border-bottom: 3px solid #002c40; text-align: left; }
.rankingTable td { border-bottom: 1px solid #ddd; vertical-align: middle; }
.rankingTable .position, .rankingTable th.position { text-align: center; }
.rankingTable td.position  { font-size: x-large; padding: 3px 15px 3px 5px; }
.rankingTable td.timeAgo { color: #888; }

/* podium positions in ranking tables */

.rankingTable .first td { border-color: #edda3f; font-size: large; }
.rankingTable .first .position { font-size: xx-large; }

/* pagination on games lists */

.pagination { background: #F0F0E1 none repeat scroll 0 0; margin: 10px -15px -5px; padding:8px; }
    .paginationInfo { color: #002c40; float:right; font-size:small; margin-top:3px; }
    .pagesLinks a { text-decoration:none; }
    .pagesLinks a, .pagesLinks span { margin:0; padding:2px 4px; }

/* page title on game pages */

.pageTitle.gameName img { padding: 0; margin-bottom: -10px; margin-right: 0; height: 45px; border: 0; }

/* game area */

.gameArea { margin: 0 -40px; background-color: #222; }
body.facebook .gameArea { margin: 0; }
.gameMovie { margin: 0 auto 0; }

.gameBar { width: 855px; padding: 8px 20px 10px; margin: 0 auto 20px;
          border-top: 2px solid #d6d6bc; background-color: #f0f0e1;
          color: #002c40; }
body.facebook .gameBar { width: 720px; }
    .gameBar p { margin: 0; }

/* facebook like button */

.facebookLike { float: right; }

/* game info */

.gameInfo { background: #f0f0e1; font-size: small; color: #696969; padding: 10px; margin-bottom: 20px; }
	.gameInfo p { margin: 5px; }
	.gameInfo .heading { color: #002C40; font-size: medium; margin: 5px 0; text-transform:lowercase; }


/* game rankings */

.gameRankings { background: #f0f0e1; font-size: small; color: #696969; padding: 10px; margin-bottom: 20px; position: relative; }
	.gameRankings .heading { color: #002C40; font-size: medium; margin: 2px 0 3px; text-transform:lowercase; }
	.rankingChooser { position: absolute; top: 13px; right: 20px; margin: 0; }
        p.rankingChooser { font-weight: bold; }

/* loader in rankings box */

#rankingReloader { position:absolute; top: 13px; right: 3px; }

/* ranking positions */

.rankingPosition { display: block; text-decoration: none; width: 50px; height: 100px; padding: 2px 5px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 4px solid transparent; text-align: center; float: right; margin: 0 5px; }
.rankingPosition:hover { border: 4px solid #ff8050; }
	.rankingPosition img.playerPhoto { width: 50px; height: 50px; }
	.rankingPosition p { margin: 0; }
	.rankingPosition .playerPosition { font-size: large; color: #002c40; font-weight: bold; margin-bottom: 4px; }

/* ulu in user profile */

#ulu { margin: 25px 20px; float: left; }

/* user info in user profile */

.profileUlupoints { font-size: x-large; padding-left: 50px; margin: 0 0 2em 0; }
    .profileUlupoints img { margin: 0 0 -15px -50px; }
    .profileUlupoints span { font-weight: bold; }

/* sidebar boxes */

.sidebarBox { background: #f0f0e1; padding: 10px 20px; }
.sidebarBox, .sidebarAd { margin: 0 0 20px; }

/* sidebar headings */

.sidebarHeading { color: #002c40; font-size: large; text-transform: lowercase; margin: 0; margin-bottom: 15px; }

/* sidebar plain texts */

.sidebarBox p.plain { color: #696969; }
.sidebarBox.small p.plain { font-size: small; margin: 0.2em 0; }

/* Competitions list filters */

.competitionsFilters { color: #696969; text-transform: lowercase; }
	.competitionsFilters p { margin: 7px 0; }
.competitionsFilters label.text { width: 60px; text-align: right; padding-right: 5px; display: block; float: left; }
.competitionsFilters input[type=text] { padding: 3px; width: 175px; }
.competitionsFilters input[type=submit] { width: 50%; margin: 10px auto -7px; display: block; }

/* sidebar ad heading */

.sidebarAdHeading { color: #002c40; margin: 0; font-size: large; text-transform: lowercase; text-align: right; }

/* choose uluname page */

#uluNameChooser { width: 626px; margin: 105px auto; }
    #uluNameChooser h2 { margin-bottom: 10px; }

/* choose uluname page */

#uluNameForm { min-height:50px; background: #f0f0e1; padding: 6px 6px 6px 62px; position:relative; }
    #newUserPhoto { position:absolute; left: 6px; }
    #uluNameForm #user_username { width: 450px; font-size: xx-large; padding: 5px; border: 1px solid #DDDDDD; color: #002c40; }
    #uluNameForm #user_username:focus { border-color: #ff8050; color: #ff8050; }
    #uluNameForm #user_username.error { border-color: red; }
    #uluNameForm .formError { color: red; font-size: small; margin: 0 0 0 5px; }
    #uluNameFormSubmit { width: 100px; font-size: xx-large; padding: 4px; border: 1px solid #dddddd; width: 91px; color: #002C40; background-color: #f0f0f0; }
    #uluNameForm .error_list { list-style-type: none; color: red; font-size: small; margin: 0 0 0 5px; padding: 0; }

/* footer */

#footer { background: #5397E1; color: #fff; width: 975px; margin: 20px auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

/* option to change the language */

#changeLanguage { margin: 16px 20px 0; float: left; }

/* footer menu (not used now) */

#footerMenu { list-style-type: none; padding: 0; padding: 8px 0; }
	#footerMenu ul { list-style-type: none; padding: 0; margin: 5px 0 12px; }
	#footerMenu li { float: left; margin-left: 45px; }
		#footerMenu ul li { float: none; margin: 0; display: block; font-size: small; }

/* footer menu links */

#footerMenu a { color: #EBF5FF; text-decoration: none; }
#footerMenu a:hover { text-decoration: underline; background: transparent; }
#footerMenu ul a { color: #C8DCF5; }

/* pncil logo */

#pncilLogo { float: right; margin: 10px 25px; }

/* copyright text */

#copyrightText { color:#5397E1; float:right; font-size:small; margin-right:1em; }