/* Style sheet for gplearning website - June 2009 - Jaz RACGP IT */



/* reset all styles */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}


body {
line-height: 1.1;
}

input, fieldset {margin: 0; padding: 0;}

ol, ul {
list-style: none;
}



:focus {
outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */

table {
border-collapse: collapse;
border-spacing: 0;
}

/* end reset all styles */


/* generic and hacks*/

.clear{clear: both;}
.hidden{display: none !important;}

/* end generic and hacks*/


/* layout */

body { 
font-size: 75%; 
font-family: /*"Helvetica Neue", Helvetica, arial, sans-serif;*/  Verdana, Arial, Sans-Serif;
background: #8bb1d8 url(../images/bg_gradient.gif) top left repeat-x;
}





/* Modern browsers - IE6 and below font size set above (75%). Vertical unit set at 18px - basefont 12px - line-height .5 */

html>body {
font-size: 11px;
}

#wrapper{
width: 960px;
margin: 0 auto;
display: table; /* give it 'layout' */
clear: both;
}

#swirls {
background: transparent url(../images/bg_swirls.gif) top left no-repeat;
height: 498px;
}

/* image replacement */

#gplearninglogo{
background: transparent url(../images/logo_gpl.gif) no-repeat;
width: 248px;
height: 65px;
text-indent:-32697px;
float: left;
cursor: pointer;
margin-top: 50px;
margin-bottom: 30px;

}

#racgplogo{
background: transparent url(../images/logo_racgp.gif) no-repeat;
width: 240px;
height: 72px;
text-indent:-32697px;
float: right;
cursor: pointer;
margin-top: 50px;
margin-bottom: 30px;

}

#buttondemo{
background: transparent url(../images/sprite_demo.gif) 0 0 no-repeat;
width: 235px;
height: 76px;
text-indent:-32697px;
float: left;
cursor: pointer;
text-decoration: none;
}

#buttoncat{
background: transparent url(../images/sprite_cat.gif) 0 0  no-repeat;
width: 235px;
height: 76px;
text-indent:-32697px;
float: left;
cursor: pointer;
text-decoration: none;
}

#buttonsearch{
background: transparent url(../images/sprite_search.gif) 0 0 no-repeat;
width: 235px;
height: 76px;
text-indent:-32697px;
float: left;
cursor: pointer;
text-decoration: none;
}

#buttontrial{
background: transparent url(../images/sprite_trial.gif) 0 0 no-repeat;
width: 235px;
height: 76px;
text-indent:-32697px;
float: left;
cursor: pointer;
text-decoration: none;
}

#memberslogin{
background: transparent url(../images/title_memberslogin.gif) no-repeat;
width: 99px;
height: 30px;
text-indent:-32697px;
float: left;
}

#dweeb{
/*background: transparent url(../images/dweeb.gif) no-repeat;
width: 123px;
height: 235px;*/

background: transparent url(../images/dweeb1.gif) no-repeat;

width: 132px;
height: 235px;

text-indent:-32697px;
position: absolute;
/*top: 40px;
left: 276px;*/

top: 45px;
left: 275px;

z-index: 2;

}


#titlephone{
background: transparent url(../images/title_phone.gif) no-repeat;
width: 208px;
height: 25px;
text-indent:-32697px;
float: right;
}

#becomeamember{
background: transparent url(../images/title_become.gif) no-repeat;
width: 445px;
height: 84px;
text-indent:-32697px;
margin-left: 70px;
margin-top: 30px;
}

#buttonjoin{
background: transparent url(../images/button_join.gif) no-repeat;
width: 264px;
height: 49px;
text-indent:-32697px;
margin-left: 115px;
margin-top: 3px;
cursor: pointer;
display: block;
text-decoration:none;
}

/* end image replacement */

#gplbuttons{
background:#fff; 
padding: 10px 10px 10px 10px;
width: 940px;
height: 76px;
overflow:hidden;
margin-bottom:30px;
}


/* contentarea  */

#contentarea {
display: table;
background-color:#fff;
width: 960px;
margin-bottom:30px;
}



#columnlogin {
width: 360px;
background-color: #fff;
/*background: transparent url(../images/bg_login.gif) no-repeat;*/
float: left;
padding: 10px 0px 10px 10px;
position: relative;
}


#loginbackground {
padding: 0px 15px 15px 15px; 
background-color:#ccc;
height: 325px;
}

#logininner {
background-color:#E3E3E3;
padding: 10px;
min-height: 220px;
height: 220px;
}

div[id] #logininner {height: auto;} /* opera and mozilla reset */

#loginforgot {
background-color:#d6d6d6;
height: 55px;
}



/* close contentarea  */


/* terms menu */

#termsmenu {
float:left;
width:100%;
overflow:hidden;
position:relative;
margin-bottom: 30px;
min-height: 50px;
height: 50px;

}

div[id] #termsmenu {height: auto;} /* opera and mozilla reset */

#termsmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
width:auto;
}

#termsmenu ul li{
display:block;
float:left;
list-style:none;
position:relative;
right:50%; 
width:auto;
}

#termsmenu ul li a {
color: #fff; 
float: left;
padding-right: 5px;
margin-right: 5px;
border-right: 1px solid #fff;
display:block;
width:auto;
}

#termsmenu ul li a:link{color: #fff; text-decoration: underline !important;}
#termsmenu ul li a:visited{color: #fff;  text-decoration: underline !important;}
#termsmenu ul li a:hover{color: #fff; text-decoration: underline !important;}
.noborder{border-right: none !important;}

/* end terms menu */

/* text styles */

#loginforgot p {
text-align:center;
padding: 10px 0px 0px 5px;}

#loginforgot a, #loginforgot a:link, #loginforgot a:visited, #loginforgot a:hover {color:#003366; text-decoration:underline !important; font-size: 11px; line-height: 18px; font-weight: bold;}

.small {text-align:center; font-size: 11px;}
.small a, .small a:link, .small a:visited, .small a:hover {color:#95C7FA; text-decoration:underline !important;}

#usernameerror, #passworderror{color: #CE2626!important; display: none;}

.accordionbg p {line-height: 15px}

/* end text styles */



/* accordion */

#columnaccordion{
width: 580px;
float: right;
min-height: 325px;
height: 325px;
margin-bottom: 10px;
margin-right: 10px;
padding: 0px;
background-color: #517DAE;
display: none;
}

div[id] #columnaccordion{
height: auto; /* opera and mozilla reset*/
}


.accordionbar{height:30px; border-bottom: 1px solid #fff; display: block; width: 550px; cursor: pointer; padding: 0px 0px 0px 30px; }


.blueone{background: #5fbce9 url(../images/shadow1title_on.gif) no-repeat; text-indent:-32697px;}
.bluetwo{background: #8fd0ef url(../images/shadow2title_off.gif) no-repeat; text-indent:-32697px;}
.bluethree{background: #afddf3 url(../images/shadow3title_off.gif) no-repeat; text-indent:-32697px;}

.accordionbg{background: #396393 url(../images/bg_content_gradient.jpg) no-repeat; height: 232px;  overflow:hidden;}



.accordionbg p {padding: 10px 30px 10px 40px; color: #fff;}

/* form */
#loginform {margin-left: 25px; margin-top: 10px; float: left; width:auto;}
#loginform legend {display: none;}
#loginform label {color: #003366; font-weight: bold; }
#loginform #username, #loginform #password {margin-bottom: 10px; margin-top: 5px; width: 196px; height: 15px; border: none; padding: 4px 5px 6px 5px;}


#formgroup {overflow:hidden; width: 206px; width:auto; border: 1px solid #000;}
#loginform #remember {float: left; margin: 0px 10px 0px 0px; padding: 0px; width:auto;}


#formgroup label {float: left; width:auto;}

#submitlogin{
background: #e1e1e1 url(../images/button_login.gif) no-repeat;
width: 206px;
height: 34px;
margin: 20px 0px 0px 0px;
border: 0px;
text-indent:-32697px;
color: #fff;
cursor: pointer;
text-decoration:none;
display: block;
}

#demoscreen{padding: 10px; min-height: 340px; height: 340px; overflow:auto;}


div[id] #demoscreen {height: auto; /* opera and mozilla reset */}

#pagecontent {margin-top: 10px;}





#demoscreen p {line-height: 1.4em; font-size: 1em; margin-bottom: 2em; color: #333;}
#demoscreen h2 {line-height: 1.4em; font-size: 1.3em !important; margin-bottom: 1em; color: #333; }
#demoscreen h3 {line-height: 1.4em; font-size: 1.1em !important; margin-bottom: 1em; color: #333;}
#demoscreen h1 {line-height: 1.4em; font-size: 1.6em !important; color: #fff !important; background-color: #003366; display: block;
overflow:auto; padding: 20px 10px 20px 10px; }



#demoscreen ul   {list-style-position:outside; list-style-type:disc; padding-left: 30px; line-height: 1.5em; padding-bottom: 20px; padding-right: 20px; color: #333;}

#columnlist {float: left; width: 256px; clear: right; padding-top: 20px; margin-left: 5px; background-color:#eee; min-height: 120px; height: 120px; }

div[id] #columnlist {height: auto; /* opera and mozilla reset */}

.breadcrumb {font-size: 10px !important; display: block; border-bottom: 1px solid #ccc; padding-bottom: 10px;}
.breadcrumbnounder {font-size: 10px !important; display: block; padding-bottom: 10px !important;; margin-bottom: 0px !important;;}

#demoflashmovie{margin-bottom: 0px !important; padding-bottom: 0px !important;}

#loading{  
position: absolute;
top: 320px;
left: 520px;
z-index: 5;
visibility: hidden;
background: transparent url(../images/loading.gif) no-repeat;
} 

/* this one fixes the IE FOUC display bug fix on Opera -  */
noscript {display: none;}

#loginalert{display: none;
 z-index: 1;
padding: 10px;
min-height: 190px;
height: 190px;
position: absolute;
width: 250px;
background-color:#E3E3E3;
margin-left: 0px;
margin-top: 30px;
 }

div[id] #loginalert {height: auto;} /* opera and mozilla reset */


#loginalert p {line-height: 1.4em; size: 1.1em !important; margin-bottom: 2em; color: #CE2626;}
#loginalert h1 {line-height: 1.4em; size: 1.5em !important; margin-bottom: 2em; color: #CE2626; font-family:"Helvetica Neue", Helvetica, arial, sans-serif;}

#alertmessage{display: block; margin-top: 20px; margin-left: 25px;}

a {color:#003366; text-decoration:underline !important;}
a:link {color:#003366; text-decoration:underline !important;}
a:visited {color:#333; text-decoration:underline !important;}
a:hover {color:#000; text-decoration:underline !important; }


#resources{
background: transparent url(../images/title_resources.gif) no-repeat;
width: 200px;
height: 81px;
text-indent:-32697px;
color: #fff;
float: left;
text-decoration: none;
}

#indentedarea{padding: 10px;}