/*
    CSS for website
*/
body > header {
    margin: 0 -4px;
    padding: 0;
    height: 80px;
    position: relative;
}

body > header h1 {
    background: url(/images/colorizeit2/logo.png) 0 3px no-repeat;
    color: #f8f8f8;
    font-size: 11px;
}
body > header h1, body > header h1 a {
    display: block;
    margin: 0;
    padding: 0;
    width: 235px;
    height: 80px;
}
body > header nav {
    display: inline-block;
    position: absolute;
    top: 44px;
    right: 4px;
    font-size: 12px;
    line-height: 1em;
}
body > header nav#nav-links {
	right: 0;	
}
#nav-links > span { display: none !important; }

body > header nav#search {
    position: absolute;
    bottom: auto;
    top: 0;
    right: 142px;
    background: url(/images/colorizeit2/search.png) 0 0 no-repeat;
    width: 192px;
    height: 31px;
    padding: 6px 0 0 30px;
}
body > header .nogplus + nav#search {
	right: 68px;
}
body > header nav#search:hover, body > header nav#search.focused {
    background-position: 0 -40px;
}
#search form { 
    display: inline; 
    margin: 0;
    padding: 0;
}
#search input {
    margin: 0;
    border-width: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    background: transparent;
    height: 16px;
    width: 170px;
    line-height: 1em;
    font-family: Arial;
    font-size: 13px;
    color: #dae1ed;
    outline-style: none;
    -webkit-appearance: none;
}
#search input:hover, #search input:focus {
    color: #fff;
}

body > header nav#nav-social {
	top: 10px;
    margin: 0;
    padding: 0;
    right: 0;
    overflow: hidden;
}
nav#nav-social a, nav#nav-social a:visited {
	float: left;
    text-decoration: none;
    border-bottom-width: 0;
    width: 18px;
    height: 18px;
    margin: 0 3px 0 0;
    padding: 0;
    background: url(/images/colorizeit/social.png) -20px 0 no-repeat;
}
nav#nav-social a:hover, nav#nav-social a:active {
    background-position: -20px -20px;
}

nav#nav-social a.twitter { background-position: -60px 0; }
nav#nav-social a.rss { background-position: -40px 0; }

nav#nav-social a.rss:hover, nav#nav-social a.rss:active { background-position: -40px -20px; }
nav#nav-social a.twitter:hover, nav#nav-social a.twitter:active { background-position: -60px -20px; }

#header-g {
    position: absolute;
    top: 8px;
    right: 180px;
    text-align: right;
}

#nav-social .g {
    float: right;
    margin-top: 2px;
}

body > footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/*
    Index page
*/
.mainpage-browse-left {
    float: left;
    width: 49%;
}
.mainpage-browse-right {
    float: right;
    width: 49%;
}
.mainpage-browse dl.form dt { width: 70px; }
.mainpage-browse dl.form dd { margin-left: 75px; }

#mainpage-sample {
    position: absolute; 
    right: 30px; 
    top: 50px;
}
#mainpage-slider {
	position: absolute;
	right: 0;
	top: 0;
}
#mainpage-download {
    position: absolute;
    right: 0;
    margin: 0; /* 0 0 4px 20px; */
    padding: 0; /* 5px 0; */
    top: 290px;
    width: 368px; 
    text-align: center;
}
#mainpage-tutorial {
    position: relative; 
    margin-top: 0; 
    padding-right: 370px; 
    min-height: 290px;
    overflow: hidden;
}

#mainpage-slider {
    display: block;
    white-space: nowrap;
    margin: 0; /* 0 0 0 5px; */
    padding: 0; /* 0 0 0 3px; */
/*    background: url("/images/colorizeit2/src_arrow.png") no-repeat scroll 37px 37px transparent; */
}
#mainpage-slider p {
	display: none;
    margin: 0; 
    padding: 0; 
    text-align: center; 
    height: 20px; 
    color: #999;
}
#mainpage-slider div {
    display: none; /* inline-block; */
    width: 32px;
    height: 40px;
    border-width: 0;
    margin: 0;
    padding: 0;
    background: url("/images/colorizeit2/src_sample.png") no-repeat scroll 0 0 #1e438e;
}
#mainpage-slider span {
    display: inline-block;
    width: 368px;
    height: 44px;
    margin: 0; /* 0 0 0 11px; */
    padding: 0;
    border-width: 0;
    background: url("/images/colorizeit2/slider_handle.png") no-repeat scroll 180px 0, url("/images/colorizeit2/slider_bg.png") no-repeat scroll 0 0, url("/images/colorizeit2/slider_palette.png") no-repeat scroll -36px 4px transparent;
    transition: background-position 0.45s ease;
    -webkit-transition: background-position 0.45s ease;
    -moz-transition: background-position 0.45s ease;
    -o-transition: background-position 0.45s ease;
    -ms-transition: background-position 0.45s ease;
}

#mainpage-sample-click {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
}
#mainpage-sample-click span {
    color: #1e438e;
    font-size: 16px;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;
    -moz-text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;
    -webkit-text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;
    line-height: 1.4em;
    background: rgba(244, 244, 244, 0.7);
    display: block;
    padding: 90px 35px 0;
}

p.latest-news span { color: #999; }
p.latest-news span:first-child { color: #1e438e; }

#random-refresh {
    transition: color 0.5s ease;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
    text-align: right;
}
#random-refresh.loading { 
    color: rgba(255, 255, 255, 0.5) !important; 
    border-bottom-width: 0 !important;
}

/*
    Transitions
*/
#mainpage-sample, #mainpage-slider, #mainpage-download {
    opacity: 0;
    transform: translate(1000px, -50px) scale(0.25, 0.25);
    -moz-transform: translate(1000px, -50px) scale(0.25, 0.25);
    -webkit-transform: translate(1000px, -50px) scale(0.25, 0.25);
    -o-transform: translate(1000px, -50px) scale(0.25, 0.25);
    -ms-transform: translate(1000px, -50px) scale(0.25, 0.25);
}
body.transform #mainpage-sample, body.transform #mainpage-slider, body.transform #mainpage-download { 
    transition-property: transform, opacity;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
    -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
    -moz-transition-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
    -o-transition-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
    -ms-transition-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
}
body.index-transform2 #mainpage-slider, body.index-transform4 #mainpage-sample, body.index-transform3 #mainpage-download {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
}

/*
    File upload
*/
.xml-results span { color: #dd225f; }

/*
    Subscription
*/
.warning {
    padding: 20px;
    text-align: center;
    border-color: #DDA6B7;
}

section.sub {
    padding: 4px;
    margin-top: 10px;
    position: relative;
}
section.sub-expired {
    border-color: #dda6b7;
}
section.sub > dl.form { 
    margin: 0; 
}

section.sub h1 {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.3em;
    color: #1e438e;
    margin: 5px 3px;
    text-shadow: rgba(128, 128, 128, 0.1) 2px 3px 1px;
    -moz-text-shadow: rgba(128, 128, 128, 0.1) 2px 3px 1px;
    -webkit-text-shadow: rgba(128, 128, 128, 0.1) 2px 3px 1px;
}
/* section.sub-active h1 { color: #469f1a; }
section.sub-expired h1 { color: #dd225f; } */

section.sub p.sample-html { margin: 0 4px; }
section.sub p.status-html { 
    margin: 0 4px 4px; 
    color: #DD225F;
}
section.sub p.status-html a, section.sub p.status-html a:visited { 
    color: #c8901f;
    text-decoration: underline;
}
section.sub p.status-html a:hover { 
    color: #469F1A;
    text-decoration: underline; 
}
section.sub pre {
    margin: 2px 0 4px;
    min-height: 0;
}
section.sub dl {
    margin: 0;
    padding: 0;
}
section.sub dt {
    margin: 0;
    padding: 1px 3px;
    float: left;
    clear: left;
    display: block;
    width: 150px;
}
section.sub dd {
    margin: 0;
    padding: 1px 3px;
    display: block;
    float: left;
}
section.sub .progress-bar {
    margin: 0;
}

section.sub table.status {
    margin: 0;
    padding: 0;
    float: right;
    clear: right;
}
section.sub table.status td {
    margin: 0;
    padding: 1px;
}
section.sub-active table.status td {
    color: #469f1a;
}
section.sub-expired table.status td {
    color: #dd225f;
}
section.sub table.status td:first-child { 
    text-align: right; 
    color: #888;
}

section.sub table.downloads {
    margin: 0;
    padding: 0;
    border-width: 0;
    width: 100%;
}
section.sub table.downloads td {
    margin: 0;
    padding: 1px;
}
section.sub table.downloads td.first { width: 150px; }
section.sub table.downloads td.second { width: 185px; }
section.sub table.downloads td.hostname { padding-bottom: 4px; }
section.sub table.downloads td.limit { padding-bottom: 6px; }
section.sub table.downloads td.buttons { 
    text-align: center;
    padding: 10px 5px 5px 5px;
}

p.sub-add { 
    clear: both;
    padding-top: 10px; 
}

table.sub-tutorial { border-width: 0; }
table.sub-tutorial td { 
    color: #444; 
    font-size: 12px; 
    padding: 0; 
    text-align: left; 
}
table.sub-tutorial p { margin: 0; padding: 2px 3px; }

table.sub-tutorial .url, .sub-points .tutorial-explanation { color: #888; }
table.sub-tutorial span { color: #dd225f; border-bottom: 1px dotted #dd225f; }
table.sub-tutorial span.span2 { color: #c8901f; border-bottom: 1px dotted #c8901f; }

table.sub-tutorial td.left, table.sub-tutorial td.right { width: 33%; }
table.sub-tutorial td.empty { background-color: transparent; border-width: 0; }

ul.sub-points, ol.sub-points {
    margin: 6px 0;
}
ul.sub-points li, ol.sub-points li {
    margin: 4px 0;
    line-height: 1.3em;
}
.sub-points li > p {
    margin: 3px 0;
}

table.sub-table-explain {
    width: 100%;
    margin: 0;
}
table.sub-table-explain td {
    margin: 0;
    padding: 4px;
    text-align: left;
}
table.sub-table-explain td.first { width: 250px; padding: 0; }

dd.sub-packages a { 
    margin-top: 8px;
}
dl.form dd.sub-packages p {
    font-size: 12px;
    color: #666;
    margin-left: 16px;
    margin-bottom: 4px;
    padding: 0;
}
dl.form dd.sub-packages p.form-error { 
    padding: 4px; 
    color: #444;
}
dl.form dd.sub-packages p span { color: #888; }

div.sub-explain {
    padding-left: 20px;
    padding-right: 10px;
    color: #666;
}
dl.form + div.sub-explain { margin-top: -10px; }
div.sub-explain p:first-child { margin-top: 0; }
div.sub-explain .important { 
    color: #dd225f; 
    background: rgba(255, 255, 255, 0.5);
    padding: 2px 4px;
    font-size: 12px;
    border: solid 1px #ddd;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
div.sub-explain .important:hover { border-color: #a2aec7; }

td.adv-sub-buttons { line-height: 34px; }

#editor-scheme {
    padding: 4px;
    line-height: 1.3em;
    color: #888;
}
#editor-scheme span { color: #000; }

/*
    Progress bar
*/
.progress-bar {
    clear: both;
    display: block;
    text-align: center;
    margin: 8px auto;
    padding: 4px 0;
    font-size: 12px;
    color: #444;
    text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 2px;
    -moz-text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 2px;
    -webkit-text-shadow: rgba(255, 255, 255, 0.3) 1px 1px 2px;
    background-image: url(/images/colorizeit/progress.png), url(/images/colorizeit/progress.png);
    background-position: 0 center, 0 center;
    border: solid 2px #d3d3d3;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
dl.form dd.progress-bar {
    clear: none;
    font-size: 11px;
    margin-bottom: 4px;
    padding: 2px 0;
}

/* 
    Big headers 
*/
section.big-header {
	margin-top: 16px;
}
section.big-header > h1 {
    text-align: left;
    margin: 10px 10px 5px;
    padding: 7px 0 0;
    line-height: 1em;
    height: 26px;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    background: url(/images/colorizeit/shadow.png) 50% 21px no-repeat, url(/images/colorizeit2/headers.png) 0 -175px repeat-x;
    background-size: 100% 10px, auto auto;
    -webkit-background-size: 100% 10px, auto auto;
    -moz-background-size: 100% 10px, auto auto;
    -o-background-size: 100% 10px, auto auto;
    text-shadow: rgba(128, 128, 128, 0.2) 2px 3px 1px;
    -moz-text-shadow: rgba(128, 128, 128, 0.2) 2px 3px 1px;
    -webkit-text-shadow: rgba(128, 128, 128, 0.2) 2px 3px 1px;
}
section.big-header > h1:before, section.big-header > h1:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	background: url(/images/colorizeit2/headers.png) 0 -105px no-repeat;
}
section.big-header > h1:before { 
	left: -10px; 
}
section.big-header > h1:after { 
	right: -10px; 
	background-position: 0 -140px;
}

section.big-header-0 > h1 {
    background: url(/images/colorizeit/shadow.png) 50% 21px no-repeat, url(/images/colorizeit2/headers.png) 0 -70px repeat-x;
}
section.big-header-0 > h1:before { background-position: 0 0; }
section.big-header-0 > h1:after { background-position: 0 -35px; }

section.big-header-2 > h1 {
    background: url(/images/colorizeit/shadow.png) 50% 21px no-repeat, url(/images/colorizeit2/headers.png) 0 -280px repeat-x;
}
section.big-header-2 > h1:before { background-position: 0 -210px; }
section.big-header-2 > h1:after { background-position: 0 -245px; }

section.big-header-3 > h1 {
    background: url(/images/colorizeit/shadow.png) 50% 21px no-repeat, url(/images/colorizeit2/headers.png) 0 -385px repeat-x;
}
section.big-header-3 > h1:before { background-position: 0 -315px; }
section.big-header-3 > h1:after { background-position: 0 -350px; }

section.big-header > h1 span, section.big-header > h1 a {
    display: inline-block;
    float: right;
    padding-top: 1px;
    font-size: 12px;
    line-height: 1.2em;
    color: rgba(255, 255, 255, 0.9);
    font-weight: normal;
    text-shadow: none;
    -moz-text-shadow: none;
    -webkit-text-shadow: none;
}
section.big-header > h1 a, section.big-header > h1 a:visited {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-bottom: dotted 1px rgba(255, 255, 255, 0.8);
}
section.big-header > h1 a:hover, section.big-header > h1 a:active {
    color: #fff;
    text-decoration: none;
    border-bottom: solid 1px #fff;
}

section.big-header h1 a.rss, section.big-header h1 a.rss:visited, section.big-header h1 a.rss:hover, section.big-header h1 a.rss:active {
    text-decoration: none;
    border-bottom-width: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 8px;
    background: url(/images/colorizeit/social.png) 0 0 no-repeat;
}
section.big-header h1 a.rss:hover, section.big-header h1 a.rss:active {
    background-position: 0 -20px;
}
section.big-header h1 a.refresh { margin-left: 8px; }

/*
    Arrows
*/
a.arrow-right, a.arrow-up {
    background: url(/images/colorizeit/arrow_right.gif) 0 50% no-repeat;
    padding-left: 10px;
    transition: background-position 0.25s ease;
    -webkit-transition: background-position 0.25s ease;
    -moz-transition: background-position 0.25s ease;
    -o-transition: background-position 0.25s ease;
    -ms-transition: background-position 0.25s ease;
}
a.arrow-up { background-image: url(/images/colorizeit/arrow_up.gif); }
a.arrow-right:hover, a.arrow-up:hover { background-position: 3px 50%; }


/*
    Browser categories
*/
.content-sidebar section.big-header .pagination { padding-right: 10px; }