/* ==reset */
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,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;}ol,ul {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;}

/* HMTL 5 elements */
header, hgroup, footer, aside, nav, article, section { 
    display: block; 
}

/* ==elements */
body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-size: 83%;
}
h1{font-size:30px;font-weight:normal;margin-bottom: 15px;}
h2{font-size:14px;font-weight:bold;margin-bottom: 15px;}
h3{font-size: 13px;font-weight: bold;margin-bottom: 8px;}
h4{font-size: 13px;font-weight: bold;margin-bottom: 5px;}
h5{font-size: 13px;font-weight: bold;line-height: 12px;margin-bottom: 10px;}

a {font-weight: bold;}
a:link {color: #294f8a;text-decoration: none;}
a:visited {color: #294f8a;text-decoration: none;}
a:hover {color:#294f8a;text-decoration: underline;}
a:active {color: #294f8a;}

p {font-size: 13px;margin-bottom: 8px;}
ul {list-style-type: none;list-style-position: inside;margin:0;padding:0;}
#ie6and7 ul{margin-left: -16px;}
strong, b{font-weight: bold}
em {font-style: italic;}
small{font-size:10px;}
big{font-size:14px;}
input, textarea {padding: 2px;font-size: 13px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
table{width: 100%;}
table th, table td{padding: 4px;text-align: left;vertical-align: top;}
table th{font-weight: bold;font-size: 11px;}

input[type="submit"], input[type="button"] {font-size: 11px;padding: 4px;overflow:visible;border: 1px solid #000000;font-weight: bold;color: white;background-color: #666666;}
input[type="submit"]:hover, input[type="button"]:hover  {cursor: pointer;text-decoration: underline;}
input[type="password"], input[type="text"] {padding: 4px;}
a.linkbutton {text-align: center;min-width:4em;font-size: 11px;padding: 4px;overflow:visible;border: 1px solid #043269;font-weight: bold;color: white !important;background-color: #043269;display: inline-block;border: 1px solid #000000;cursor: pointer;}
input.secondary[type="submit"], input.secondary[type="button"] {border: 1px solid #E4E4E4;background-color: #E4E4E4;color: #043269 !important;}
a.linkbutton.secondary {border: 1px solid #E4E4E4;background-color: #E4E4E4;color: #043269 !important;}
input.super[type="submit"], input.super[type="button"] {font-size: 18px;font-weight: bold;}
a.linkbutton.super {font-size: 18px;font-weight: bold;}

hr {width: 100%;height: 6px;background-color: #576e1a;border: 0px solid white;color: #576e1a;clear: both;}
dl dt {display:inline-block;font-weight:bold;padding-bottom:8px;padding-right:6px;text-align:right;vertical-align:top;width:20%;}
dl dd {display:inline-block;padding-bottom:8px;width:76%;}

#ie7only dl dt {display:inline-block}
#ie7only dl dt {display:inline}
#ie7only dl dd {display:inline-block}
#ie7only dl dd {display:inline}

/* ==Tools */
.float-inside {float: left !important;}
.float-outside {float: right !important;}
.text-inside {text-align: left;}
.text-outside {text-align: right;}
.text-center {text-align: center;}
.clear {clear: both;}
.clearfix{overflow:auto;}
.hide{display:none;}
.serif{font-family: Cambria, Georgia, Times, "Times New Roman", serif;}
.sans-serif{font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;}
.column-20 {float: left;width: 20%;}
.column-25 {float: left;width: 25%;}
.column-75 {float: left;width: 75%;}
.column-50 {float: left;width: 48%;margin:0 1%}
.column-33 {float: left;width: 31%;margin:0 1%}
.column-66 {float: left;width: 66%;}
.margin-all{margin:8px;}
.margin-lr{margin:0 8px;}
.margin-tb{margin:8px 0;}
.margin-t{margin-top:8px;}
.margin-b{margin-bottom:8px}
.margin-r{margin-right:8px;}
.margin-l{margin-left:8px}
.css3 .rb-1000{-moz-border-radius: 4px 0 0 0;border-radius: 4px 0 0 0;-khtml-border-radius: 4px 0 0 0;-webkit-border-radius: 4px 0 0 0;}
.css3 .rb-1100{-moz-border-radius: 4px 4px 0 0;border-radius: 4px 4px 0 0;-khtml-border-radius: 4px 4px 0 0;-webkit-border-radius: 4px 4px 0 0;}
.css3 .rb-1110{-moz-border-radius: 4px 4px 4px 0;border-radius: 4px 4px 4px 0;-khtml-border-radius: 4px 4px 4px 0;-webkit-border-radius: 4px 4px 4px 0;}
.css3 .rb-1111{-moz-border-radius: 4px;border-radius: 4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px;}
.css3 .rb-0100{-moz-border-radius: 0 4px 0 0;border-radius: 0 4px 0 0;-khtml-border-radius: 0 4px 0 0;-webkit-border-radius: 0 4px 0 0;}
.css3 .rb-0110{-moz-border-radius: 0 4px 4px 0;border-radius: 0 4px 4px 0;-khtml-border-radius: 0 4px 4px 0;-webkit-border-radius: 0 4px 4px 0;}
.css3 .rb-0111{-moz-border-radius: 0 4px 4px 4px;border-radius: 0 4px 4px 4px;-khtml-border-radius: 0 4px 4px 4px;-webkit-border-radius: 0 4px 4px 4px;}
.css3 .rb-0011{-moz-border-radius: 0 0 4px 4px;border-radius: 0 0 4px 4px;-khtml-border-radius: 0 0 4px 4px;-webkit-border-radius: 0 0 4px 4px;}
.css3 .rb-0001{-moz-border-radius: 0 0 0 4px;border-radius: 0 0 0 4px;-khtml-border-radius: 0 0 0 4px;-webkit-border-radius: 0 0 0 4px;}
.css3 .rb-0101{-moz-border-radius: 0 4 0 4px;border-radius: 0 4 0 4px;-khtml-border-radius: 0 4 0 4px;-webkit-border-radius: 0 4 0 4px;}
.css3 .rb-1010{-moz-border-radius: 4px 0 4px 0;border-radius: 4px 0 4px 0;-khtml-border-radius: 4px 0 4px 0;-webkit-border-radius: 4px 0 4px 0;}
.css3 .rb-0010{-moz-border-radius: 0 0 4px 0;border-radius: 0 0 4px 0;-khtml-border-radius: 0 0 4px 0;-webkit-border-radius: 0 0 4px 0;}
.css3 .rb-0001{-moz-border-radius: 0 0 0 4px;border-radius: 0 0 0 4px;-khtml-border-radius: 0 0 0 4px;-webkit-border-radius: 0 0 0 4px;}
.css3 .rb-1001{-moz-border-radius: 4px 0 0 4px;border-radius: 4px 0 0 4px;-khtml-border-radius: 4px 0 0 4px;-webkit-border-radius: 4px 0 0 4px;}
.css3 .rb-1011{-moz-border-radius: 4px 0 4px 4px;border-radius: 4px 0 4px 4px;-khtml-border-radius: 4px 0 4px 4px;-webkit-border-radius: 4px 0 4px 4px;}
.css3 .rb-1101{-moz-border-radius: 4px 4px 0 4px;border-radius: 4px 4px 0 4px;-khtml-border-radius: 4px 4px 0 4px;-webkit-border-radius: 4px 4px 0 4px;}

.css3 .box-shadow{-moz-box-shadow: 0px 0px 16px rgba(0, 0, 0, .6);box-shadow: 0px 0px 16px rgba(0, 0, 0, .6);-khtml-box-shadow: 0px 0px 16px rgba(0, 0, 0, .6);-webkit-box-shadow: 0px 0px 16px rgba(0, 0, 0, .6);}
.button{padding:8px;cursor: pointer;}


.spr{
	display:inline-block;
	vertical-align:text-top;
	text-indent:-9999px;
	text-align:left;
	vertical-align:middle;
}
#ie6and7 .spr{text-indent:0}

a.spr-parent{vertical-align:text-top}
a.spr-parent:hover{text-decoration:none;cursor:pointer}

.spr{background: transparent url(images/icons-sprite.png) no-repeat top left;}
.spr.sprite-icon-soc-facebook { background-position: 0 0; width: 24px; height: 24px; } 
.spr.sprite-icon-soc-flickr { background-position: -74px 0; width: 24px; height: 24px; } 
.spr.sprite-icon-soc-linkedin { background-position: -148px 0; width: 24px; height: 24px; } 
.spr.sprite-icon-soc-twitter { background-position: -222px 0; width: 24px; height: 24px; } 

/* custom */
/*
c3122f red
e6e7e8 grey
4b8196 steel blue
7bd3f7 cyan-ish
053245 dark blue
*/
html {height: 100%;}
body {background-color: #c11a1b;color: white;}
h1{text-align: right;width:376px;margin:0 auto 8px;padding: 8px 12px;font-size: 18px;background: transparent url(../media/images/h1-bg.png) repeat-x 0 0;}
em{font-weight: bold;color: #053245;font-style: normal;}
dl dt{color: white}

a:link, a:active, a:visited, a:hover{text-decoration:underline;color:#053245}
a:hover{text-decoration:none;color:#053245}

#container{min-height:500px;background: transparent url(../media/images/logo-thetransient.png) no-repeat 20% -55px;width: 100%;margin: 0 auto;padding-top:80px;}
#content{width:400px;margin: 0 auto;background: transparent url(../media/images/content-bg.png) repeat-x 0 0;color: #053245;font-size:12px;}
#content .item{padding: 12px;line-height: 20px;}

#ie6and7 #content #social{margin-left: 0px;}
#content #social li{width: 49%;float:left;margin:4px 0;}
#content #social img{vertical-align: middle;}
#content h2{margin:6px 0;font-size: 18px;font-style: italic;font-weight: bold;color: #fff}

#controls{margin:0 auto;padding:10px;width:400px;}
#controls .button{float:right;}

#old-browser{margin:4px auto;padding:10px;width:380px;background-color:white;color:#333;}

#color-cubes{
	float:left;
	margin-top:13px;
}
#color-cubes .item{
	background-color:white;
	border:1px solid white;
	float:left;
	height:12px;
	margin:2px;
	overflow:hidden;
	text-indent:1000em;
	width:12px;
}
#color-cubes .item.selected{
	border-top:3px solid white;
}
#test-div{padding:1em;margin:1em;border:1px solid #999;background-color:#ccc}

.css3 .button{
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, .6);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, .6);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, .6);
	text-shadow: 1px 1px 0px #fff;
	filter: dropshadow(color=#fff, offx=1, offy=1);
	
	background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(227,227,227)),
    color-stop(0.75, rgb(204,204,204))
);
	background: -moz-linear-gradient(
    center bottom,
    rgb(227,227,227) 15%,
    rgb(204,204,204) 75%
);
	border:0px solid white;

	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
}

.css3 .button:hover{
	-webkit-transform:translate(2px, 2px) scale(1, 1) rotate(0deg);
	-moz-transform:translate(2px, 2px) scale(1, 1) rotate(0deg);
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
	
	background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(227,227,227)),
    color-stop(0.75, rgb(204,204,204))
);
	background: -moz-linear-gradient(
    center bottom,
    rgb(180,180,180) 15%,
    rgb(204,204,204) 75%
);
}
.css3 .button.b-green{
	background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(227,227,227)),
    color-stop(0.75, rgb(78,196,55))
);
	background: -moz-linear-gradient(
    center bottom,
    rgb(227,227,227) 15%,
    rgb(78,196,55) 75%
);
}



body.css3{
background:-webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, rgb(252,96,5)),
    color-stop(0.5, rgb(191,23,29)),
    color-stop(1, rgb(252,96,5))
);
background:-moz-linear-gradient(
    left center,
    rgb(252,96,5) -20%,
    rgb(191,23,29) 50%,
    rgb(252,96,5) 120%
);
}
/*
body.css3.bodyGreen{
background:-webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, rgb(78,196,55)),
    color-stop(0.5, (51,138,33)),
    color-stop(1, rgb(78,196,55))
);
background:-moz-linear-gradient(
    left center,
    rgb(78,196,55) -20%,
    rgb(51,138,33) 50%,
    rgb(78,196,55) 120%
);
}
*/


.css3 h1{
	text-shadow: 1px 1px 0px rgba(0, 0, 0, .6);
	filter: dropshadow(color=#ccc, offx=1, offy=1);

background:-webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.21, rgb(123,210,247)),
    color-stop(0.68, rgb(95,194,230))
);
background:-moz-linear-gradient(
    center top,
    rgb(123,210,247) 21%,
    rgb(95,194,230) 68%
);
}
.css3 h1 em{
	text-shadow: 1px 1px 0px rgba(255, 255, 255, .6);
	filter: dropshadow(color=#ccc, offx=1, offy=1);
}

.css3 #content {
background:-webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.21, rgb(123,210,247)),
    color-stop(0.68, rgb(95,194,230))
);
background:-moz-linear-gradient(
    center top,
    rgb(123,210,247) 21%,
    rgb(95,194,230) 68%
);
}



