/* --------------------------------------------------
Project: 	TrippyDoo
Author:  	VISUALIS / www.visualis.ro
Usage:   	Intro
Date:		24.06.2009
-------------------------------------------------- */

/* DEFAULT BROWSER STYLE RESET */
html, body, div, span, p, h1, h2, h3, h4, h5, h6, a, dl, dt, dd, ul, ol, li, form, fieldset, legend, label, input, textarea, select, button, blockquote, q, img, font, small, strong, strike, sup, sub, em, code, abbr, acronym, pre, table, caption, th, tr, td { margin:0; padding:0; border:0; outline:none; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
ol, ul {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
strong {font-weight:bold;}
em {font-style:italic;}
a, a:active, a:hover, a:focus, a:visited, a:hover { outline: none; overflow:hidden;}
/* END STYLE RESET */

/* FORMS */
input, textarea, select { font-family:Arial, Helvetica, sans-serif; padding:6px;color:#333; border-top:1px solid #7c7c7c; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-bottom:1px solid #ddd; background:#fff url(../img/bg-field.gif) repeat-x top; color:#666;}
input.checkbox, input.radio { display:block; line-height:1.5em;	margin:.3em 0 0 3px; width:13px; height:13px; border:none; background:none;}

/* GENERAL */
body {font:62.5% Arial, Helvetica, sans-serif; color:#343434; background:#fff;}
div#page {text-align:center; margin:0 auto;}
.wrap {width:950px; margin:0 auto; text-align:left;}
.clear {clear:both;}


/* HEADER */
div#header {height:120px;}
div#header div.wrap {position:relative; }
div#header h1 {position:absolute; top:30px; left:0;}
div#header h1 a {width:171px; height:69px; text-indent:-100000em; background:url(../img/trippydoo-auth.jpg) no-repeat top left; float:left; }

div#twitter_div {width:510px; height:117px; text-align:left; background: url(../img/bg-twitter.jpg) no-repeat top left; border:1px solid #fff; position:absolute; top:2px; right:20px;}
div#twitter_div a#twitter-link {font-size:1.1em; color:#7C3C9B; text-decoration:none; position:absolute; top:97px; left:250px;}
div#twitter_div a#twitter-link:hover {color:#333; text-decoration:underline;} 
div#twitter_div ul#twitter_update_list {width:340px; height:50px; overflow:hidden; position:absolute; left:20px; top:26px;}
div#twitter_div ul#twitter_update_list li {font-size:1.2em; line-height:140%; color:#666; margin-bottom:5px; white-space:normal;}
div#twitter_div ul#twitter_update_list li a {color:#7C3C9B;}
div#twitter_div ul#twitter_update_list li a:hover {color:#fff; background:#7C3C9B; text-decoration:none;}

/* CONTENT */
div#content {height:355px; background:url(../img/bg-content.jpg) repeat-x 0 0;}
div#content div.wrap {padding:15px 0; height:325px; background:url(../img/bg-content-wrap.jpg) no-repeat 0 0; position:relative;}

div#content div.intro {position:absolute; left:20px; top:40px; width:310px;}
div#content div.intro h2 {font-size:2.8em; font-weight:bold; letter-spacing:-1px; color:#7C3C9B; margin-bottom:10px;}
div#content div.intro p {font-size:1.6em; line-height:140%; margin-bottom:10px;}
div#content div.intro a {color:#7C3C9B;}
div#content div.intro a:hover {background:#7C3C9B; color:#fff; text-decoration:none;}

div#tabs {position:absolute; top:20px; right:70px; width:360px; z-index:100;}
.ui-tabs {}
.ui-tabs-nav {padding: 2px 0px 0 0px;  position: relative; float:left;}
.ui-tabs-nav li { float:left; margin: 0 0 -1px 0;}
.ui-tabs-nav li a { display:block; text-decoration: none; padding: 10px 30px 10px 10px;font-size:1.4em; font-weight:bold; background:#A1C2DD; color:#000; margin-top:13px;}
.ui-tabs-nav li.ui-tabs-selected { padding:7px 30px 3px 10px; margin-bottom:-1px; background:#fff;}
.ui-tabs-nav li.ui-tabs-selected a {color:#222; background:#fff; font-size:1.6em; font-weight:bold; margin-top:0;}
.ui-tabs-panel { display:block; border: 0; background:#fff; padding:20px; float:left;}
.ui-tabs-hide { display: none !important; }

div#tabs  p {font-size:1.2em; line-height:140%; margin-bottom:5px; float:left;}

div#tabs a.twitterlogin{display:block;width:151px;height:24px;background:url(../img/Sign-in-with-Twitter-darker.png) no-repeat 0 0;padding-right:5px;float:left;}

form fieldset {background:#fff; color:#000; float:left; width:325px; border-top:1px solid #ddd; padding-top:15px;}
form fieldset legend {display:none;}
form fieldset label {margin-bottom:10px; float:left;}
form fieldset label strong {font-size:1.2em; font-weight:bold; margin-bottom:5px; float:left;}
form fieldset label input {font-size:1.4em; width:310px;}
form fieldset ul {float:left; margin-top:15px; width:320px;}
form fieldset ul li {display:inline; float:left;}
form fieldset ul li.forgot {float:right;padding-top:10px;}
form fieldset button {font-size:1.2em; color:#fff; font-weight:bold; background:#7C3C9B; padding:7px 45px 7px 10px; cursor:pointer;}
form fieldset button:hover {background:#5A2B71;}
form fieldset a {font-size:1.1em; color:#999;}
form fieldset a:hover {color:#7C3C9B; text-decoration:underline;}

div#trippy {width:177px; height:228px; background:url(../img/trippy-look.png) no-repeat 0 0; position:absolute; z-index:10; top:60px; right:350px;}

/* FOOTER */
div#footer {text-align:center; }
div#footer div.wrap {padding-top:20px; padding-bottom:40px; height:100px; text-align:left;}
div#footer ul {float:left; width:120px;}
div#footer ul li {line-height:1.6em; color:#999;}
div#footer ul li h2 {color:#333; font-size:1.2em; font-weight:bold; padding:2px; margin-bottom:5px;}
div#footer ul li a {color:#666; background:#fff; text-decoration:none; padding:1px 2px;}
div#footer ul li a:hover {background:#7C3C9B; color:#fff;}
div#footer ul.copyright {float:right; width:260px; background:url(../img/trippydoo-footer.jpg) no-repeat right;}

/* #### ERRORS ####*/
span.error {color:red}

/* #### thank you message ### */
div#thanks {width:177px; height:228px;; position:absolute; z-index:10; top:60px; right:150px;}