/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* normal */
@font-face {
    font-family: Frutiger;
    src: url(../fonts/frutiger/FrutigerLTCom-Roman.ttf) format('truetype');
    font-weight: 400;
}
/* normal + italic */
@font-face {
    font-family: Frutiger;
    src: url(../fonts/frutiger/FrutigerLTCom-Italic.ttf) format('truetype');
    font-weight: 400;
    font-style: italic;
}
/* light */
@font-face {
    font-family: Frutiger;
    src: url(../fonts/frutiger/FrutigerLTCom-Light.ttf) format('truetype');
    font-weight: 200;
}
/* light + italic */
@font-face {
    font-family: Frutiger;
    src: url(../fonts/frutiger/FrutigerLTCom-LightItalic.ttf) format('truetype');
    font-weight: 200;
    font-style: italic;
}
/* bold */
@font-face {
    font-family: Frutiger;
    src: url(../fonts/frutiger/FrutigerLTCom-Bold.ttf) format('truetype');
    font-weight: 700;
}

html {
    font-size: 10px;
    font-size: 62.5%;  /* 1rem = ~10px */
}

body {
    font-size: 1.4em;   /* ~14px */
    color: #333;
    font-family: Frutiger, arial, verdana, sans-serif;
    font-weight: 200;
    /*background-color: #bbb;
    background-image: url(../images/bg-grey-stripe.gif);*/
    background-color: white;
    background-image: url(../images/bg-grey-stripe-on-transparent.gif);
}

html *
{
    margin: 0;
    padding: 0;
}

#wrapper
{
    width: 960px;
    min-height: 1000px;
    margin: 0 auto;
    padding: 0;
    /*background-image: url(../images/worldskills-australia-logo-watermark.png);
    background-repeat: no-repeat;
    background-position: center top;*/
}


/* Header area */

#header
{
    position: relative;
    padding: 20px 0 0 30px;
    overflow: hidden;
    /*height: 205px;
    height: 167px;*/
    /*background-image: url(../images/main-bg-top.png);
    background-repeat: no-repeat;
    background-position: center bottom;*/
}

#header a#logo
{
    display: block;
    width: 170px;
    height: 150px;
    float: left;
    margin-right: 40px;
}

#header h1
{
    display: none;
    width: 200px;
    float: left;
    padding-top: 30px;
}

#header nav
{
    /*height: 42px;*/
    padding-top: 126px;  /* pushes down from the top of the header */
    padding-right: 20px;
    text-align: right;
}

#header nav ul
{
    margin: 0;
    padding: 0;
    font-size: 0;
    vertical-align: bottom;
}

#header nav ul li
{
    font-size: 14px;
    font-size: 1.4rem;
    display: inline-block;
    background: none;
    padding: 0;
    margin-right: 4px;
    vertical-align: bottom;

    /*display: inline;
    float: left;*/
    /*padding-left: 10px;
    background-image: url(../images/nav-bg-left.png);
    background-repeat: no-repeat;
    background-position: left center;*/
}

/*#header nav ul li span
{
    display: block;
    height: 42px;
    line-height: 42px;
    padding-right: 10px;
    background-image: url(../images/nav-bg-right.png);
    background-repeat: no-repeat;
    background-position: right center;
}*/

#header nav ul li a
{
    display: inline-block;
    margin: 0;
    padding: 0.7em 1em;
    line-height: 1;
    background: rgba(180, 180, 180, 0.6);
    color: #444;
    border: 1px solid #bbb;
    /*-webkit-box-shadow: 0 0 5px 0 rgba(100,100,100,.3);
    box-shadow: 0 0 5px 0 rgba(100,100,100,.3);*/
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;

    /*display: block;
    height: 32px;
    line-height: 32px;
    padding-top: 10px;
    color: #ccc;*/
}

#header nav ul li a:hover
{
    color: #fff; /* #63CEFF; */
    background: rgba(140, 140, 140, 0.6);
    color: #222;
}

#header nav ul li.current
{
    /*background-image: url(../images/nav-bg-left-current.png);*/
}

/*#header nav ul li.current span
{
    background-image: url(../images/nav-bg-right-current.png);
}*/

#header nav ul li.current a
{
    padding: 1.1em 1em;
    background: rgba(255, 255, 255, 0.9);
    color: #666;
    font-weight: bold;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 0 5px 0 rgba(100,100,100,.3);
    box-shadow: 0 0 5px 0 rgba(100,100,100,.3);

    /*color: #333;
    height: 42px;
    line-height: 42px;
    padding-top: 0;*/
}

#header nav ul li.current a:hover
{
    color: #FF290B;
}

#header #login-area
{
    position: absolute;
    top: 0;
    right: 10px;
    width: 370px;  /* 400px - 30px padding */
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    color: #fff;
    font-size: 12px;
    background-image: url(../images/login-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
}

#header #login-area a
{
    color: #63CEFF;
}

#header #login-area a:hover
{
    color: #fff;
}

#header #login-area #login-links
{
    float: right;
}

#header #login-area #login-links a
{
    padding: 0 5px;
}

#header #login-area form
{
    text-align: center;
}

#header #login-area input[type=text], #header #login-area input[type=password]
{
    display: inline;
    float: none;
    width: 110px;  /* 130px - 20px padding */
    height: 24px;
    line-height: 24px;
/*    background-image: url(../images/form-textbox-smaller.png);*/
}

#header #login-area input[type=submit]
{
    display: inline;
    float: none;
    width: 80px;
    /*background-image: url(../images/form-button-small.png);*/
}


/* Main content area */

#main
{
    /*background-image: url(../images/main-bg-middle.png);
    background-repeat: repeat-y;
    background-position: center top;*/
    border: 1px solid #ddd;
    background-color: white;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: 0 0 10px 0 rgba(100,100,100,.3);
    box-shadow: 0 0 10px 0 rgba(100,100,100,.3);
    -webkit-border-radius: 30px 10px;
    border-radius: 30px 10px;
    /*background-color: green;*/
    padding: 30px;
}

#main dl.quick-info
{

}

#main dl.quick-info dt
{
    color: #999;
    margin-bottom: 0.5em;
}

#main dl.quick-info dd
{
    padding-left: 30px;
    margin-bottom: 1em;
}

.social-media-username-list strong {
    display: inline-block;
    min-width: 6em;
}


/* Sidebar */



.sidebar
{
    width: 300px;
    color: #999;
    background-color: #333;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.sidebar-top
{
    display: none;
    /*height: 15px;
    background-image: url(../images/sidebar-bg-top.png);
    background-repeat: no-repeat;
    background-position: center bottom;*/
}

.sidebar-middle
{
    /*background-image: url(../images/sidebar-bg-middle.png);
    background-repeat: repeat-y;
    background-position: center top;
    padding: 1px 20px;*/
    padding: 20px;
}

.sidebar-bottom
{
    display: none;
    /*height: 15px;
    background-image: url(../images/sidebar-bg-bottom.png);
    background-repeat: no-repeat;
    background-position: center top;*/
}

.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4
{
    color: #fff;
    text-shadow: none;
    filter: none;
}

.sidebar a
{
    color: #63CEFF;
}

.sidebar a:hover
{
    color: #fff;
}

aside#sidebar-help form .row
{
    margin: 0;
    padding: 2px 0;
}

aside#sidebar-help form .row label
{
    width: 70px;
    font-weight: normal;
    font-size: 1em;
}

aside#sidebar-help form input[type=text], aside#sidebar-help form input[type=password]
{
    display: block;
    float: left;
    width: 150px;  /* 170px - 20px padding */

    /*background-image: url(../images/form-textbox-small.png);
    background-repeat: no-repeat;
    background-position: left center;*/
}

aside#sidebar-help form textarea
{
    display: block;
    float: left;
    width: 150px;  /* 170px - 20px padding */
    height: 86px;  /* 100px - 14px padding */

    /*background-image: url(../images/form-textarea-small.png);
    background-repeat: no-repeat;
    background-position: left center;*/
}

blockquote.success
{
    /*margin: 15px;
    padding: 10px;
    border: 1px solid #008C23;
    color: #008C23;
    background-color: transparent;
    background-image: url(../images/alpha_green_10.png);*/
    margin: 0 0 1em 0;
    color: #008C23;
}

div.form form.horizontal .row label, form.vertical .row label
{
    display: block;
    height: 24px;
    line-height: 24px;
}

div.form form.horizontal .row label
{
    float: left;
    width: 160px;
    text-align: right;
    margin-right: 10px;
}

div.form form.vertical .row label
{
    float: none;
    width: auto;
    text-align: left;
    margin-right: 0;
}

div.form form.horizontal input[type=submit]
{
    float: left;
}

div.form form.horizontal .row.buttons
{
    padding: 15px 0 15px 170px;
}

input.disabled, select.disabled, textarea.disabled
{
    color: #666;
}

/*

form.dark input[type=text], form.light input[type=text]
{
    height: 24px;
    line-height: 24px;
}

form.dark p, form.light p
{
    margin: 0;
    padding: 2px 0;
}

form.dark p:after, form.light p:after
{
    display: block;
    clear: both;
    content: ".";
    visibility: hidden;
    height: 0;
    line-height: 0;
}

form.dark input[type=text], form.dark input[type=password]
{
    padding: 0 10px;
    border: 1px solid #666;
    color: #fff;
    font-style: italic;
    font-size: 13px;
    background-color: transparent;
    background-image: url(../images/white-bg-translucent-stripe.png);
    background-repeat: repeat;
    background-position: left top;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

form.dark textarea
{
    padding: 7px 10px;
    border: 1px solid #666;
    color: #fff;
    font-style: italic;
    font-size: 13px;
    background-color: transparent;
    background-image: url(../images/white-bg-translucent-stripe.png);
    background-repeat: repeat;
    background-position: left top;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

form.dark input[type=submit], input[type=submit].dark
{
    display: block;
    width: 120px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    border: none;
    color: #fff;
    font-style: normal;
    font-size: 13px;
    text-align: center;
    background-color: transparent;
    background-image: url(../images/form-button-medium.png);
    background-repeat: no-repeat;
    background-position: left center;
}

*/

div.form .simple-detail-list p
{
    margin: 0 0 10px 0;
}

div.form .simple-detail-list p strong
{
    display: block;
    float: left;
    width: 100px;
    margin-right: 10px;
    text-align: right;
}

form span.required
{
    color: #B20000;
}

.successSummary
{
    padding: 7px 7px 12px 7px;
    margin: 0 0 20px 0;
    border: 1px solid #00B200;
    color: #00B200;
    background-color: transparent;
    background-image: url(../images/alpha_green_10.png);
    font-size: 0.9em;
}

div.form .errorSummary, .errorSummary
{
    padding: 7px 7px 12px 7px;
    margin: 0 0 20px 0;
    border: 1px solid #B20000;
    color: #B20000;
    background-color: transparent;
    background-image: url(../images/alpha_red_20.png);
    font-size: 0.9em;
}

div.form .errorMessage
{
    color: #B20000;
    font-size: 0.9em;
}

div.form .errorSummary p, .errorSummary p, .successSummary p
{
    margin: 0;
    padding: 5px;
}

div.form .errorSummary ul
{
    margin: 0;
    padding: 0 0 0 20px;
}

div.form .horizontal .row:after
{
    display: block;
    clear: both;
    content: ".";
    visibility: hidden;
    height: 0;
    line-height: 0;
}




#competition-section-form
{
    margin-bottom: 20px;
}

#person-form label
{
    font-weight: normal;
}

div.form .checkbox input
{
    margin-left: 10px;
}

div.form .checkbox label
{
    display: inline;
    font-weight: normal;
    font-size: 1em;
    padding-left: 5px;
}

form.dark span.required
{
    color: #CA281F;
}

div.form .dark .errorSummary
{
    border: 1px solid #CA281F;
    color: #CA281F;
    background-color: transparent;
    background-image: url(../images/alpha_red_20.png);
}

div.form .dark .errorMessage
{
    color: #CA281F;
}

div.form .light hr,
div.form .dark hr
{
    margin: 15px 10px;
}

div.form .light fieldset,
div.form .dark fieldset
{
    margin: 0 0 20px 0;
    padding: 10px 20px;
    border: 1px solid #aaa;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

div.form .light fieldset legend,
div.form .dark fieldset legend
{
    margin: 0;
    padding: 0 5px;
    font-style: italic;
}

div.form .light blockquote,
div.form .dark blockquote
{
    padding: 10px 12px 0 12px;
    border: 1px solid #aaa;
    color: #333;
    font-style: italic;
    font-size: 13px;
    background-color: transparent;
    /*background-image: url(../images/white-bg-translucent-stripe.png);*/
    background-image: url(../images/alpha_white_30.png);
    background-repeat: repeat;
    background-position: left top;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

form.light .metabox, form.light .metabox .metabox-content,
form.dark .metabox, form.dark .metabox .metabox-content
{
    border: none;
    margin: 0;
    padding: 0;
}

form.light input[type=text], form.light input[type=password], form.light input[type=email], form.light input[type=date],
form.dark input[type=text], form.dark input[type=password], form.dark input[type=email], form.dark input[type=date]
{
}

form.light input[type=text], form.light input[type=password], form.light textarea, form.light input[type=email], form.light input[type=date],
form.dark input[type=text], form.dark input[type=password], form.dark textarea, form.dark input[type=email], form.dark input[type=date]
{
    padding: 0 10px;
    border: 1px solid #aaa;
    color: #333;
    font-style: italic;
    font-size: 13px;
    background-color: transparent;
    /*background-image: url(../images/white-bg-translucent-stripe.png);*/
    background-image: url(../images/alpha_white_30.png);
    background-repeat: repeat;
    background-position: left top;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 24px;
    line-height: 24px;
}

form.light textarea,
form.dark textarea
{
    padding: 7px 10px;
    height: auto;
    line-height: auto;
}

form.light input[type=submit], input[type=submit].light,
form.dark input[type=submit], input[type=submit].dark
{
    display: block;
    float: left;
    width: 120px;
    /*height: 24px;
    line-height: 24px;*/
    padding: 0.4em 0;
    border: none;
    color: #fff;
    font-style: normal;
    font-size: 13px;
    text-align: center;
    background: #555;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    background: -moz-linear-gradient(top,  #666666 0%, #444444 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #666666 0%,#444444 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #666666 0%,#444444 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
    /*background-color: transparent;
    background-image: url(../images/form-button-medium.png);
    background-repeat: no-repeat;
    background-position: left center;*/
}

form.light div.error input[type=text], form.light div.error input[type=password], form.light div.error textarea, form.light div.error input[type=email], form.light div.error input[type=date]
{
    border-color: #B20000;
    color: #B20000;
    background-color: transparent;
    background-image: url(../images/alpha_red_20.png);
}

form.light div.success input[type=text], form.light div.success input[type=password], form.light div.success textarea, form.light div.success input[type=email], form.light div.success input[type=date]
{
    border-color: #008C23;
    color: #008C23;
    background-color: transparent;
    background-image: url(../images/alpha_green_20.png);
}
form.light div.error label:first-child, form.light label.error, form.light span.error
{
    color: #B20000;
}

form.light div.success label:first-child, form.light label.success, form.light span.success, .flash-success.light
{
    color: #008C23;
}





form.dark input[type=text], form.dark input[type=password], form.dark textarea, form.dark input[type=email], form.dark input[type=date]
{
    border: 1px solid #666;
    color: #fff;
    background-image: url(../images/alpha_white_30.png);
    background: rgba(255, 255, 255, 0.3);
}

form.dark input[type=submit], input[type=submit].dark
{
    color: #fff;
    /*background-image: url(../images/form-button-medium.png);*/
    background: #555;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    background: -moz-linear-gradient(top,  #666666 0%, #444444 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #666666 0%,#444444 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #666666 0%,#444444 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
}

form.dark div.error input[type=text], form.dark div.error input[type=password], form.dark div.error textarea, form.dark div.error input[type=email], form.dark div.error input[type=date]
{
    border-color: #CA281F;
    color: #CA281F;
    background-color: transparent;
    background-image: url(../images/alpha_red_20.png);
}

form.dark div.success input[type=text], form.dark div.success input[type=password], form.dark div.success textarea, form.dark div.success input[type=email], form.dark div.success input[type=date]
{
    border-color: #60D96F;
    color: #60D96F;
    background-color: transparent;
    background-image: url(../images/alpha_green_20.png);
}

form.dark div.error label:first-child, form.dark label.error, form.dark span.error
{
    color: #CA281F;
}

form.dark div.success label:first-child, form.dark label.success, form.dark span.success, .flash-success.dark
{
    color: #60D96F;
}



#home-contact-form .captcha-container a
{
    display: block;
    padding-left: 70px;
}

aside#sidebar-help .flash-success
{
    color: #60D96F;
    text-align: center;
}



aside#sidebar-help
{
    float: right;
    margin: 0 0 30px 30px;
}

aside#sidebar-help h3.help
{
    height: 32px;
    line-height: 32px;
    padding-left: 45px;
    margin-bottom: 1.2em;
    background-image: url(../images/icon-help-32.png);
    background-repeat: no-repeat;
    background-position: 3px center;
}

aside#sidebar-help h4.email, aside#sidebar-help h4.phone
{
    height: 21px;
    line-height: 21px;
    padding-left: 33px;
    margin: 1.5em 0;
    background-repeat: no-repeat;
    background-position: 3px center;
    font-size: 1em;
}

aside#sidebar-help h4.email
{
    background-image: url(../images/icon-email-21.png);
}

aside#sidebar-help h4.phone
{
    background-image: url(../images/icon-phone-21.png);
}

aside#sidebar-help .sidebar-middle div
{
    margin-bottom: 0.5em;
}

aside#sidebar-help .sidebar-middle form div
{
    margin: 0;
    padding: 2px 0;
}

aside#sidebar-help .sidebar-middle form input, aside#sidebar-help .sidebar-middle form textarea, aside#sidebar-help .sidebar-middle form select
{
    margin: 0;
}

aside#sidebar-help form .captcha-container a
{
    padding-left: 70px;
}

aside#sidebar-help form .buttons
{
    padding: 15px 0 10px 70px;
}

#content.with-sidebar
{
    width: 570px;  /* 900px - 330px sidebar */
}

body.person_admin #content.with-sidebar, body.competitionSection_viewMark #content.with-sidebar
{
    width: auto;
}

#operations.sidebar
{
    float: right;
    margin: 0 0 30px 30px;
}

#operations.sidebar .portlet-title
{
    height: 32px;
    line-height: 32px;
    padding-left: 45px;
    margin-bottom: 1.2em;
    background-image: url(../images/icon-power-32.png);
    background-repeat: no-repeat;
    background-position: 3px center;
    color: #fff;
    font-size: 1.2em;
}



.view>div, .view .person-row, .view .event-row, .view .roleType-row
{
    background-color: transparent;
    background-image: url(../images/alpha_white_30.png);
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.view>div, .view .event-row, .view .roleType-row
{
    padding: 5px 10px;
}

.view .person-row .profile-photo
{
    display: block;
    width: 100px;
    height: 100px;
    line-height: 96px;
    vertical-align: middle;
    float: left;
    margin: 0 15px 0 0;
    padding: 0;
    border: 1px solid #ccc;
    text-align: center;
}

.view .person-row .profile-photo img
{
    max-width: 100px;
    max-height: 100px;
}

.view>div span.info, .view .person-row span.info, .view .event-row span.info
{
    display: block;
    margin-bottom: 2px;
}

.view>div span.name, .view .person-row span.name, .view .event-row span.name, .view .roleType-row span.name
{
    font-size: 1.2em;
    margin-bottom: 10px;
}

.view>div span.name, .view .event-row span.name, .view .roleType-row span.name
{
    margin-bottom: 5px;
}

.view>div span.note, .view .event-row span.note
{
    margin-bottom: 5px;
}

.view>div span.active, .view .person-row span.active, .view>div span.inactive, .view .person-row span.inactive
{
    float: right;
    width: 100px;
    padding: 3px 0;
    text-align: center;
    color: #3a3;
    border: 1px dotted #bfb;
    background-color: transparent;
    background-image: url(../images/alpha_white_30.png);
}

.view>div span.inactive, .view .person-row span.inactive
{
    color: #a33;
    border: 1px dotted #fbb;
}

.status-container
{
    float: right;
    width: 102px; /* 100px + 2px border */
    text-align: center;
    background-color: transparent;
    background-image: none;
}

.view>div .status-container span.active, .view .person-row .status-container span.active, .view>div .status-container span.inactive, .view .person-row .status-container span.inactive
{
    float: none;
    width: 100px;
    margin-bottom: 5px;
    padding: 3px 0;
    text-align: center;
}

.view>div .status-container span.pending, .view .person-row .status-container span.pending
{
    float: none;
    width: 100px;
    padding: 3px 0;
    text-align: center;
    color: #999;
    border: 1px dotted #999;
    background-color: transparent;
    background-image: url(../images/alpha_white_30.png);
}

.view>div.competitionSectionMark-row span.name
{
    font-size: 1em;
    color: #666;
    padding: 4px 0 10px 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}

.view>div.competitionSectionMark-row span.mark label
{
    display: inline;
    margin-right: 5px;
    font-weight: normal;
    font-size: 1em;
    line-height: 24px;
}

.view>div.competitionSectionMark-row span.mark input
{
    display: inline;
    margin: 0 5px 0 0;
    width: 40px;
    text-align: center;
}

.view>div.competitionSectionMark-row span.possible-mark
{
    display: inline;
    font-style: italic;
}

.view>div.competitionSectionMark-row span.errorMessage
{
    margin-left: 20px;
}

.view>div.deduction
{
    color: #900;
}

.view>div.competitionSectionMarkTotal-row .label
{
    display: block;
    float: left;
    width: 120px;
    margin-right: 5px;
}

.view>div.competitionSectionMarkTotal-row .total
{
    margin-top: 10px;
    padding: 10px 0 10px 0;
    border-top: 1px solid #ccc;
    font-weight: bold;
}

.view>div.competitionSectionMarkTotal-row span.possible-mark
{
    font-style: italic;
}



#main .breadcrumbs
{
    margin-bottom: 2em;
}

.google-maps-container
{
    width: 425px;  /* map is 425px */
    float: right;
    margin: 0 50px 15px 15px;
    text-align: right;
}

.google-maps-container a
{
    text-decoration: none;
    color: #FF290B;
    font-size: small;
}

.google-maps-container a:hover
{
    color: #831306;
}

.captcha-container
{
    padding: 5px 0;
}

.captcha-container img
{
    margin-right: 10px;
    border: 1px solid #ccc;
}

#contact-form .buttons
{
    padding: 10px 0 20px 0;
}

.person_view .detail-view .profile-photo img
{
    display: block;
    max-width: 250px;
    max-height: 250px;
    margin: 0 0 0 0;
    border: 1px solid #ccc;
}

.person_update .profile-photo img
{
    display: block;
    max-width: 100px;
    max-height: 100px;
    margin: 0 0 0 0;
    border: 1px solid #ccc;
}

.competitionSection_enterMark h1, .competitionSection_viewMark h1
{
    margin-bottom: 10px;
}

.competitionSection_enterMark h2, .competitionSection_viewMark h2
{
    margin-bottom: 30px;
}

.competitionSection_enterMark .form, .competitionSection_viewMark .form
{
    margin-bottom: 20px;
}



/* Footer area */

#footer
{
    /*background-image: url(../images/main-bg-bottom.png);
    background-repeat: no-repeat;
    background-position: center top;
    padding: 45px 0 30px 0;*/
    padding: 20px 0 30px 0;
    color: #666;
    font-size: 0.8em;
}

#footer a
{
    color: #666;
}

#footer a:hover
{
    color: #333;
}

p#copyright, p#developed-by
{
    width: 450px;
    float: left;
    margin: 0;
    padding: 0;
}

p#copyright
{
    padding-left: 30px;
}

p#developed-by
{
    padding-right: 30px;
    text-align: right;
}


/* General styles */

a
{
    text-decoration: none;
    color: #FF290B;
}

a:hover
{
    color: #831306;
}

a img
{
    border: none;
}

p, ul, ol, h1, h2, h3, h4, h5, h6
{
    margin-bottom: 1em;
}

ul, ol
{
    list-style-position: outside;
    padding-left: 30px;
}

h1, h2, h3, h4
{
    font-weight: normal;
    /*text-shadow: 0 0 4px #808080;
    filter: dropshadow(color=#808080, offx=0, offy=0);*/
}

h1
{
    font-size: 30px;
}

h2
{
    font-size: 1.4em;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

.extra-margin-bottom
{
    /*margin-bottom: 1.2em;*/
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #444;
}

.or {
    width: 10em;
    background: url(../images/alpha_black_30.png) repeat-x center center;
    font-style: italic;
    color: #888;
    color: rgba(0,0,0,0.5);
    font-size: 0.9em;
    text-align: center;
}

.or span {
    padding: 0 0.5em;
    background: #bbb url(../images/main-bg-middle.png) repeat-y center top;
    font-weight: bold;
}

.note
{
    font-style: italic;
    color: #666;
    font-size: 0.9em;
}

.notice
{
    padding: 10px 10px 5px 10px;
    margin: 15px;
    border: 1px solid #666;
    color: #333;
    background-color: transparent;
    background-image: url(../images/alpha_black_10.png);
}

.warning
{
    background-image: url(../images/icon-warning-48.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 70px;
}

.notice.warning
{
    /*background-image: url(../images/icon-warning-48.png), url(../images/alpha_black_10.png);
    background-repeat: no-repeat, repeat;
    background-position: 10px center, left top;*/
    background:
        url(../images/icon-warning-48.png) 10px center no-repeat,
        url(../images/alpha_black_10.png) left top repeat;
    padding-left: 70px;
}

.no-multiplebgs .notice.warning
{
    background-image: url(../images/icon-warning-48.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 70px;
}

h4.warning
{
    background-image: url(../images/icon-warning-16.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}

blockquote.fixed-height
{
    height: 16em;
    overflow: auto;
}

/* Multi-level ordered lists (e.g. terms and conditions) */

/*ol.multilevel { counter-reset: item }
ol.multilevel li { display: block }
ol.multilevel li:before { content: counters(item, ".") " "; counter-increment: item }*/

.multilevel-list ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

.multilevel-list ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

.multilevel-list ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}

.multilevel-list ol li ol > li {
  margin: 0;
}

.multilevel-list ol li ol > li:before {
  content: counters(item, ".") " ";
}






table.detail-view
{
    background-color: transparent;
}

table.detail-view tr.odd
{
    background-color: transparent;
    background-image: url(../images/alpha_white_30.png);
}

table.detail-view tr.even
{
    background-color: transparent;
    background-image: url(../images/alpha_black_10.png);
}

table.detail-view tr.spacer, table.detail-view tr.spacer th, table.detail-view tr.spacer td
{
    background-color: transparent;
    background-image: none;
    border: none;
}

table.detail-view span.null
{
    color: #d66;
    font-style: italic;
}

div.list-view
{

}

div.list-view .summary, div.grid-view .summary
{
    background-color: transparent;
    background-image: url(../images/alpha_white_30.png);
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin-bottom: 1.5em;
    font-size: 0.9em;
}

div.grid-view
{
    background-color: transparent;
}

div.grid-view table.items
{
    background-color: transparent;
}

div.grid-view table.items thead th
{
    background-color: transparent;
    background-image: url(../images/alpha_black_70.png);
    background-repeat: repeat;
    padding: 3px 6px;
    color: #ddd;
    font-size: 1em;
    font-weight: normal;
}

div.grid-view table.items thead tr
{
    background-color: transparent;
    background-image: url(../images/alpha_white_30.png);
    background-repeat: repeat;
}

div.grid-view table.items tr.odd
{
    background-color: transparent;
    background-image: url(../images/alpha_black_10.png);
    background-repeat: repeat;
}

div.grid-view table.items tr.odd:hover
{
    background-image: url(../images/alpha_black_20.png);
}

div.grid-view table.items tr.even
{
    background-color: transparent;
    background-image: url(../images/alpha_white_30.png);
    background-repeat: repeat;
}

div.grid-view table.items tr.even:hover
{
    background-image: none;
}

#person-grid.grid-view
{
    clear: right;
}


div.grid-view #competitor-marks
{
    border-collapse: collapse;
    border: 1px solid #444;
    table-layout: fixed;
}

div.grid-view #competitor-marks thead th
{
    border-left: 1px dotted #666;
    padding: 6px 8px;
    color: #eee;
    font-size: 14px;
    font-weight: normal;
}

div.grid-view #competitor-marks thead th:first-child
{
    border-left: none;
}

div.grid-view #competitor-marks th.competitor-mark
{
    border-top: 1px dotted #666;
    font-size: 12px;
    color: #ccc;
}

div.grid-view #competitor-marks thead th .possibleMark
{
    display: block;
    font-size: 11px;
    color: #eee;
}

div.grid-view #competitor-marks tbody td
{
    border-left: 1px dotted #444;
    padding: 3px 8px;
}

div.grid-view #competitor-marks tbody td:first-child
{
    border-left: none;
}

div.grid-view #competitor-marks tbody td.error
{
    color: #B20000;
}

div.grid-view #competitor-marks .competitor-name
{
    min-width: 150px;
}

div.grid-view #competitor-marks .competitor-rank
{
    width: 30px;
    text-align: center;
}

div.grid-view #competitor-marks .competitor-totalMark
{
    width: 40px;
    text-align: center;
}

div.grid-view #competitor-marks .competitor-mark
{
    text-align: center;
    max-width: 150px;
}

a.export-link-pdf
{
    background: url(../images/icon-page-white-acrobat.png) 4px center no-repeat;
    padding-left: 28px;
}

a.export-link-excel
{
    background: url(../images/icon-page-white-excel.png) 4px center no-repeat;
    padding-left: 28px;
}







/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }








/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

.clear
{
    clear: both;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


@media screen and (max-width: 960px) {
    html * {
        box-sizing: border-box;
    }

    #wrapper {
        width: 100%;
    }

    /* Header */
    #wrapper #header {
        padding: 50px 0 0 0;
        overflow: auto;
    }

    #wrapper #header a#logo {
        float: none;
        margin: 0 auto 25px auto;
    }

    #wrapper #header nav {
        padding: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    #wrapper #header nav ul li a {
        padding: 1em 1.2em;
        margin: 0 0.4em 0.6em 0;
        border-radius: 8px;
    }

    #wrapper #header nav ul li.current a {
        /*padding: 1em 1.2em;*/
    }

    #wrapper #header #login-area {
        right: 0;
        width: auto;
        padding: 0;
    }

    #wrapper #header #login-area input[type=text],
    #wrapper #header #login-area input[type=password] {
        width: 33%;
        margin: 0 2% 0 0;
    }

    #wrapper #header #login-area input[type=submit] {
        width: 22%;
        margin: 0;
    }


    /* Main */
    #wrapper #main {
        margin: 0 0.5em;
        padding: 2em 1em;
    }

    #wrapper aside#sidebar-help {
        float: none;
        width: auto;
        margin: 0 0 20px 0;
    }

    #wrapper .form fieldset {
        padding: 15px 5px;
        border: none;
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    #wrapper .form legend {
        display: block;
        width: 100%;
        padding: 0.3em 0.8em;
        background-color: #444;
        color: white;
    }

    #wrapper .form input[type=text],
    #wrapper .form input[type=password],
    #wrapper .form input[type=email],
    #wrapper .form input[type=date],
    #wrapper .form textarea,
    #wrapper .form select {
        max-width: 100%;
        width: 100%;
    }

    #wrapper .google-maps-container {
        max-width: 100%;
        width: 100%;
        margin: 0 0 20px 0;
        float: none;
    }

    #wrapper .google-maps-container iframe {
        max-width: 100%;
        width: 100%;
    }


    /* Footer */
    #wrapper #footer #copyright,
    #wrapper #footer #developed-by {
        width: auto;
        float: none;
        margin-bottom: 0.5em;
        padding: 0;
        text-align: center;
    }
}