/* -------- Base styles -------- */

* {
	-moz-box-sizing : border-box;
	-ms-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
}

body { 
    font-family: Arial,Verdana,sans-serif; 
    font-size: 16px;
    background-color: #f5fdff; /* Compensate for browsers with other background colors */
    background-image:url('images/backgroundblue.jpg'); /* NEED BETTER DIRECTORY TO KEEP THIS IN */
    background-repeat: repeat-x;
    /* background-attachment: fixed; /* Keep the clouds visible when scrolling */ */
}

a {
	text-decoration : none;
	color : black;
}

a:hover {
	text-decoration : underline;
}


h1 {
	font-size : 32px;
	margin-top : 20px;
	margin-bottom : 30px;
}

h1a {
	font-size : 32px;
	margin-top : 20px;
	margin-bottom : 6px;
}

h2 {
  font-size : 27px;
  margin-top : 24px;
  margin-bottom: 6px;
}

h3 {
  font-size: 22px;
  margin-top : 12px;
}

h4 {
	font-size: 16px;
	margin-top: 8px;
}

h5 {
	font-size : 14px;
}

p {
  margin-top : 16px;
  margin-bottom : 16px;
}

p1 {
  margin-bottom : 16px;
}

a:link {color: #41A8F5}
a:visited {color: #41A8F5}
a:hover {color: #ed0}
li a:active {color: #00f}  

img.alpha, img#overlay { behavior: url("/static/iepngfix.htc") }

.left {
    float: left;
}
.right {
    float: right;
}


/* -------- Picture list -------- */

ul.pictures {
	margin-top : 35px;
	width:900px
}

ul.pictures li {
	display : inline-block;
	margin-right : 40px;
	margin-bottom : 40px;
}

ul.pictures img {
	width : 100px;
	border : 1px solid white;
}

ul.pictures img:hover {
	border : 1px solid #41A8F5;
}


/* -------- Home page -------- */

#new {
	margin-top : 30px;
	width: 700px;
}
#new li {
	margin-left : 20px;
	height : 80px;
	width : 250px;
	display: -moz-inline-stack;
	display : inline-block;
}

#medrectangle {
	margin-top : 10px;
	float : right;
}

#medrectangle h2 {
    margin: 5px 0px;
}

#skyscraper {
	float: right;
}

#logotype-container {
    width:728px;
    height:90px;
    display:inline-block;
    text-align:center;
}

#logo-container-right {
    width:200px;
    height:90px;
    display:inline-block;
    text-align:right;
}


/* -------- Main skeleton -------- */

#container {
	width: 100%;
	overflow: hidden;
}

#topbar {
    height:33px;
    text-align: left;
    font-size:20px;
    font-weight:900;
    color: #e3e3e3;
    background-color: #45B8FF;
    -moz-box-shadow: 0px 1px 5px #000;
    -webkit-box-shadow: 0px 1px 5px #000;
    text-shadow: 0px 1px 1px #333333;
    width:100%;
    margin: 0 0 20px;
    top:0;
    padding: 5px 0px 5px 5px;
}

#topbar p {
    margin:0px;
    text-shadow: 0px 1px 1px #333333;
}

#topbar a {
    color: #e3e3e3;
    text-shadow: 0px 1px 1px #3333;
}

#topbar .right{
    padding-right: 10px;
}
#content {
	width : 1080px;
	height : 100%;
	margin : 10px auto 0px;
	position : relative;
	/* border : 1px solid red; */
}

#main {
    min-height:800px;
}

#main-center {
	position : relative;
	left : 0;
	top : 0;
	float : left;
	width : 825px;
}

#header {
	margin-bottom : 5px;
}

#side-bar {
	width : 160px;
	float : right;
	margin-right : 5px;
}

#rightrail {
	position: absolute;
	top: 110px; /* Match the margin-top of content */
	right: 0px; /* Always visible on the right hand side */
	width: 160px; /* Fixed width */
}


/* -------- Patterns -------- */

#pattern-list {
	display : block;
	width : 140px;
}

#pattern-list li {
	float : left;
	display : block;
	width : 64px;
	height : 64px;
	cursor : crosshair;
	overflow : hidden;
	background-position : 0px 0px;
}

#pattern-list li img {
	width : 64px;
	height : 64px;
	display : none;
}

#pattern-list li.active-pattern {
	border : 2px inset rgb(64,64,64);
	*width : 60px;
	*height : 60px;
	background-position : -2px -2px;
}


/* -------- Palette -------- */

#palette-container {
	width : 140px;
	float : left;
	margin-right : 0px;
	margin-bottom : 5px;
	display : block;
}

#palette-container span {
	display : block;
	float : left;
	height : 17px;
	width : 17px;
	cursor : crosshair;
	line-height : 0px;
	font-size : 0px;
}

#palette-container span.hover {
	border : 2px inset white;
}

#palette-container span.active-color {
	border : 2px inset black;
}

#palette-container span.active-color {
	*width : 13px;
	*height : 13px;
}

#palette-container span.hover {
	*width : 13px;
	*height : 13px;
}

#palette-container span {
	display : block;
	float : left;
	height : 32px;
	width : 32px;
	cursor : crosshair;
	line-height : 0px;
	font-size : 0px;
}

#palette-container span.active-color, #palette-container span.hover {
	*width : 28px;
	*height : 28px;
}


/* -------- Button bar -------- */

#button-container {
	position : relative;
	left : 0px;	
	top : 0px;
	width : 830px;
	height : 25px;
	margin-bottom : 5px;
	overflow : hidden;
}

#button-container a {
	color : white;
	font-family : "arial black";
	font-size : 14px;
	display : block;
	float : left;
	width : 160px;
	*width : 158px;		/* IE6+7 */
	border : 1px solid black;
	margin-right : 6px;
	-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	border-radius : 5px;
	text-align : center;
	background-color : #4bb7f7;
	padding : 2px 0;
	text-transform : uppercase;
}

#button-container a:hover {
	background-color : white;
	color : #4bb7f7;
	text-decoration : none;
}

#button-list li {
	display : inline;
}


/* -------- Coloring area -------- */

#coloring-container {
	width : 825px;
	position : relative;
	left : 0;
	top : 0;
	overflow : hidden;
	padding-top : 20px;
	/* border : 1px solid green; */
}

#loader {
	margin-top : 120px;
	position : absolute;
	left : -21px;
	z-index : 1000;
}

#picture-container {
	background-color : white;
	position : relative;
	left : 0;
	top : 0px;
	margin-left : 50%;
	border : 1px dashed rgb(200,200,200);
	overflow : hidden;
}

#picture-overlay {
	position : relative;	
	z-index : 11;
	cursor : crosshair;
}

#canvas-color, .picture-region {
	z-index : 10;
}

#canvas-color, .picture-region {
	position : absolute;
	left : 0;
	top : 0;
}

.picture-inprogress {
	position : absolute;
	left : 0;
	top : 0;
	z-index : 9;
}


/* -------- Header -------- */

#logo {
	width : 90px;
}

#logo-container {
	display : inline-block;
	*display : inline;	/* IE6+7 */
	margin-right : 2px;
	*margin-right : 97px;	/* IE6+7 */
	position : relative;
	width : 90px;
	height : 90px;
	vertical-align : top;
}

#logo-background {
	position : absolute;
	left : 0;
	top : 0;
	width : 80px;
	height : 80px;
	margin-left : 5px;
	margin-top : 5px;
	z-index : 0;
}

#logo-link {
	position : absolute;
	z-index : 1;
}

#leaderboard {
    float: right;
}


/* -------- Footer -------- */

#footer {
	clear : both;
	padding-left : 3px;
	font-size : 12px;
	padding-top : 20px;
	color : rgb(100,100,100);
	padding-bottom: 10px;
}

#footer #footer-line {
	width : 100%;
	height : 1px;
	border-top : 1px solid rgb(200,200,200);
	margin-bottom : 5px;
}

/* -------- The save page -------- */

#finished_product {
	width:820px;
}

#image_container {
	width:800px;
	overflow:hidden;	
}

#sharebar {
	width:800px;
	/* margin: 30px 200px 0px 0px; */
}
.share_button {
	height: 50px;
	margin: 10px 10px;
	float:left;
}

.share_button span {
	font-size:12px;
	display:block;
	padding:10px 0px 5px 45px;
}

.share_button img {
	display: block;
	float:left;
}

#embed_image {
	clear:both;
	overflow:hidden;
	margin: 10px 0px;
	border-top: 1px dashed #808080;
}
#embed_image h3 {
    margin-top: 10px;
}
#preview {
	width: 300px;
	float: left;
}
#copypaste {
	width:  500px;
	float:right;
    margin-right:200px;
}


/* Pages - Printable */

#printable_sidebar {
	float:right;
	width: 200px;
	margin: 50px 0px 0px;
}

#picture_box {
	width: 700px;
	float:left;
}


/* --------- Gallery ---------*/

.pic {
    width: 210px;
    height: 80px;
    margin: 10px;
    float:left;
    border: 1px solid #ececec;
}

.pic img {
    margin: 5px;
    float:left;
}
.pic_title {
        display:block;
        
        font-size:10px;
        margin:30px 0px;
        text-align:left;
}


/* ------------- Apply page ------------*/

#apply_table {
    margin-bottom: 20px;
}

#apply_table td {
    padding: 2px;
}


/* -------- Account page --------- */

#account_table {
    margin-top: 20px;
    
    font-weight: 200;
}

#account_table tr {
    border-bottom: 1px solid #ccc;
}

.account_table_middle {
    padding: 10px 100px 10px 50px;
}

.account_table_label {
    padding: 10px 10px;
}


/* -------- Tags Page ---------------- */

#tags_table {
    font-size:20px;
}

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

.tag_link {
    padding:10px;
}

/* -------- The end -------- */